im trying to get the footer at the bootom when the page length expands and contracts
heres the cssCode:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Xtreme Gaming - Clan Templates Release</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" > <script type="text/javascript" src="lib/roster.js"></script> <script type="text/javascript" src="lib/roster2.js"></script> <link rel="stylesheet" href="theme/extreme/style.css" type="text/css" > <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="theme/extreme/ie6.css" /> <![endif]--> </head> <body> <div id="bg" > <div id="pagewidth" > <table border="0"> <tr><td> <!-- Sitename/Description --> <div id="headtop" > <div id="headleft" > <? ///////////////////////////////////////////////////////////////////////NEWS TICKER BLOCK/////////////////////////////////////////////////////////////////////////////////////////// $tickerfetch = mysql_query("SELECT * FROM configuration WHERE name = 'ticker'"); if(mysql_num_rows($tickerfetch) <1) { mysql_query("insert configuration SET name='ticker', value='0'"); } $ticker = mysql_fetch_row($tickerfetch); echo" <marquee scrollamount='5' scrolldelay='0' onmouseover='this.stop()' onmouseout='this.start()'> <div style='margin-right: 20px; margin-left: 25px; display: inline;'><font size='2' face='verdana' color='white'><b> $ticker[1] </b></font></div> </marquee>" ///////////////////////////////////////////////////////////////////////END OF NEWS TICKER BLOCK/////////////////////////////////////////////////////////////////////////////////////////// ?> </div> <!-- Login Form --> <div id="headright" > <? //Login Block Copyright EliteLadders LTD//////////////////////////////////////////////////////////////////////////////////// if (isset($_COOKIE["user"])){ $member=mysql_query("SELECT * FROM members WHERE id='{$_COOKIE['tid']}' AND password='{$_COOKIE['pass']}'"); $member=mysql_fetch_array($member); echo"<div align='center'><font size='2' face='verdana' color='white'><b>Welcome Back $member[name]! </b></font></div>"; }else{echo"<div align='center'></form><form method='post' action='./login.php'> <input type='text' class='uname' name='login[name]' value='Username' maxlength='15' onClick=\"this.value=''\"> <input type='password' class='pass' name='login[pass]' value='Password' maxlength='20' onClick=\"this.value=''\"> <input type='hidden' name='act' value='setlogin'> <input type='submit' class='login' name='submit' value=''><a href='./register.php'><img src='theme/extreme/images/register.jpg' alt='Register' style='margin-left:12px;' ></a> </form></div>";} //End Login Block//////////////////////////////////////////////////////////////////////////////////////////////////////// ?> </div> </div> <!-- Header --> <div id="header" > </div> <div id="wrapper" style="background-color:#222222;" > <div id="nav"> <!-- Navigation links --> <ul class="horizontal_list"> <li><a href="#" ><span id="home"></span></a></li> <li><a href="#" ><span id="members"></span></a></li> <li><a href="#" ><span id="latest"></span></a></li> <li><a href="#" ><span id="new"></span></a></li> <li><a href="#" ><span id="downloads"></span></a></li> <li><a href="#" ><span id="forums"></span></a></li> <li><a href="#" ><span id="sponsors"></span></a></li> <li><a href="#" ><span id="about"></span></a></li> </ul> </div> <!-- Latest Matches --> <div id="latestmatch" > <div id="latestmatchhead"></div> <div id="win"> <!-- Win/Loss/Tie- Change the div to win/loss/tie for whichever you desire --> <div id="lmimg"><img src="theme/extreme/images/12345.jpg" alt=""> </div> <div id="lmtext"> <!-- Your team/who you vs --> <a href="#">Zach Flynn</a> vs <a href="#">The World</a></div> </div> <div id="loss"> <!-- Win/Loss/Tie- Change the div to win/loss/tie for whichever you desire --> <div id="lmimg"><img src="theme/extreme/images/12345.jpg" alt=""> </div> <div id="lmtext"> <!-- Your team/who you vs --> <a href="#">Zach Flynn</a> vs <a href="#">The World</a></div> </div> <div id="tie"> <!-- Win/Loss/Tie- Change the div to win/loss/tie for whichever you desire --> <div id="lmimg"><img src="theme/extreme/images/12345.jpg" alt=""> </div> <div id="lmtext"> <!-- Your team/who you vs --> <a href="#">Zach Flynn</a> vs <a href="#">The World</a></div> </div> <div id="win"> <!-- Win/Loss/Tie- Change the div to win/loss/tie for whichever you desire --> <div id="lmimg"><img src="theme/extreme/images/12345.jpg" alt=""> </div> <div id="lmtext"> <!-- Your team/who you vs --> <a href="#">Zach Flynn</a> vs <a href="#">The World</a></div> </div> <div id="loss"> <!-- Win/Loss/Tie- Change the div to win/loss/tie for whichever you desire --> <div id="lmimg"><img src="theme/extreme/images/12345.jpg" alt=""> </div> <div id="lmtext"> <!-- Your team/who you vs --> <a href="#">Zach Flynn</a> vs <a href="#">The World</a></div> </div> <div id="tie" style="border-bottom:2px solid #1c1c1c;"> <!-- Win/Loss/Tie- Change the div to win/loss/tie for whichever you desire --> <div id="lmimg"><img src="theme/extreme/images/12345.jpg" alt=""> </div> <div id="lmtext"> <!-- Your team/who you vs --> <a href="#">Zach Flynn</a> vs <a href="#">The World</a></div> </div> </div> <!-- Forum Posts --> <div id="forumposts" > <div id="forumshead"></div> <div id="thebg" > <!-- Pencil Image --> <div id="lmimg"> <img src="theme/extreme/images/pencil.jpg" alt=""> </div> <div id="rptext"> <!-- The link for forum posts --> <a href="#">New template is released for CT!</a><br > <!-- Posted by --> Posted by <a href="#">Zach Flynn</a> </div> </div> <div id="thebg" > <!-- Pencil Image --> <div id="lmimg"> <img src="theme/extreme/images/pencil.jpg" alt=""> </div> <div id="rptext"> <!-- The link for forum posts --> <a href="#">New template is released for CT!</a><br > <!-- Posted by --> Posted by <a href="#">Zach Flynn</a> </div> </div> <div id="thebg" > <!-- Pencil Image --> <div id="lmimg"> <img src="theme/extreme/images/pencil.jpg" alt=""> </div> <div id="rptext"> <!-- The link for forum posts --> <a href="#">New template is released for CT!</a><br > <!-- Posted by --> Posted by <a href="#">Zach Flynn</a> </div> </div> <div id="thebg" > <!-- Pencil Image --> <div id="lmimg"> <img src="theme/extreme/images/pencil.jpg" alt=""> </div> <div id="rptext"> <!-- The link for forum posts --> <a href="#">New template is released for CT!</a><br > <!-- Posted by --> Posted by <a href="#">Zach Flynn</a> </div> </div> <div id="thebg" > <!-- Pencil Image --> <div id="lmimg"> <img src="theme/extreme/images/pencil.jpg" alt=""> </div> <div id="rptext"> <!-- The link for forum posts --> <a href="#">New template is released for CT!</a><br > <!-- Posted by --> Posted by <a href="#">Zach Flynn</a> </div> </div> <div id="thebg" > <!-- Pencil Image --> <div id="lmimg"> <img src="theme/extreme/images/pencil.jpg" alt=""> </div> <div id="rptext"> <!-- The link for forum posts --> <a href="#">New template is released for CT!</a><br > <!-- Posted by --> Posted by <a href="#">Zach Flynn</a> </div> </div> </div> <div id="meettheteam" > <div id="rosterhead"></div> <div id="rosterbg" > <div style="height:196px;"> </div></div> <!-- Main Content --> <div id="maincol" > <div id="newstop"> </div> <div id="news"> <div id="newstext"> <? //Output Content echo $out[news].$out[body]; ?> </div> </div> </div> </div> <div id="newsbot"> </div> </DIV> <!-- Left Column --> <div id="leftcol" > <div id="leftcol1"> <!-- Featured Sponsors --> <a href="http://clantemplates.com/"><img src="theme/extreme/images/s1.jpg" alt=""></a> <a href="http://zachflynn.com/"><img src="theme/extreme/images/s2.jpg" alt=""></a> </div> <div id="leftcol2"> <!-- Other Sponsors --> <a href="http://clantemplates.com/"><img src="theme/extreme/images/s1.jpg" alt=""></a> <a href="http://zachflynn.com/"><img src="theme/extreme/images/s2.jpg" alt=""></a> </div> </div> </td></tr> <tr><td> <!-- Footer --> <div id="bottom"> <div id="footer" align="left"> <? //Begin Theme Selector echo"<table width='800'><tr><td width='25%'><form><select class='button' onchange='if(options[selectedIndex].value){location = options[selectedIndex].value}'> <optgroup label='Style Chooser'>\n"; $style=mysql_query("SELECT id,name,dir FROM styles WHERE active='1'"); while(list($id,$name,$dir)=mysql_fetch_row($style)){ if($_COOKIE['style']==$id){$id2="SELECTED";}else{$id2="";} echo"<option value='$config[scripturl]/index.php?action=setstyle&style=$id' $id2>$name</option>\n"; } echo"</select>"; //End Theme Selector ?> </div> </div> </tr></td></table> </div> </div> </body> </html>
Code:html, body { margin:0; padding:0; text-align:center; background-color:#222222; background-image:url('images/mainbg.jpg'); font-family:arial; border:0px; } *{ margin:0px; padding:0px; } img { border:0px; } a:link {color: #66880d; text-decoration:none; border:0px; } a:active {color: #66880d; text-decoration: none; border:0px; } a:visited {color: #66880d; text-decoration: none; border:0px; } a:hover {color: #8cb423; text-decoration: underline; border:0px; } #latestmatch { width:308px; height:270px; float:left; margin-left:1px; background-image:url('images/thebg.jpg'); margin-top:2px; margin-bottom:2px; padding-left:2px; } #meettheteam { width:309px; height:270px; float:left; margin-left:1px; background-image:url('images/thebg.jpg'); margin-top:2px; margin-bottom:2px; padding-left:1px; } #forumposts { width:308px; height:270px; float:left; margin-left:1px; background-image:url('images/thebg.jpg'); margin-top:2px; margin-bottom:2px; margin-left:1px; padding-left:2px; } #rosterData { padding-top:0px; padding-left:10px; color:#77a401; font-variant:bold; } #rosterbg img { border:1px solid #858585; } #rosterbg img:hover { border:1px solid #77a401; } #rosterimg { padding-top:12px; padding-left:40px; float:left; } #rosterimg2 { padding-top:12px; padding-right:40px; float:right; } #latestmatchhead { width:301px; height:27px; background-image:url('images/latestmatches.jpg'); margin-left:4px; margin-top:7px; background-repeat:no-repeat; } #forumshead { width:301px; height:27px; background-image:url('images/recentposts.jpg'); background-repeat:no-repeat; margin-top:7px; margin-left:4px; } #rosterhead { width:301px; height:27px; background-image:url('images/meettheteam.jpg'); margin-left:4px; margin-top:7px; } #thebg { width:287px; height:38px; background-image:url('images/lmbg.jpg'); margin-left:4px; padding-left:10px; color:#545455; font-size:9pt; } #loss { width:287px; height:38px; background-image:url('images/loss.jpg'); margin-left:4px; padding-left:10px; color:#545455; font-size:9pt; } #tie { width:287px; height:38px; background-image:url('images/tie.jpg'); margin-left:4px; padding-left:10px; color:#545455; font-size:9pt; } #win { width:287px; height:38px; background-image:url('images/win.jpg'); margin-left:4px; padding-left:10px; color:#545455; font-size:9pt; } .lmclass { color:#78a501; text-decoration:underline; } #lmimg { float:left; margin-right:10px; margin-top:7px; } #lmtext { padding-top:12px; float:left; color:#858684; } #lmscore { float:right; margin-right:0px; padding-top:0px; height:37px; padding-top:1px; } #lmimg { float:left; margin-right:10px; margin-top:7px; } #lmtext { padding-top:12px; float:left; color:#858684; font-size:9pt; } #lmtext a:link {color: #78a501; text-decoration: underline; } #lmtext a:active {color: #66880d; text-decoration: none; } #lmtext a:visited {color: #66880d; text-decoration: none; } #lmtext a:hover {color: #9dcf18; text-decoration: underline; } #lmscore { float:right; margin-right:0px; padding-top:0px; height:37px; padding-top:1px; } #rptext { padding-top:6px; float:left; color:#858684; font-size:8pt; } #rptext a:link {color: #78a501; text-decoration: underline; } #rptext a:active {color: #66880d; text-decoration: none; } #rptext a:visited {color: #66880d; text-decoration: none; } #rptext a:hover {color: #9dcf18; text-decoration: underline; } #thebgbot { width:288px; height:36px; background-image:url('images/lmbg.jpg'); margin-left:4px; padding-left:10px; color:#545455; font-size:9pt; border-right:2px solid #515151; border-left:1px solid #515151; border-bottom:2px solid #515151; } #rosterbg { margin-left:4px; width:298px; height:228px; color:#545455; background-image:url('images/bg3.jpg'); padding-left:3px; } #pagewidth { width:936px; text-align:left; margin-left:auto; margin-right:auto; background-image:url('images/bg.jpg'); } /*Border dont change this*/ #bg { width:1024px; margin-left:auto; margin-right:auto; background-image:url('images/bg.jpg'); } /*Navigation*/ #headtop { position:relative; height:48px; background-image:url('images/headtop.jpg'); width:100%; } #nav { background-image:url('images/navbg.jpg'); height:43px; width:890px; padding-right:23px; padding-left:23px; } #headleft { width:374px; float:left; position:relative; font-variant:small-caps; padding-top:8px; padding-left:19px; color:#fff; font-size:10pt; } #headleft a:link {color: #66880d; text-decoration:none; border:0px; } #headleft a:active {color: #66880d; text-decoration: none; border:0px; } #headleft a:visited {color: #66880d; text-decoration: none; border:0px; } #headleft a:hover {color: #8cb423; text-decoration: underline; border:0px; } ul{ margin: 0 auto; padding: 0; } ul.horizontal_list li{ text-align: left; float: left; list-style: none } #home { display: block; width: 107px; height: 23px; background: url('images/nav/home.jpg') no-repeat 0 0; width:111px; height:42px; border:0px; } #home:hover { background: url('images/nav/homero.jpg') no-repeat 0 0; width:111px; height:42px; border:0px;} #home span { display: none; border:0px; } #members { display: block; width: 107px; height: 23px; background: url('images/nav/teammembers.jpg') no-repeat 0 0; width:111px; height:42px; border:0px; } #members:hover { background: url('images/nav/teammembersro.jpg') no-repeat 0 0; width:111px; height:42px; border:0px;} #members span { display: none; border:0px; } #latest { display: block; width: 107px; height: 23px; background: url('images/nav/latestmatches.jpg') no-repeat 0 0; width:111px; height:42px; border:0px; } #latest:hover { background: url('images/nav/latestmatchesro.jpg') no-repeat 0 0; width:111px; height:42px; border:0px;} #latest span { display: none; border:0px; } #new { display: block; width: 107px; height: 23px; background: url('images/nav/newmatches.jpg') no-repeat 0 0; width:111px; height:42px; border:0px; } #new:hover { background: url('images/nav/newmatchesro.jpg') no-repeat 0 0; width:111px; height:42px; border:0px;} #new span { display: none; border:0px; } #downloads { display: block; width: 107px; height: 23px; background: url('images/nav/downloads.jpg') no-repeat 0 0; width:111px; height:42px; border:0px; } #downloads:hover { background: url('images/nav/downloadsro.jpg') no-repeat 0 0; width:111px; height:42px; border:0px;} #downloads span { display: none; border:0px; } #forums { display: block; width: 107px; height: 23px; background: url('images/nav/forums.jpg') no-repeat 0 0; width:111px; height:42px; border:0px; } #forums:hover { background: url('images/nav/forumsro.jpg') no-repeat 0 0; width:111px; height:42px; border:0px;} #forums span { display: none; border:0px; } #sponsors { display: block; width: 107px; height: 23px; background: url('images/nav/sponsors.jpg') no-repeat 0 0; width:111px; height:42px; border:0px; } #sponsors:hover { background: url('images/nav/sponsorsro.jpg') no-repeat 0 0; width:111px; height:42px; border:0px;} #sponsers span { display: none; border:0px; } #about { display: block; width: 107px; height: 23px; background: url('images/nav/about.jpg') no-repeat 0 0; width:111px; height:42px; border:0px; } #about:hover{ background: url('images/nav/aboutro.jpg') no-repeat 0 0; width:111px; height:42px; border:0px;} #about span{ display: none; border:0px; } /*NAV END*/ /*Forms*/ #headright{ float: right; display:inline; position: relative; width:533px; padding-top:10px; } input { float:top; } .uname { font-size: 9pt; background-image:url('images/uname.jpg'); background-repeat:no-repeat; width:137px; height:19px; border:0px; padding-left:35px; padding-top:3px; float:left; } .login { font-size: 9pt; background-image:url('images/login.jpg'); background-repeat:no-repeat; width:57px; height:20px; border:0px; float:left; margin-left:11px; } .pass { font-size: 9pt; background-image:url('images/pword.jpg'); background-repeat:no-repeat; width:137px; height:19px; border:0px; padding-left:35px; padding-top:3px; float:left; margin-left:15px; } .pass { font-size: 10px; background-color: #CCCCCC; border: 1px solid #666666; } /*Header*/ #header{ position:relative; height:160px; background-image:url('images/headimage.jpg'); width:100%; } /*Left Column*/ #leftcol{ width:314px; float:left; position:relative; } #leftcol1{ width:299px; height:255px; float:left; background-image:url('images/featuredsponsors.jpg'); padding-top:39px; padding-left:15px; margin-bottom:2px; margin-left:1px; } #leftcol2{ width:299px; height:255px; float:left; background-image:url('images/othersponsors.jpg'); padding-top:39px; padding-left:15px; } /*Main Column/News*/ #maincol{ float: right; display:inline; position: relative; width:619px; margin-right:1px; } #newstop { width:619px; height:6px; background-image:url('images/newstop.jpg'); background-repeat:no-repeat; } #newsbot { width:619px; height:7px; background-image:url('images/newsbot.jpg'); background-repeat:no-repeat; margin-bottom:1px; } #news { width:612px; padding-left:7px; padding-top:1px; background-image:url('images/abg.jpg'); font-weight: bold; } #newstext { width:597px; padding-left:7px; padding-top:5px; color:#858684; font-size:9pt; font-weight: bold; } #conhead{ width:605px; background-image:url('images/conhead.jpg'); color:#ffffff; height:22px; text-align:center; font-size:9pt; font-weight: bold; padding-top:7px; } #confoot{ width:594px; background-image:url('images/confoot.jpg'); color:#858684; height:20px; color:#9a9a9a; font-size:10pt; margin-left:1px; padding-top:9px; font-weight: bold; font-size: 9pt; margin-top:5px; padding-left:5px; padding-right:5px; } #confoot a:link {color: #66880d; text-decoration:none; border:0px; } #confoot a:active {color: #66880d; text-decoration: none; border:0px; } #confoot a:visited {color: #66880d; text-decoration: none; border:0px; } #confoot a:hover {color: #8cb423; text-decoration: underline; border:0px; } /*Footer*/ #footer{ background-image:url('images/footer.jpg'); clear:both; font-weight:bold; font-size:9pt; color:#fff; padding-top:17px; padding-left:9px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix{height: 1%;} .clearfix{display: block;} /* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} #twocols, #maincol{width:100%; float:none;} }





Reply With Quote







