webjockey Posted May 1, 2009 Share Posted May 1, 2009 I am creating a website for somebody, and I have run into a bit of an issue regarding the footer. In the design it is shown to be at the bottom of the page or the bottom of the viewport if the page is a short one. However, this website does not scale very well ( :/ ). I know how this is normally done. But for that system to work the footer text must appear at the bottom of the page. And, even though I have set a sansFooter content wrapper the footer seems to stick to the right of the content. I will give you guys a zip file of everything I have done so far, and I will keep at it, and see what we can come up with. In all honesty, it is probably something simple I have missed :) . http://www.davidclarkwebdesign.com/0037_rowmote/Archive.zip Quote Link to comment Share on other sites More sharing options...
digip Posted May 1, 2009 Share Posted May 1, 2009 Do you want this footer "test writing" area to be at the bottom of the page? If so, here is what I changed. stylesheet @charset "UTF-8"; /* CSS Document */ body { background-color:#ffffff; font-family:Arial, Helvetica, sans-serif; margin:0px; padding:0px; height:100%; } .container { position:relative; width:auto; min-height:100%; } .Header { background-image:url("img/headerbg.jpg"); background-color:#ffffff; background-position:top; background-repeat:repeat-x; height:250px; min-width:1100px; width:inherit; margin:0px; padding-bottom:10px; } img.logo { height:250px; width:250px; float:left; margin-top:10px; margin-left:10px; } img.title { float:left; vertical-align:top; margin-left:25px; margin-top:40px; } .headerCaption { width:250px; height:77px; float:left; margin-left:15px; margin-top:40px; } .midSectionWrapper { padding-left:10px; margin-top:10px; min-width:1100px; width:inherit; position:relative; margin-bottom:120px; } .contentImage { padding-left:50px; height:580px; float:left; } .Content { background-image:url("img/contentbg.png"); background-colour:transparent; background-position:center; background-repeat:no-repeat; width:410px; min-width:410px; max-width:410px; min-height:580px; margin-left:20px; padding-left:10px; padding-right:10px; padding-bottom:10px; padding-top:10px; float:left; } .contentContainer { padding:10px; } .sideBar { background-image:url(img/logo_highlight.png); background-position:top; background-repeat:no-repeat; background-colour:transparent; padding-top:125px; width:250px; min-width:250px; max-width:250px; min-height:100%; float:left; } .sideBarItem { width:250px; min-width:250px; max-width:250px; height:45px; min-height:45px; max-height:45px; background-color:#fafafa; line-height:45px; color:#cccccc; text-transform:uppercase; font-size:24px; } .sideBarItem:hover { width:250px; min-width:250px; max-width:250px; height:45px; min-height:45px; max-height:45px; position:relative; left:10px; background-color:#cccccc; line-height:45px; color:#ffffff; text-transform:uppercase; font-size:24px; } .sideBarItemSelect { width:250px; min-width:250px; max-width:250px; height:45px; min-height:45px; max-height:45px; position:relative; left:20px; background-color:#cccccc; line-height:45px; color:#ffffff; text-transform:uppercase; font-size:24px; } .contentSansFooter { height:100%; width:inherit; position:relative; float:left; } .Footer { height:100px; background-color:#cccccc; width:100%; min-width:1100px; position:relative; bottom:0px; float left; } span.headerCaptionText { color:#999999; font-size:24px; } span.normalText { color:#666666; font-size:12px; } span.footerText { color:#ffffff; font-size:12px; } span.footerText span.DavidClarkCaption { position:absolute; bottom:5px; left:5px; } index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Rowmote Home - Rowmote</title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> <link rel="stylesheet" type="text/css" href="menu.css" /> </head> <body> <div class="container"> <div class="Header"> <div align="left"><img src="img/logo.png" class="logo"/></div> <div> <div> <div style="float:left;"> <img src="img/title.png" class="title" float="left"/> </div> <div height="77" width="250" class="headerCaption"> <span class="headerCaptionText">The complete <strong>remote control</strong> solution for your <strong>Mac</strong></span> </div> <a href="http://click.linksynergy.com/fs-bin/stat?id=gpYxc2PNMKc&offerid=146261&type=3&subid=0&tmpid=1826&RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D300265786%2526mt%253D8%2526partnerId%253D30"><img src="img/AvailableontheiPhoneAppStore.png" style="position:absolute;top:40px;right:10px;border:0px;"/></a> </div> </div> <center> <div class="Menu"> <ul> <li><img src="img/menu_cap.png"></li> <li><a class="menuLink" href="#">ROWMOTE</a></li> <li><img src="img/menu0.png" /></li> <li><a class="menuLink" href="#">SUPPORT</a></li> <li><img src="img/menu0.png" /></li> <li><a class="menuLink" href="#">CONTACT</a></li> <li><img src="img/menu0.png" /></li> <li><a class="menuLink" href="#">ABOUT THE DEVELOPER</a></li> <li><img src="img/menu_cap2.png" /></li> </ul> </div> </center> </div> <div class="midSectionWrapper" > <div class="sideBar" style="float:left;"> <div class="sideBarItemSelect"><center>rowmote</center></div> <div class="sideBarItem"><center>features</center></div> <div class="sideBarItem"><center>requirements</center></div> <div class="sideBarItem"><center>reviews</center></div> <div class="sideBarItem"><center>download</center></div> </div> <img class="contentImage" src="img/phone-main.png" /> <div class="Content"> <div class="contentContainer"> <span class="normalText"> <strong>Why should you carry a second device just to control your computer?<p/> Why should you need line of sight to do so?</strong><p/> You love the remote control which came with your Mac - so simple yet elegant, with easy control of Front Row, iTunes, Quicktime, DVD Player, Keynote, and more. You carry your iPhone or iPod Touch wherever you go...<p/> <strong>Enter Rowmote!</strong> </span> </div> </div> </div> </div> <div class="contentSansFooter"> <div class="Footer"> test writing </div> </div> </body> </html> You should also go back and add a fixed width for the ul/li menu elements so the highlighted menu is the same width for each button, not jagged like you have now.The side bar elemnts are not aligned. At first I thought iut was the ul/li menu, but I went back and looked at it, its the class="sideBar" area where the highlighted button does not line up with the ones below it. Quote Link to comment Share on other sites More sharing options...
webjockey Posted May 1, 2009 Author Share Posted May 1, 2009 heh, digip, its meant do that (sideBarItemSelect {position:relative;left:10px;}), <- or something like that. :P, but what you did, whatever it was, it worked :P, I don't quite understand how, but thanks :) saved me a few more hours of pain. Quote Link to comment Share on other sites More sharing options...
digip Posted May 1, 2009 Share Posted May 1, 2009 I did a float left, relative. Absolute positioning with floats would move it on top of other objects and then up the page vertically. Relative allows things in order above it to have their space, and it uses the remaining space, floated left up unto the object above it. I also moved the div in the html file down to the bottom of the page, since its a footer, it would have shown up higher in the page where you had it located. You can adjust the width of the footer to span the width of the page, but I gues syou want it set to 1100px. The part about the side bar I was saying, when you highlight one of th emenu items, the grey box is not aligned with the item above it that is always highlighted, but if thats what you are going for, then ok. :) Quote Link to comment Share on other sites More sharing options...
webjockey Posted May 1, 2009 Author Share Posted May 1, 2009 I think I just deleted the contentSansFooter class from index.html and kept your edits to the Footer class and it all seems to work including flexible width for everything (up til 1100px). Seems to be a classic case of over engineering on my part :P, but its all good now. Evan shall be pleased :D Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.