Using <div id="footer">

[apezVal]

I want to make a page that has a 'fixed back-ground image' and a z-indexed layer with all the text content that can scroll and appear to float above the background. Part of the text and body part will have a stripe across the bottom for some foot-notes and reference credits. My question is HOW can the CSS ID-selector be structured so that IF the page is edited in the future and made to have evermore content so as to "push the footer div to a larger Ypx value... this footer stripe will remain just the X•Y div stripe all (100%) across the base of the page??? I want to use 'px' where ever possible and avoid em, pt, and/or relative or % allocationing.
Any suggestions?

[Tim158]

Assuming that the footer is placed above the background image, you can use the position:relative; top:XYpx attributes for the footer.

i.e.

<div id="maincontent">
...
</div>

<div id="footer">

</div>

This way your footer will always be XY pixels below your main content.

-Tim.

[apezVal]

Thanks Tim 158, that should be easy enough,...but how do I define both 'body = (div-main-bod + footer + their sub-divs (trying NOT to use fixed OR relative-positioned tables))...and get it all z-indexed to scroll above the fixed back-ground. This may be elementary for some but all new and rather abvanced to me. (I know Erik Meyer (The Master of us all) has it down great... see the example at
http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html

It is amazing...and will wonders ever cease... that he could do it without java and totally with CSS, but alas, his css code is not made totally public for the total lesson.

Any way back to the books.
Thanks for responding.

[nkaisare]

Originally posted by apezVal
His css code is not made totally public for the total lesson.
You can view source and get the CSS file. Here is Eric's CSS for spiral demo:
http://www.meyerweb.com/eric/css/edge/complexspiral/shell-bg.css

All of his CSS

body {background: black url(shell-bg.jpg) 0 0 no-repeat fixed;}
div#content {background: #468 url(shell-blue.jpg) 0 0 no-repeat fixed;}
div#links a {background: transparent url(shell-fade.jpg) 0 0 no-repeat fixed;}
div#links a:hover {background: transparent url(shell-wash.jpg) 0 0 no-repeat fixed;}

body {position: relative; margin: 0; padding: 0;}
div#content {position: absolute; top: 26px; left: 161px; right: 25px;
color: #EED; font: 13px Verdana, sans-serif; padding: 10px;
border: solid #FFCC99;}
div#content p {margin: 0 1em 1em;}
div#content h3 {margin-bottom: 0.25em;}
div#links a {display: block; text-align: center; font: bold 1em sans-serif;
padding: 5px 10px; margin: 0 0 2px; border-width: 0;
text-decoration: none; color: #FFC;}
div#links a:hover {color: #411;}
h1 {margin: -9px -9px 0.5em; padding: 15px 0 5px; text-align: right; background: #ACE; color: #024;
letter-spacing: 0.5em; text-transform: lowercase; font: bold 25px sans-serif; height: 28px; vertical-align: middle; white-space: nowrap;}
dt {font-weight: bold;}
dd {margin-bottom: 0.66em;}
div#content a:link {color: white;}
div#content a:visited {color: #BBC;}
div#content a:link:hover {color: #FF0;}
div#content a:visited:hover {color: #CC0;}
div#links {position: absolute; top: 52px; left: 0; width: 160px; height: 700px; font: 16px Verdana, sans-serif;}
code, pre {color: #EDC; font: 110% monospace;}