[xHTML] Footer Problems

loserWILL · 09-01-2008, 09:58 PM

I've basically finished coding a layout for Adam (Aflux), when i've hit one error.

If you look (http://69.17.167.132/ad/) you'll see the footer is behind the navigation and the content. I'ver looked over the code, but i can't find the problem. If you don't see where it is, look at this picture then look on the url I said:

If you could fix the code, thank you so much. +rep, the source code is:

HTML Code:

<!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>fun.</title>

<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
}

body a:linkr {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
text-decoration: none;
}

body a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
font-weight: bold;
text-decoration: none;
}

body a:visisted {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
text-decoration: none;
}

#all {
width: 772px;
}

#text {
magrin-right: 5px;
margin-left: 5px;
}

#header {
width: 772px;
height: 107px;
}

#bl_wrapper {
width: 200px;
float: left;
}

#bl_top {
background-image: url(images/bl_top.gif);
width: 200px;
height: 35px;
}

#bl_middle {
background-image: url(images/bl_middle.gif);
width: 200px;
}

#bl_bottom {
background-image: url(images/bl_bottom.gif);
width: 200px;
height: 10px;
}

#banner {
background-image: url(images/banner.gif);
width: 564px;
height: 107px;
float: right;
}

#mara_wrapper {
width: 772px;
margin-top: 7px;
}

#mara_top {
background-image: url(images/mara_top.gif);
width: 772px;
height: 10px;
}

#mara_middle {
background-image: url(images/mara_middle.gif);
width: 772px;
}

#mara_bottom {
background-image: url(images/mara_bottom.gif);
width: 772px;
height: 10px;
}

#main_wrapper {
width: 772px;
margin-top: 7px;
}

#nav_wrapper {
width: 200px;
float: left;
}

#nav_top {
background-image: url(images/nav_top.gif);
width: 200px;
height: 35px;
}

#nav_middle {
background-image: url(images/nav_middle.gif);
width: 200px;
}

#nav_bottom {
background-image: url(images/nav_bottom.gif);
width: 200px;
height: 10px;
}

#content_wrapper {
width: 564px;
float: right;
}

#content_top {
background-image: url(images/content_top.gif);
width: 564px;
height: 35px;
}

#content_middle {
background-image: url(images/content_middle.gif);
width: 564px;
height: 10px;
}

#content_bottom {
background-image: url(images/content_bottom.gif);
width: 564px;
height: 10px;
}

#footer_again {
width: 772px;
}

#footer_wrapper {
width: 772px;
margin-top: 7px;
}

#footer_top {
background-image: url(images/footer_top.gif);
width: 772px;
height: 10px;
}

#footer_middle {
background-image: url(images/footer_middle.gif);
width: 772px;
}

#footer_bottom {
background-image: url(images/footer_bottom.gif);
width: 772px;
height: 10px;
}
</style>
</head>

<body>
<div id="header">

<div id="bl_wrapper">
<div id="bl_top"></div>
<div id="bl_middle"><div id="text">Radio stats or something here?</div></div>
<div id="bl_bottom"></div>
</div>

<div id="banner"></div>
</div>

<div id="mara_wrapper">
<div id="mara_top"></div>
<div id="mara_middle"><div id="text"><marquee direction="right">haidere. this site is cool, kai?</marquee></div></div>
<div id="mara_bottom"></div>
</div>

<div id="main_wrapper">
  <div id="nav_wrapper">
<div id="nav_top"></div>
<div id="nav_middle"><div id="text">- Home<br />
- Goodies<br />
- whatever.</div></div>
<div id="nav_bottom"></div>
</div>

<div id="content_wrapper">
<div id="content_top"></div>
<div id="content_middle"><div id="text">teh content goes here, pls.</div></div>
<div id="content_bottom"></div>
</div>
</div>

<div id="footer_wrapper">
<div id="footer_top"></div>
<div id="footer_middle"></div>
<div id="footer_bottom"></div>
</div>

</body>
</html>

Moved by Agesilaus (Forum Moderator) from Designing and Development: Please post in the correct forum next time.

~~php.net~~ · 09-01-2008, 10:28 PM

What div is the footer? footer_wrapper?

Invent · 09-01-2008, 10:31 PM

Put it into a container DIV.

You may need to add

HTML Code:

overflow: hidden;
clear: both;

to the container div's style.

loserWILL · 09-01-2008, 11:49 PM

Thanks Simon, that worked.

Edit: I'd rep, but I need to spread.

Thread: [xHTML] Footer Problems

Thread Tools

[xHTML] Footer Problems

Posting Permissions