FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Problem placing footer

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


ncwdavid
...

Last edited by ncwdavid on Mon Oct 08, 2007 3:25 pm; edited 2 times in total
Azmo
do you want your footer to be fixed at the bottom of the page? or just at the bottom of your site?

this code force the footer to be fixed at the bottom..

Code:
#content {
   position:absolute;
   top:0px;
   left:235px;
   z-index:1;
   overflow:auto;
   height:100%;
   width: 712px;
        background:transparent url('') repeat-y left top;
}

#footer{
   position:absolute;
   bottom:0;
   left:261px;
   z-index:99;
   width:662px;
   height:40px;
   background:url('images/foot.gif');
}
@media screen {
body>div#footer {
   position:fixed;
}
}


would like to see both ur html and your css.. and #footer don't work with a td, if you didn't know that.. anyways.. something you can test and always should be at your footer (if it's true) is clear:both; (in your css) clears both sides so nothing can be besides it, just above or under..

if it's placed right below your header it's because you placed it there in your html.. please post all your code for this kind of problem, it's very hard to guess how you coded it..
ncwdavid
Its right near the bottom of my code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>

<div id="container">
<table width="780" height="178" cellpadding="0" cellspacing="0" align="center" style="border: 1px solid #000000;">
<tr>
<td width="178" height="178" bgcolor="#00a8ff">
<center><a href="#"><img src="images/Random.gif" width="135" height="95" alt="Random Image" class="lightborder"></a></center>
<center>
<table align="center" class="lightborder" width="150" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="70" bgcolor="#333333" class="white"><p align="left">Comments</p></td>
<td width="10" bgcolor="#333333" class="white"><p align="center">>>>>></p></td>
<td width="70" bgcolor="#333333" class="orange"><p align="right" style="padding-right: 2px;">5</p></td>
</tr>
<tr>
<td width="70" bgcolor="#333333" class="white"><p align="left">Rating</p></td>
<td width="10" bgcolor="#333333" class="white"><p align="center">>>>>></p></td>
<td width="70" bgcolor="#333333" class="orange"><p align="right" style="padding-right: 2px;">4.8/5.00</p></td>
</tr>

<tr>
<td width="70" bgcolor="#000000" class="white"><p align="left">Views</p></td>
<td width="10" bgcolor="#000000" class="white"><p align="center">>>>>></p></td>
<td width="70" bgcolor="#000000" class="orange"><p align="right" style="padding-right: 2px;">87</p></td>
</tr>
<tr>
<td width="70" bgcolor="#000000" class="white"><p align="left">Uploaded</p></td>
<td width="10" bgcolor="#000000" class="white"><p align="center">>>>>></p></td>
<td width="70" bgcolor="#000000" class="orange"><p align="right" style="padding-right: 2px;">07 June</p></td>
</tr>
</table>
</center>
</td><!-- End of LEFT RANDOM side -->

<td width="424" height="178" bgcolor="#ff8833">
<center><a href=""><img src="images/header.gif" alt="Header" width="382" height="79"></a></center>
<center>
<table align="center" width="405" height="80" bgcolor="#33b9ff" cellpadding="0" cellspacing="0" class="lightborder">
<tr>
<td width="100"><p align="left"><img src="images/party_animal.gif" width="96" height="76" alt="Party Animal"></p></td>
<td width="305"><p align="left">TEST!</p></td>
</tr>
</table>
</center>
</td><!-- End of HEADER side -->

<td width="178" height="178" bgcolor="#00a8ff">
<center><a href="#"><img src="images/Random.gif" width="135" height="95" alt="Random Image" class="lightborder"></a></center>
<center>
<table align="center" class="lightborder" width="150" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="70" bgcolor="#333333" class="white"><p align="left">Comments</p></td>
<td width="10" bgcolor="#333333" class="white"><p align="center">>>>>></p></td>
<td width="70" bgcolor="#333333" class="orange"><p align="right" style="padding-right: 2px;">5</p></td>
</tr>
<tr>
<td width="70" bgcolor="#333333" class="white"><p align="left">Rating</p></td>
<td width="10" bgcolor="#333333" class="white"><p align="center">>>>>></p></td>
<td width="70" bgcolor="#333333" class="orange"><p align="right" style="padding-right: 2px;">4.8/5.00</p></td>
</tr>

<tr>
<td width="70" bgcolor="#000000" class="white"><p align="left">Views</p></td>
<td width="10" bgcolor="#000000" class="white"><p align="center">>>>>></p></td>
<td width="70" bgcolor="#000000" class="orange"><p align="right" style="padding-right: 2px;">87</p></td>
</tr>
<tr>
<td width="70" bgcolor="#000000" class="white"><p align="left">Uploaded</p></td>
<td width="10" bgcolor="#000000" class="white"><p align="center">>>>>></p></td>
<td width="70" bgcolor="#000000" class="orange"><p align="right" style="padding-right: 2px;">07 June</p></td>
</tr>
</table>
</center>
</td>
</tr>
</table><!-- End of TOP HALF -->


<table width="780" height="18" cellpadding="0" cellspacing="0" border="0" style="border-right: 1px solid #000000; border-left: 1px solid #000000;">
<tr>
<td align="left" class="linker"><p class="white">My Site<span class="blue">></span> <a href="">Home</a></p></td>
</tr>
</table>

<div id="left">
<div class="greyborder">
<div style="margin-top: 1px;">
<table align="center" cellpadding="0" cellspacing="0" width="180" height="34">
<tr>
<td width="12" height="34" background="images/left_design.gif"></td>
<td width="156" height="34" class="black_bg"><p align="center" class="big_white"><span class="big_blue">N</span>avigation</p></td>
<td width="12" height="34" background="images/right_design.gif"></td>
</tr>
</table>
</div>

<center>
<div id="button">
<ul>
   <li><a href=""><p align="left">Home</p></a></li>
   <li><a href=""><p align="left">Register</p></a></li>
   <li><a href="forums/"><p align="left">Forums</p></a></li>
   <li><a href="members/"><p align="left">Members</p></a></li>
   <li><a href="pictures.php"><p align="left">Pictures</p></a></li>
   <li><a href=""><p align="left">Contact</p></a></li>
   <li><a href="about.php"><p align="left">About</p></a></li>
</ul>
</div>
</center>

<center>
<table height="8" width="180" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td width="180" height="8" bgcolor="#ff8833"></td>
</tr>
</table>
</center>

<div style="padding-bottom: 2px;"></div>
</div><!-- End of NAVIGATION -->

<div style="padding: 1px;"></div>

<div class="greyborder">
<div style="margin-top: 1px;">
<table align="center" cellpadding="0" cellspacing="0" width="180" height="34">
<tr>
<td width="12" height="34" background="images/left_design.gif"></td>
<td width="156" height="34" class="black_bg"><p align="center" class="big_white"><span class="big_blue">L</span>ogin</p></td>
<td width="12" height="34" background="images/right_design.gif"></td>
</tr>
</table>
<p>Username:</p>
<input type="text" name="username">
<p>Password:</p>
<input type="password" name="password">
<p><input type="submit" value="Login"></p>
<p align="center"><a href="#">Register</a> | <a href="#">Forgot Password</a></p>

<div style="padding-bottom: 4px;"></div>

<table align="center" height="8" width="180" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="180" height="8" bgcolor="#ff8833"></td>
</tr>
</table>

<div style="padding-bottom: 2px;"></div>

</div>

</div>

</div><!--End of LEFT side-->

<div id="right">
<div class="greyborder">
<div style="margin-top: 1px;">
<table align="center" cellpadding="0" cellspacing="0" width="572" height="34">
<tr>
<td width="12" height="34" background="images/left_design.gif"></td>
<td width="548" height="34" class="black_bg"><p align="center" class="big_white"><span class="big_blue">A</span>nnouncements</p></td>
<td width="12" height="34" background="images/right_design.gif"></td>
</tr>
</table>
</div>
<div style="width: 572px;">
<div style="background: #0a91d6; width: 572px;"><span class="white">Posted by: <a href="#">David</a> - 06 June 2007</span></div>
<p>The red fox jumped over the lazy dog. The red fox jumped over the lazy dog. The red fox jumped over the lazy dog. The red fox jumped over the lazy dog. The red fox jumped over the lazy dog. The red fox jumped over the lazy dog.</p>
<br>
<p class="lightblack">David</p>
<br>
<div style="background: #0a91d6; width: 572px;"><span class="white">Posted by: <a href="#">David</a> - 03 June 2007</span></div>
<p>The red fox jumped over the lazy dog. The red fox jumped over the lazy dog. The red fox jumped over the lazy dog. The red fox jumped over the lazy dog. The red fox jumped over the lazy dog. The red fox jumped over the lazy dog.</p>
<br>
<p class="lightblack">David</p>
<br>
<table height="8" width="572" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="572" height="8" bgcolor="#ff8833"></td>
</tr>
</table>
</div>
</div><!--End of ANNOUNCEMENTS-->

<div style="padding: 1px;"></div>

