tdktank59 0 Report post Posted November 21, 2007 Allright so im working on a page and i need ot to always extent to the bottom of the page go figure lol....However i cant figure out how to do this and have it work...either css or w/e else can be used to do it i just cant get it to flaot or sit at the bottomheres what ive got so farhttp://woodlawnwt.com/tdc/duffield-collection.htmlworks in dreamwearver ( i use it for the color code and the ftp stuff... not for the wysiwig stuff lol...) but i cant get it to show in either ff or ie[hr=noshade] [/hr]http://ryanfait.com/sticky-footer/solution is there.... lol Share this post Link to post Share on other sites
Saint_Michael 3 Report post Posted November 21, 2007 easy fix, and I am reading your post right you want the content box between the header and the footer to extend you can do it one of two ways:First one is fixed heighted in which I just add px, as you can see from here thats what I did, however for you dreamweaver fans it is line 58 and for this post I just marked with <--- LINE 58. <table style="border-left: 1px solid rgb(0, 0, 0); border-right: 1px solid rgb(0, 0, 0);" align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="798"> <tbody><tr> <td height="99"><img src="duffield-collection_files/duffield-collection_02.png" alt="" height="99" width="798"></td> </tr> <tr> <td style="border-top: 1px solid rgb(0, 0, 0); border-bottom: 1px solid rgb(0, 0, 0);" bgcolor="#614c1e" height="25"><table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr> <td style="color: rgb(255, 255, 255); padding-left: 10px;">Home | Paintings | Contact Us</td> <td align="right"><table border="0" cellpadding="0" cellspacing="0"> <tbody><tr> <td style="padding-left: 5px; padding-right: 5px; color: rgb(255, 255, 255);">Find an Artist:</td> <td><input name="search" value="" type="text" width="150"></td> <td style="padding-left: 5px; padding-right: 10px; color: rgb(255, 255, 255);">ť Search</td> </tr> </tbody></table> </td> </tr> </tbody></table> </td> </tr> <tr> <td style="padding: 18px; height: 700px;" bgcolor="#ffffff" valign="top"> <----LINE 58 <table style="border: 1px solid rgb(224, 193, 193);" bgcolor="#f4e9e9" border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr> <td width="30%"> </td> <td width="70%"> </td> </tr> </tbody></table> </td> </tr> <tr> <td align="center" background="duffield-collection_files/duffield-collection_05.png" bgcolor="#ffffff" height="40" valign="middle">Copyright Š 2007 The Duffield Collection</td> </tr></tbody></table></body></html> The other version which I think is the one you want deals with Percentages and from the looks of it this is the one you want.<table style="border-left: 1px solid rgb(0, 0, 0); border-right: 1px solid rgb(0, 0, 0);" align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="798"> <tbody><tr> <td height="99"><img src="duffield-collection_files/duffield-collection_02.png" alt="" height="99" width="798"></td> </tr> <tr> <td style="border-top: 1px solid rgb(0, 0, 0); border-bottom: 1px solid rgb(0, 0, 0);" bgcolor="#614c1e" height="25"><table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr> <td style="color: rgb(255, 255, 255); padding-left: 10px;">Home | Paintings | Contact Us</td> <td align="right"><table border="0" cellpadding="0" cellspacing="0"> <tbody><tr> <td style="padding-left: 5px; padding-right: 5px; color: rgb(255, 255, 255);">Find an Artist:</td> <td><input name="search" value="" type="text" width="150"></td> <td style="padding-left: 5px; padding-right: 10px; color: rgb(255, 255, 255);">ť Search</td> </tr> </tbody></table> </td> </tr> </tbody></table> </td> </tr> <tr> <td style="padding: 18px; height: 100%;" bgcolor="#ffffff" valign="top"> <table style="border: 1px solid rgb(224, 193, 193);" bgcolor="#f4e9e9" border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr> <td width="30%" ><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></td> <td width="70%"> </td> </tr> </tbody></table> </td> </tr> <tr> <td align="center" background="duffield-collection_files/duffield-collection_05.png" bgcolor="#ffffff" height="40" valign="middle">Copyright Š 2007 The Duffield Collection</td> </tr></tbody></table></body></html> Share this post Link to post Share on other sites
tdktank59 0 Report post Posted November 21, 2007 (edited) I aslo failed to mention that i want it to be for any size window not just mine or yours... so its gotta be css i guess or javascript... but meh i dont know...actually that doesnt work lol... check ur <br />'s in the second one...what im trying to do is have the footer litteraly float at the bottom of the page...with the white extending down the little pink box is worthless...heres kinda what im talking about but when it goes farther than the page it screws up...as show here...http://forums.xisto.com/no_longer_exists/ Edited November 21, 2007 by tdktank59 (see edit history) Share this post Link to post Share on other sites
sonesay 7 Report post Posted November 21, 2007 very common problem with working with layouts in CSS. I've used similar layouts in the past and when you start adding content into it the layout falls apart. I dont know whats causing it since I dont fully understand how to use CSS. Theres also the issue with certain broswers failing to display it correctly when others do. Share this post Link to post Share on other sites
tdktank59 0 Report post Posted November 21, 2007 (edited) http://woodlawnwt.com/tdc/duffield-collection.html seems to wokr now bult it off of the dudes code instead of usiong my own lol... guess it fixed it... feel free to copy w/e u want and id do it soon casue im taking it down shortly and replacing it with my actual code... actually never mind heres what ive got and it seems to work... pretty much eveything is copied form that page i just changed the stuff... so if an admin wants to remove the pints for this post w/e but i say at elast leave the content incase that ryan dudes site goes down... so all the codes here... page.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/; xml:lang="en"><head> <title>The Duffield Collection</title> <link rel="stylesheet" type="text/css" media="screen" href="layout.css" /> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /></head><body><div class="wrapper"> <div class="header"></div> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr><td bgcolor="#614c1e"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-top: solid 1px #000000; border-bottom: solid 1px #000000;"> <tr> <td style="color:#FFFFFF; padding-left:10px;"> Home | Paintings | Contact Us </td><td align="right"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td style="padding-left:5px; padding-right:5px; color:#FFFFFF;"> Find an Artist: </td><td> <input type="text" width="150" name="search" value="" /> </td><td style="padding-left:5px; padding-right:10px; color:#FFFFFF;"> » Search </td></tr> </table> </td></tr> </table> </td></tr> <tr><td style="padding: 18px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f4e9e9" style="border:solid 1px #e0c1c1;"> <tr> <td width="30%"> </td> <td width="70%"> </td> </tr> </table> </td></tr> </table> <div class="push"></div></div><div class="footer"> Copyright © 2007 The Duffield Collection :: All rights reserved.<br /> Created by Woodlawn Web Technologies</div></body></html> layout.css * { margin: 0;}html, body { height: 100%;}.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -40px; /* the bottom margin is the negative value of the footer's height */}.footer, .push { height: 40px; /* .push must be the same height as .footer */} style.css body { text-align: center;}.wrapper { width: 798px; text-align: left; border-right: solid 1px #000000; border-left: solid 1px #000000;}.header { width: 798px; height: 99px; text-indent: -9999em; background: #fff url(images/duffield-collection_02.png) no-repeat;}img { float: right;}h2 { padding: 15px 0; color: #1b73d6; font: 1.3em verdana,sans-serif;}p { padding: 0 0 15px; color: #194379; font: 1em/1.3em arial,sans-serif;}.footer { width: 798px; margin: 0 auto; background: #a3b2c6 url(images/duffield-collection_05.png) no-repeat 0 0;}a { color: #194379;}a:hover { text-decoration: none;} Edited November 21, 2007 by tdktank59 (see edit history) Share this post Link to post Share on other sites
Saint_Michael 3 Report post Posted November 21, 2007 (edited) Well it was your coding of the CSS file that was messing it up, you had an extra height:100%; that did not need to be in there. I had to rearrange your css code to figure it out, and so I present you your footer solution. Also some of your divs where missed places thus the reason your footer was all up in the content. CSS */* { margin: 0;}html, body { height: 100%;}body {height:100%;background-color:#e0dac1;margin-bottom:0;margin-top:0;}body,td,th {color:#000;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;}a:link,a:visited,a:active {color:#666;text-decoration:none;}a:hover {color:#000;text-decoration:none;}.wrapper {background-color:#FFF;border-left:solid 1px #000;border-right:solid 1px #000;margin:0 auto 40px;position:relative;width:798px;}.banner {background-image:url(images/duffield-collection_02.png);background-repeat:no-repeat;height:99px;width:798px;}.nav {clear:right;float:left;height:25px;text-align:left;vertical-align:middle;}.nav_container {background-color:#614c1e;border-bottom:solid 1px #000;border-top:solid 1px #000;height:25px;width:798px;}.search {clear:right;float:right;height:25px;text-align:center;vertical-align:middle;}.container {background-color:#FFF;width:798px;}.content {padding:18px;width:762px;}.footer, .push { height: 40px; /* .push must be the same height as .footer */}.footer {background-color:#cbc8ae;background-image:url(images/duffield-collection_05.png);background-position:center bottom;background-repeat:no-repeat;margin-bottom:0;margin-left:auto;margin-right:auto;position:relative;text-align:center;vertical-align:middle;width:798px;} 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/ Duffield Collection</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link href="test_files/style.css" rel="stylesheet" type="text/css" /></head><body><div class="wrapper"> <div class="container"> <div class="banner"></div> <div class="nav_container"> <div class="nav">home artuists contact us</div> <div class="search"><form action="search.php" method="post"><input name="search" value="" type="text" width="150" /> </form></div> </div> <div class="content"></div> </div> <div class="push"><div class="footer"> Copyright ďż˝ 2007 The Duffield Collection :: All rights reserved.<br /> Created by: Woodlawn Web Technologies</div></div></div></body></html> So now it should work like the footer sticky was designed for. EDIT: Ok which design are you going with tables or tabless?? Edited November 20, 2016 by OpaQue (see edit history) Share this post Link to post Share on other sites
tdktank59 0 Report post Posted November 21, 2007 (edited) allright new update...got most of it working however i cant get the background to extend to the bottom...i have a quick fix method but i really dont want to use it since i requires another image loading... (for the background)http://forums.xisto.com/no_longer_exists/if u need any of the php code ill post it....otherwise all the html is visible\allright somehow fixed it removed the height: 100%; from the wrapper css in layout Edited November 21, 2007 by tdktank59 (see edit history) Share this post Link to post Share on other sites
