...

View Full Version : Div not touching the edges of the page



Vettore
08-04-2011, 11:04 PM
Hi :)

I'm trying to make my div (fullscreen) touch the edges of the web browser at both the top and the bottom.

http://img88.imageshack.us/img88/8996/screenshot20110804at224.png

http://img31.imageshack.us/img31/2063/screenshot20110804at225.png

This is the html I'm using:


<!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>Ben Lambe | Creative Designer</title>

<link rel="stylesheet" href="css.css" type="text/css">

</head>
<body>
<div class="fullscreen">
<div id="logo"><a href="index.html"><img src="images/logo-2.png"/></a></div>

<div id="menu_wrapper" class="grey">
<div class="left"></div>
<ul id="menu">
<li><a href="contact.html">Contact</a></li>
<li><a href="blog/index.html">Blog</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</div>

And my CSS:


body{ height:100%;
background:url(images/new-background.png);
}


div.fullscreen{
background:url(images/texture.png);
position:relative;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
padding-bottom:0px;
padding-top:0;
width:1000px;
height:100%;
}


#logo {
position:relative;
width:268px;
height:42px;
text-decoration:none;
left:20px;
top:47px;
z-index:2;
}

#menu {
font-family: Helvetica, sans-serif;
text-transform: uppercase;
position:relative;
bottom:42px;
margin: 0px 0;
padding: 0;
list-style-type: none;
font-size: 15px;
background-color:#ae4141;
height: 136px;
z-index:1;
}
#menu li {
float: right;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 136px;
color: #999;
}
#menu li a:hover {
background-image:url(images/menu.png);
height:136px;
color: #ffffff;
}

If anybody knows how I can fix this that would be great. :)

Mooseman
08-04-2011, 11:28 PM
Try changing margin-top:auto; to margin-top: 0;

Vettore
08-04-2011, 11:53 PM
It worked, thank you. :)

Mooseman
08-04-2011, 11:54 PM
No problem :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum