Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.
-
- CommentAuthortechnophobe
- CommentTimeMar 31st 2008
I'm having trouble keeping my footer div in the position I want. I have defined in css styling that I want a margin of 10px between the upper div's(#nav, #image) and the footer(#footer) , however when it displays in both Internet Explorer and Firefox the footer shifts further down the page (30/40px approx.). Does any know of a resolution for this.
The code is displayed below:
-------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML lang=eng><HEAD><TITLE></TITLE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body{
width:800px;
margin:auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#header{
width:800px;
height:50px;
background-color:#999933;
margin-top:30px;
}
#content{
width:800px;
margin:0;
padding:0;
}
#nav{
margin-top:10px;
margin-bottom:10px;
padding:0;
float:left;
}
#nav ul{
list-style-type:none;
margin-left:0;
margin-top:0;
padding:0;
font-size:24px;
}
#home{
width:270px;
height:65px;
padding-left:20px;
padding-top:20px;
margin-right:10px;
margin-bottom:10px;
background-color:#00CCCC;
}
#about{
width:270px;
height:65px;
padding-left:20px;
padding-top:20px;
margin-right:10px;
margin-bottom:10px;
background-color:#CC0066;
}
#gallery{
width:270px;
height:65px;
padding-left:20px;
padding-top:20px;
margin-right:10px;
margin-bottom:10px;
background-color:#660000;
}
#contact{
width:270px;
height:65px;
padding-left:20px;
padding-top:25px;
margin-right:10px;
margin-bottom:0;
background-color:#000099;
}
a:hover{
background-color:#FF0000;
}
li a {
text-decoration:none;
color:#FFFFFF;
}
li a:hover{
text-decoration:none;
}
#image{
margin-top:10px;
margin-right:0px;
padding:0;
float:left;
}
#footer{
clear:both;
width:800px;
height:50px;
margin-top:0;
padding-top:0;
background-color:#999933;
}
</style>
</head>
<body>
<div id="header">
Header
</div>
<div id="content">
<div id="nav">
<ul>
<li id="home"><a href="#">+ Home </a></li>
<li id="about"><a href="#">+ About</a></li>
<li id="gallery"><a href="#">+ Gallery</a></li>
<li id="contact"><a href="#">+ Contact</a></li>
</ul>
</div>
<div id="image">
<img src="image01.jpg" width="500" height="375" />
</div>
</div>
<div id="footer">
hello
</div>
</body>
</HTML> -
- CommentAuthordesigncarter
- CommentTimeApr 1st 2008 edited
Hey, I've cleaned up your code and fixed your problem. The problem you were having was all the padding pushing down the navigation "container" which was pushing down your footer. You also had a potential problem with your margin:auto in the defined for the body. In browsers such as IE, especially the older ones, it will not center it as you think. The way to center it is to do a margin: 0px auto. The first number is the top and bottom margins, the auto defines the left and right. I also put your page in a wrapper so that you can center the wrapper and give it a text-align of center, then put a content "container" inside that with a text align of left to correct it. This trick's ie's old browsers to center it as you want without having to put a dreaded center tag. Hope this helps.
<!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=ISO-8859-1" />
<style type="text/css">
body{
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#wrapper{
position:relative;
width: 800px;
margin: 0px auto;
text-align:center;
}
#main_content{
position:relative;
margin: 30px 0px 0px 0px;
padding: 0px;
text-align:left;
}
#header{
position:relative;
margin: 0px;
padding: 0px;
height:50px;
background-color:#993;
text-align:center;
color:#FFF;
line-height: 50px;
}
#nav{
position:relative;
margin: 0px;
padding:0;
float:left;
}
#nav ul{
position:relative;
margin:0px;
padding:0px;
list-style-type:none;
font-size:24px;
color:#FFF;
}
#nav ul li{
position:relative;
width: 280px;
height: 86px;
margin: 10px 10px 10px 0px;
line-height: 65px;
padding: 0px 0px 0px 10px;
}
.home{
background-color:#0CC;
}
.about{
background-color:#C06;
}
.gallery{
background-color:#600;
}
.contact{
background-color:#009;
}
a:hover{
background-color:#F00;
}
li a {
text-decoration:none;
color:#FFF;
}
li a:hover{
text-decoration:none;
}
p{
margin: 0px;
padding: 0px;
}
#image{
margin-top:10px;
margin-right:0px;
padding:0;
float:right;
}
#footer{
position:relative;
margin: 0px;
padding: 0px;
height:50px;
background-color:#993;
text-align:center;
color:#FFF;
line-height: 50px;
clear:both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="main_content">
<div id="header">
<p>Header</p>
</div>
<div id="nav">
<ul>
<li class="home"><a href="#">+ Home</a></li>
<li class="about"><a href="#">+ About</a></li>
<li class="gallery"><a href="#">+ Gallery</a></li>
<li class="contact"><a href="#">+ Contact</a></li>
</ul>
</div>
<div id="image" style="background-color:#CCCCCC; width:500px; height:375px;">
<img src="image01.jpg" width="500" height="375" />
</div>
<div id="footer">
<p>Footer</p>
</div>
</div><!-- END #main_content -->
</div><!-- END #wrapper -->
</body>
</html>
1 to 2 of 2