|
Originally Posted by Julian
Salathe, a more constructive reply would have been nicer.
dumbcoder, this is what you need to do:
1. Slice the content box into a header, footer and a vertically expandable content section.
2. Surround all in a wrapping div.
3. Place header div at the top with header image as the background. Make sure you specify height and width and it's non repeating.
4. Make content div and have content image as background, make sure you have it can repeat in the y axis.
5. Make a footer div at the bottom with footer image as the background. Make sure you specify height and width and it's non repeating.
6. Place your wrapper div where you want it!  |
Thanks a lot Julian, you're always helpful heh.
Just to confirm what you said, I should slice the content box like this:
As you can see above, there are three images: header.gif, content.gif, footer.gif. Is padding required for the content.gif? i would assume so, but not sure.
and the XHTML code should be:
Code:
<body>
<div id="header"></div>
<div id="content">Lorem Ipsum</div>
<div id="footer"></div>
and the CSS code should be:
Code:
#header {
background-image: url('images/header.gif');
padding: 0;
margin: 0;
height: *true height*
width: *true width*
}
#content {
background-image: url('images/content.gif');
padding-left: 10px; /* Is This Right? */
margin: 0;
height: *true height*
width: *true width*
}
#footer {
background-image: url('images/footer.gif');
padding: 0;
margin: 0;
height: *true height*
width: *true width*
}