<div class="greyborder">
<div style="margin-top: 1px;">
<table align="center" cellpadding="0" cellspacing="0" width="572" height="34">
<tr>
<td width="12" height="34" background="images/left_design.gif"></td>
<td width="548" height="34" class="black_bg"><p align="center" class="big_white"><span class="big_blue">S</span>hout <span class="big_blue">B</span>ox</p></td>
<td width="12" height="34" background="images/right_design.gif"></td>
</tr>
</table>
</div>
<center>
<table align="center" width="572" cellpadding="0" cellspacing="0" border="0" height="150" class="shoutbox">
<tr valign="top">
<td width="50%" height="100%">
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="10">Name:</td><td><input type="text" name="name"></td>
</tr>
<tr>
<td width="10">Shout:<br><a href="#">BBCode</a></td><td><textarea cols="16" rows="5"></textarea></td>
</tr>
</table>
</td>
<td width="50%" height="100%" style="border-left: 1px solid #508fc4;">
<p>Shout box comments here!</p>
</td>
</tr>
</table>
</center>

<div style="padding-bottom: 4px;"></div>
<center>
<table height="8" width="572" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td width="572" height="8" bgcolor="#ff8833"></td>
</tr>
</table>
</center>

<div style="padding-bottom: 2px;"></div>
</div>



</div><!--End of RIGHT side-->

<div id="footer">
<p>Footer!</p>
</div>

</div>
</body>
</html>


and the CSS:
Code:
/* CSS Document */

*{
margin: 1px;
}
body{
font-family: Verdana, New Times Roman, Arial;
font-size: 11px;
}
.linker a:active{
color: #FFFFFF;
}
.linker a:link{
color: #FFFFFF;
}
.linker a:visited{
color: #FFFFFF;
}

a:active{
color: #000000;
}
a:link{
color: #000000;
}
a:visited{
color: #000000;
}

p{padding-left: 2px;}
.lightborder{ border: 1px solid #dfebf1;}
.white{ color: #FFFFFF; font-size: 10px;}
.orange{color: #ff8833; font-size: 10px;}
.blue{color: #007bbb; font-size: 10px;}
.linker{background: url('images/black_bg.gif');}
.black_bg{background: url('images/big_black_bg.gif'); background-repeat: repeat-x;}
.greyborder{ border: 1px solid #9b9b9b;}
.big_white{color: #FFFFFF; font-size: 12pt;}
.big_blue{color: #00a8ff; font-size: 12pt;}
.lightblack{ color: #4c4c4c;}
.shoutbox{
background: url('images/shoutbox_bg.gif');
height: 150px;
width: 572px;
background-repeat: repeat-x;
}
img{border: none;}

#container{
margin-left: auto;
margin-right: auto;
width: 780px;
}
#left{
width: 188px;
float: left;
}

#right{
float: right;
width: 580px;
}

#footer{
width: 780px;
height: 60px;
margin-left: auto;
margin-right: auto;
background: #00a8ff;
}
/*Navigation*/
#button {
   width: 182px;
   padding: 0 0 1em 0;
   margin-bottom: 1em;
   font-family: Verdana, New Times Roman;
   background-color: #90bade;
   color: #000000;
   }
   
#button ul {
      list-style: none;
      margin: 0;
      padding: 0;
      border: none;
      }
      
   #button li {
      border-bottom: 1px solid #90bade;
      margin: 0;
      }
#button li a {
      display: block;
      padding: 5px 5px 5px 0.5em;
      border-left: 10px solid #1958b7;
      border-right: 10px solid #508fc4;
      background-color: #2175bc;
      color: #000000;
      text-decoration: none;
      width: 100%;
      }

   html>body #button li a {
      width: auto;
      }

   #button li a:hover {
      border-left: 10px solid #c37c0d;
      border-right: 10px solid #d28e42;
      background-color: #ff6a00;
      color: #FFFFFF;
      padding-left: 15px;
      }


Any help would be appreciated. thanks.
Azmo
you have mixed alot of tables and divs, is there any chance you can link your site so I see the problem? at work now so can't copy all your code.

But try to write clear:both; in your foot div.. sometimes that's the problem.. anyways, post a link to your site so I can see what's happening and what errors to look for. Smile
ncwdavid
Azmo wrote:
you have mixed alot of tables and divs, is there any chance you can link your site so I see the problem? at work now so can't copy all your code.

But try to write clear:both; in your foot div.. sometimes that's the problem.. anyways, post a link to your site so I can see what's happening and what errors to look for. Smile


Thanks for that it works! I just added the "clear:both" to the footer thing and it works now! What does that clear:both do?
Azmo
clear:both; clears both sides of the div, you can also have clear:right; or clear:left; something you always should have on your footer since it sometimes wanna place itself where it don't belong Smile anyways, glad you got it working as you wanted to Smile post a link when you are done so we can see the result Smile
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.