Forum Moderators: not2easy
I'm working on a page and I've got what I think is a clumsy way of putting a "shadow" below my main content, which is centered in the page. Essentially I've created a div in-between my wrapper div, and content div.
The CSS rule is essentially:
#wrap { background: (url/tile.png) repeat;}
#shadow {width: 1044px; margin-right: auto; background: (url/shadow.png) repeat-x bottom left;}
#main_content {width: 1024px; background: #159; margin-right: auto;}
And the HTML looks like:
<body>
<div id="wrap">
<div id="shadow">
<div id="main_content">
...
Don't get me wrong, this works and it's alright. But what I'm really hoping to accomplish is having an image placed with a negative margin that you _won't_ be able to scroll down to see, but is _only_ visible when the main content is smaller than the window.
I've tried searching, and got a few HTML/CSS books but couldn't exactly what I'm looking for.
Is there a better way to do this?
This is NOT correct and will not work;
#wrap {
background: (url/tile.png) repeat;
}
Correct is:
#wrap {
background: url(path-to-image/title.png)repeat;
}
W3C - Background Properties [w3.org]
W3C (X)HTML Validator [validator.w3.org]
W3C CSS Validator [jigsaw.w3.org]
<edit> Typ0 </edit>
[edited by: D_Blackwell at 9:04 pm (utc) on Dec. 1, 2009]
Ideally I'm looking for a shadow dropped below the main content that you cannot scroll to see. You can only see it when the main content is shorter than the window.
Something like negative margins when you do a drop shadow on an image in the content.
Pseudo code is allowed, don't apologise! :)
Do you mean a like a right/bottom shadow, and you're trying for it not to cause any scrollbars unless the actual content dictates them?
and is the main content the whole window (width) or are the body and HTML elements already holding something else?
I am guessing (it's really difficult to talk images sometimes ;)) but the way I might tackle it would be to make a huge background image kind of like this
............¦¦
............¦¦
............¦¦
............¦¦
============
where the dots are transparent (or your actual background color) and the ¦¦ and == are your shadow, make it very tall, to cover the worst case scenario and at least 1044px wide, then if it's not too big as in file size1, place it as the background to the body element positioned to the bottom right or probably more accurately <bottom 0px> where the 0px can be adjusted, negatively, to make sure the right side is @1024px.
1 another way, if that image is too big is to make an image for the right side of the shadow say 20px wide and 1-10px high then repeat that down the right side of the body element at the co-ordinates <1024px 0>, this won't take into account the bottom right corner though so what I might be inclined to do is put the previous image on the HTML element then put a little "bottom right" corner as a non-repeating image on the BODY element positioned <bottom 1024px>. Then you can make the bottom part of the shadow meet this by placing a simple repeat-x shadow as the background to your footer or what ever else is at the very bottom of your page to meet the "corner"
It's really hard to explain, but hope some of these thoughts help you to see it for your purposes, I'm not sure I would go the negative margin route for this, but YMMV
Q. do you want your content 1024px wide or the content+shadow to be 1024px?
I'm not sure how I could get this to work for the bottom.
Q. how do you position the image co-ordinates below the content? since it's not an absolute value like 1024px, but instead depends on the content's height.
I can place a DIV around the faux column and content DIVs, but it will cause a scrollbar to reveal the bottom shadow.
not sure negative margining will work here, but if it did the background image would still work best on the HTML/BODY elements with the bottom part of the image on the main wrapper, then pad the top and left side of the content div and negatively margin it (this is untested)
Don't get me wrong, this works and it's alright
You asked for another way, I think I provided another way, it just might take a bit of working out to fit your image. We don't do everyone's homework here you know ;)
I'm not sure how I could get this to work for the bottom.
I'm sorry I tried to explain two options, but if I wasn't clear enough, then do provide some code so we can see what you've tried, thanks
It basically is a faux column image for the right side, but until we can use a multiple background properly some creative thinking is needed. For the bottom bit add in an extra div at the bottom or use an existing footer div, pad it at the bottom and put the bottom image on it. This could also be done using a "sticky" footer possibly.
My way of thinking:
You know the width so you can position the right side properly, you don't know the height so you need it to appear at the bottom where ever that is, even with the width, the scrollbar will appear unless you put the background on the HTML or BODY element
