SirTom909
02-19-2009, 12:04 PM
Hello every, grateful if some one could me with this,
im trying to keep my footer down, its set to abolsute. However when i test it in 1024x768 it begins to over lap my <body>
is there another way to keep it down?
code attached
<!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" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="styles_home.css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<!--Navigation-->
<div id="body">
<div class="links mainmenu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Search</a></li>
</ul>
</div>
<div id="welcome">
<div id="welcometext"></div>
</div>
<div id="leftholdertop">
<div id="leftholdertoptext"></div>
</div>
<div id="rightholdertop">
<div id="rightholdertoptext"></div>
</div>
<div id="leftholderbottom">
<div id="leftholderbottomtext"></div>
</div>
<div id="rightholderbottom">
<div id="rightholderbottomtext"></div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
html, body {height:100%}
body {
height: 100%;
background:#339900;
color:#000000;
text-align:center;
margin:0;
font-size: 100%;
}
#container {
width:750px;
min-height:100%;
position:relative;
text-align:left;
margin: 0 auto 95 auto;
}
#header {
width:750px; height:150px; background:url('images/header.jpg') no-repeat top; float:left; position:relative;
}
#body {
padding-bottom:95px;
}
.links {
float:left;
width:750px;
text-align:left;
background:url('/images/homepagedivider.jpg') repeat ;
}
.mainmenu {
width:750px;
float:left;
padding:0px;
display:inline;
}
.mainmenu ul {
float:left;
margin:0 0 0 0;
padding:0 0 0 0;
text-transform:uppercase;
display:inline;
}
.mainmenu ul li {
float:left;
margin:0px;
padding:0px;
display:inline;
list-style:none;
}
.mainmenu ul a
{
float:left;
display:block;
padding:2px 8px 2px 4px;
font-weight:bold;
font-size:85%;
text-decoration:none;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
background:url('/images/homepagedivider.jpg') no-repeat 0px 0px;
}
#welcome {
width: 750px;
height: 260px;
float: right;
background:url('images/welcomebg.jpg') no-repeat;
}
#welcometext {
padding: 1px 360px 0px 115px;
font-weight:bold;
font-size:85%;
text-decoration:none;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
}
#leftholdertop {
width: 350px;
height: 150px;
float: left;
background:url('images/left_holder_top.jpg') no-repeat;
margin: 0 0 0 0;
}
#leftholdertoptext {
padding: 0px 0px 0px 0px;
}
#rightholdertop {
width: 400px;
height: 150px;
float: right;
background:url('images/right_holder_top.jpg') no-repeat;
margin: 0 0 0 0;
}
#rightholdertoptext {
padding: 0px 0px 0px 0px;
}
#leftholderbottom {
width: 350px;
height: 150px;
float: left;
background:url('images/left_holder_bottom.jpg') no-repeat;
margin: 0 0 0 0;
}
#leftholderbottomtext {
padding: 0px 0px 0px 0px;
}
#rightholderbottom {
width: 400px;
height: 150px;
float: right;
background:url('images/right_holder_bottom.jpg') no-repeat;
margin: 0 0 0 0;
}
#rightholderbottomtext {
padding: 0px 0px 0px 0px;
}
#footer {
position: absolute;
bottom:0;
margin: 0 0 0 0;
width: 750px;
height:95px;
background:url('images/footer.jpg') bottom center no-repeat;
}
im trying to keep my footer down, its set to abolsute. However when i test it in 1024x768 it begins to over lap my <body>
is there another way to keep it down?
code attached
<!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" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="styles_home.css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<!--Navigation-->
<div id="body">
<div class="links mainmenu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Search</a></li>
</ul>
</div>
<div id="welcome">
<div id="welcometext"></div>
</div>
<div id="leftholdertop">
<div id="leftholdertoptext"></div>
</div>
<div id="rightholdertop">
<div id="rightholdertoptext"></div>
</div>
<div id="leftholderbottom">
<div id="leftholderbottomtext"></div>
</div>
<div id="rightholderbottom">
<div id="rightholderbottomtext"></div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
html, body {height:100%}
body {
height: 100%;
background:#339900;
color:#000000;
text-align:center;
margin:0;
font-size: 100%;
}
#container {
width:750px;
min-height:100%;
position:relative;
text-align:left;
margin: 0 auto 95 auto;
}
#header {
width:750px; height:150px; background:url('images/header.jpg') no-repeat top; float:left; position:relative;
}
#body {
padding-bottom:95px;
}
.links {
float:left;
width:750px;
text-align:left;
background:url('/images/homepagedivider.jpg') repeat ;
}
.mainmenu {
width:750px;
float:left;
padding:0px;
display:inline;
}
.mainmenu ul {
float:left;
margin:0 0 0 0;
padding:0 0 0 0;
text-transform:uppercase;
display:inline;
}
.mainmenu ul li {
float:left;
margin:0px;
padding:0px;
display:inline;
list-style:none;
}
.mainmenu ul a
{
float:left;
display:block;
padding:2px 8px 2px 4px;
font-weight:bold;
font-size:85%;
text-decoration:none;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
background:url('/images/homepagedivider.jpg') no-repeat 0px 0px;
}
#welcome {
width: 750px;
height: 260px;
float: right;
background:url('images/welcomebg.jpg') no-repeat;
}
#welcometext {
padding: 1px 360px 0px 115px;
font-weight:bold;
font-size:85%;
text-decoration:none;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
}
#leftholdertop {
width: 350px;
height: 150px;
float: left;
background:url('images/left_holder_top.jpg') no-repeat;
margin: 0 0 0 0;
}
#leftholdertoptext {
padding: 0px 0px 0px 0px;
}
#rightholdertop {
width: 400px;
height: 150px;
float: right;
background:url('images/right_holder_top.jpg') no-repeat;
margin: 0 0 0 0;
}
#rightholdertoptext {
padding: 0px 0px 0px 0px;
}
#leftholderbottom {
width: 350px;
height: 150px;
float: left;
background:url('images/left_holder_bottom.jpg') no-repeat;
margin: 0 0 0 0;
}
#leftholderbottomtext {
padding: 0px 0px 0px 0px;
}
#rightholderbottom {
width: 400px;
height: 150px;
float: right;
background:url('images/right_holder_bottom.jpg') no-repeat;
margin: 0 0 0 0;
}
#rightholderbottomtext {
padding: 0px 0px 0px 0px;
}
#footer {
position: absolute;
bottom:0;
margin: 0 0 0 0;
width: 750px;
height:95px;
background:url('images/footer.jpg') bottom center no-repeat;
}