UPDATE: Thanks to to helpful advice from Alan and others I rebuilt this page from scratch:
http://www.em-w.com/oldschoolband/homepage_new.html I used the html and css on this page as a starting point: http://css-class.com/test/demos/sticky-footer3.htm So I think its an improvement and I got the crowd to behave correctly! Two things though; I was unable to get the crowd in front of the rotating images without a z-index property, and I was unable to control the positioning of the rotating images without setting an absolute. I was warned against both of these practices in this thread. But at least it seems to work now in multiple browsers. If anyone would care to critique this layout structure and offer suggestions on how to improve it -- either on those two points or anything else -- I'm all ears. Thanks! Matthew On Apr 2, 2010, at 6:52 AM, Alan Gresley wrote: > Matthew wrote: >> Hi everyone! This is my first post. >> >> I am new to CSS and find that I am fumbling around in the dark quite a bit. >> Therefore I was very pleased to discover this mailing list and hope that >> some experienced people will be able to help along the way. My hope is that >> I can bring specific questions to this forum as I come across them. >> >> Here is my first one: Please check this out: >> >> http://www.em-w.com/oldschoolband/homepage2_nmk.html >> >> >> This site is my first attempt to build one using CSS. I know I rely too >> heavily on tables for layout, just like we did in the old days. My first CSS >> problem has to do with that crowd image that is fixed to the bottom of the >> window on the home page. The client likes it but would like the crowd to >> stop going up with a browser window one the browser becomes too small >> vertically. Is this possible? I can't think of a way. >> >> Hopefully that question is clear and someone out there doesn't mind helping >> me! Thank you! >> >> - Matthew > > Welcome to the list Michael. > > You have done very well with your first use with CSS. I would caution > you about putting to much into the CSS. One example is this. > > > .homeContent { > background: #ffffff; > width:400px; > position: absolute; > /* top: 175px;*/ > left: 30px; > z-index: 3 !important; > padding: 10px; > margin: 25px 0 0 25px; > opacity: .7; > top: 250px; > /* height: 316px;*/ > left: -3px; > } > > Layering a page with z-index is not really needed and used with > positioning in your first attempts can make CSS really confusing. The > list can help you with this learning process. > > To have the footer with the crowd image to always appear below the > main content within the div.oneColFixCtr, the div.footer must be > outside the div.oneColFixCtr in the source. Like this. > > <html> > <body> > <div class"oneColFixCtr"> .. </div> > <div class"footer"> .. </div> > </body> > </html> > > > What you are seeking is a sticky footer. Various examples using > position:relative are: > > <http://css-class.com/test/demos/sticky-footer4.htm> > > <http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page/> > > <http://www.themaninblue.com/writing/perspective/2005/08/29/> > > > Using Fixed positioning will alway fixed it to the bottom of the > viewport (window). Using absolute positioning is tricky but can be done. > > > -- > Alan http://css-class.com/ > > Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo > ______________________________________________________________________ > css-discuss [cs...@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
