PDA

Click to See Complete Forum and Search --> : the background will not stretch right to the edge of the page.

Cazman
08-22-2009, 07:22 PM
Hello, I'm having a bit of a problem with the header of this website I'm trying to design. The problem is that the headers edges do not reach the top or left side of the page, but it reaches the right side of the page, for a live example visit

http://cazman.blogdns.net

If that doesn't work here's the code that I've used:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTM 1.0 Strict//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css" />
<title>Seraphics - Portfolio</title>
</head>
<body>
<div id="top">
<div id="navbar">
<a href="#">Portfolio</a>
<a href="#">Contact</a>
</div>
<img src="logo.jpg" id="logo" />
</div>
<img src="clouds.png" id="clouds" />
<p id="copyright">Copyright © seraphics.net, All Rights Reserved</p>
</body>
</html>

And the CSS:
body{
background: url(background.jpg) no-repeat;
width: 100%;
height: 100%;}

#top{
background: black;}

#logo{
margin-left: 2em;
margin-top: 1.5em;}

#navbar{
position: inline;
padding-top: 3em;
list-style: none;
float: right;
padding-right: 3em;
background: black;
margin-left: 10em;
margin-right: 0.2em;}

#navbar a{
padding-right: 0.45em;
padding-left: 0.45em;
text-decoration: none;
font-family: "Rockwell";
font-style: italic;
font-weight: bold;
font-size: 19px;
color: #d9d9d9}

#clouds{
width: 99%;
position: absolute;
margin: 0 auto;}

#copyright{
font-size: 10px;
font-family: "Arial";
color: white;
margin: 0 auto;
text-align: center;
position: absolute;
background-color: black;
left: 0;
right: 0;
bottom: 0;
padding-top: 1.5em;
padding-bottom: 1.5em;}

And a screenshot of the problem:
http://i612.photobucket.com/albums/tt202/Cazman23/problem.jpg
WestWeb
08-22-2009, 07:52 PM
If your interested you could try adding this to the top of your CSS, Cazman:
html{
padding: 0px;
}

else if that doesn't work try adding:
padding: 0px;
margin: 0px;
to the body element...

else try adding:
margin: 0px;
to the #top element

I sure hope one of those works for you! :)
Cazman
08-23-2009, 07:21 AM
The second one worked perfectly WestWeb, thank you very much for the help! I completely understand why as well.