...

View Full Version : Footer Tag in Div / CSS



mwtnetworks
12-15-2009, 02:41 PM
Hey all i'm having a problem and am not sure how to fix it i've tried everything i can think of .. the website in question is www.theplacementoffice.com/index.php

the "footer tag" is positionend for the bottom but isn't landing there

Here is the HTML code of the site:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>The Placement Office | Home </title>
<link href="http://theplacementoffice.com/WebTemplate.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container" style"">
<div id="Banner">
<img align="top" alt="Logo" border="0" height="251" src="images/plain.gif" width="100%">
</div>
<div id="Slogen">
<p>Your Staffing Resource Partner</p>
</div>
<!-- Left Menu Section -->
<div id="Menu">
<ul>
[[Wayfinder? &startId=`0`]]
</ul>
</div>
<div id="Address">
<p>Toll Free: 1-877-***-****</p>
<p>**** Lucknow Dr, Unit # 3</p>
<p>****, Ontario L5*****</p>
</div>
<div id="LatestNews">
<p>Latest News</p>
</div>
<div id="NewsItems">
<p>[!NewsItems!]</p>
</div>

<!-- Main Section Of Websuite -->
<div id="Picture"><img src="images/Main_pic.gif" alt="" width="100%" height="368"></div>

<!-- Main Text Area -->
<div id="MainText" style="left: 203px; top: 472px; height: 197px">
<h1>[*#introtext*]</h1>
<p>To arrive at the best staffing</p>
<p> solution, we provide the fallowing:</p>

<div id="innertext" style="left: 286px; top: 16px; height: 174px">
<p>[*#content*]</p>
</div>
</div>
<div id="Footer">Copyright 2009</div>
</div>
<!--
<table width="100%" valign="bottom" style="bottom:0;background-color:#860909;">
<td valign="bottom">Copyright 2009</td>
</table> -->
</body>
</html>
The CSS IS:
body {
background-color: #f2e4c9;
}
#Banner {
position:absolute;
width:100%;
height:115px;
z-index:1;
top:0;
left:0;
}
#Slogen {
position:absolute;
width:30%;
height:15px;
z-index:8;
top:83px;
left:17px;
font-size:20px;
font-weight:bold;
color:white;
}

#Menu {
position:absolute;
width:193px;
height:225px;
z-index:1;
top: 210px;
left:0;
}
#Menu ul{
list-style-type: none;
padding:0;
margin:0;
float:left;
overflow:hidden;
vertical-align:middle;
}
#Menu li{
background-image:url('images/Button.gif');
width:192px;
height:35px;
text-align:center;
list-style: none;
color:white;
float:left;
font-weight:bold;
margin-left: auto;
margin-right: auto;


}
#Menu li a:hover{
background-image:url('images/redbuttondown.gif');
width:192px;
height:35px;
text-align:center;
list-style: none;
color:white;
float:left;
font-weight:bold;
margin-left: auto;
margin-right: auto;
}
#Menu a:visited,#Menu a{
color:white;
text-decoration:none;
}

#Picture {
position:absolute;
left:203px;
top:88px;
width:79.8%;
height:391px;

}
#MainText {
position:absolute;
width:559px;
height:292px;
z-index:3;
left: 203px;
top: 472px;
margin:0;
padding:0;
}
#Footer {
position:absolute;
bottom:0;
width:100%;
background-color:#860909;
height:17px;
left:0;
font-family: Tahoma;
font-size: 12px;
font-weight: normal;
color: #FFF;
text-align:right;
}

#Address {
position:absolute;
width:193px;
height:115px;
z-index:5;
left:0;
top: 417px;
background-color:#f9d398;
}
#Address p {
margin-left:5px;
left: 20px;
font-weight:normal;
font-size:12px;
}
#LatestNews {
background-color:#b90c0c;
position:absolute;
width:193px;
height:26px;
z-index:6;
left:0;
top: 526px;
}
#LatestNews p {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 12px;
font-weight: normal;
color: #FFF;
text-align:center;
margin-left: auto;
margin-right: auto;
margin-top:3px;
}

#NewsItems {
position:absolute;
width:193px;
height:115px;
z-index:5;
left:0;
top: 554px;
background-color:#f9d398;
margin:0;
font-weight:normal;
font-size:12px;
}
#NewsItems p {
margin-left:5px;
left: 20px;
font-weight:normal;
font-size:12px;
}

#innertext {
position:absolute;
width:272px;
height:199px;
z-index:7;
left: 286px;
top: 16px;
}
h1,h2,h3,h4,h5,h6 {
font-family: Tahoma, Geneva, sans-serif;
}
h1 {
margin-left:5px;
font-size: 14px;
color: #000;
}
---- End of CSS --

can anyone help ? Thanks !

abduraooft
12-15-2009, 03:07 PM
It's one of the pitfalls of using absolute positions (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/) everywhere.
I'd recommend to check a good 2 column layout at http://bonrouge.com/2c-hf-fluid.php

mwtnetworks
12-15-2009, 06:54 PM
Thanks i'll look into that

so i wasn't going crazy



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum