PDA

View Full Version : question about zen garden


naynay447
05 May 2011, 10:48 AM
http://csszengarden.com/?cssfile=/213/213.css&page=0

^^^love this particular page. Question is how to put images like they have at the bottom. I want some pics at the bottom of a site and allow the text and content to scroll under it. anyone know how?
fahmi
05 May 2011, 07:50 PM
roughly your html will go like this:


<body>
<div id="wrapper">
<div id="content">
YOUR CONTENT GOES HERE
</div>
</div>
<div id="footer">
YOUR FOOTER IN THIS CASE THE IMAGE
</div>
</body>

and your css will go like this:


#wrapper {
min-height: 100%;
height: auto !important; /* don't remove this line. it's hack for IE min-height */
height: 100%; /* don't remove this line. it's hack for IE min-height */
margin-bottom: -100px; /* length of your footer */
}

#content {
padding-bottom: 200px; /* footer's height + gap after content */
}

#footer {
position: relative; /* must have this in order to assign z-index */
z-index: 1;
height: 100px;
background: url(image.jpg) center no-repeat;
}