Friday, January 16, 2009

Fixed-Positioning & CSS Zen Garden


Got a tip from my teacher again. This time it's on "fixed positioning" as seen on this CSS Zen Garden site.

~~~~~~~~~~~~~~~~~

The css zen garden footer is positioned with "fixed positioning". There is a div at the bottom of the layout with the bottom.png footer image, positioned 0 pixels from the bottom of the browser. The z-index keeps the div on top of the other divs.

#extraDiv2 {
background-image: url(bottom.png);
background-repeat: no-repeat;
background-position: center;
height: 200px;
width: 100%;
position: fixed;
bottom: 0px;
z-index: 5;
}

Here are a couple articles on fixed positioning,

http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning

http://annevankesteren.nl/2004/07/fixed-positioning

No comments:

Post a Comment