I’m going to try and explain this in total noob speak, so I can understand what I’m trying to say…
If we pretend the twitter div isn’t there for a moment…
Like building blocks (but within the wrapper div), the ‘brick’ on the top of the ‘wall’ is the header div, sat below it is the content div and then sat below that is the footer div. Say all these divs are normal static elements, like you say, naturally following each other. If you can see, the header graphic has part of the defined content area within the header div, but would require the content to overlap/be on top of whatever div is below it…Currently I have the content text in it’s own div…
Could I in fact, put that content/text within the header div (not in another div), define the header graphic to top and no repeat and define to text margins to be x and y from top/bottom/left/right…then the header div would expand down as required by the length of the content? The wrapper div would also extend with it’s background set to repeat and the footer div would move down with it all…
If you set a background image, the header will not expand to make room for it. It will only fully show if the height is enough. The header would expand as necessary depending on how much content is in it (assuming no height is set on it).
Again, same thing. The wrapper would extend assuming the height has not been clearly set.
Hmm…so I set the header div height so the full background image is visible, but then the text/content within it can’t expand past that height UNLESS I say something like allow overflow or scroll?
In what way would I define the text margins separate to div margins?
Thank you for all your help guys. Really appreciate it.
The header div is a wasted and unnecessary div as it holds no content apart from your image. You could have started the content div there instead and applied the image to the background of the content div and avoid the extra wasted div. Then you wouldn’t need all those negative margins as everything goes back into the flow as required. Just ensure the content has a min-height to cater for the height of the background image if you have short pages somewhere.
Even if you did need an extra div for the header image you would have been better calling it .inner and wrapping it around the content so that you again did not need all the negative margins.
Try not to add elements when you already have elements in the page that can be utilised. A header that containes no actual content is not really a header it is just decoration and should not be noted in the mark up.
Alternatively your header should probably be done like this instead using an image replacement technique (gilder Levin)to get real content into the html.
<h1>United Kerrydom<span></span></h1>
Note that your 345k background image needs to be optimised down as that’ way too big a filesize. You can probably get it down to about 50k without much noticable loss of quality.
