/    Sign up×
Community /Pin to ProfileBookmark

the background will not stretch right to the edge of the page.

Copy linkTweet thisAlerts:
Aug 23.2009

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

[url]http://cazman.blogdns.net[/url]

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

HTML:

[code]<!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>[/code]

And the CSS:

[code]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;}[/code]

And a screenshot of the problem:

[center]

[IMG]http://i612.photobucket.com/albums/tt202/Cazman23/problem.jpg[/IMG]

[/center]

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@WestWebAug 23.2009 — [B]If[/B] your interested you could try adding this to the top of your CSS, Cazman:

html{

padding: 0px;

}

[B]else if[/B] that doesn't work try adding:

padding: 0px;

margin: 0px;

to the body element...

[B]else[/B] try adding:

margin: 0px;

to the #top element

I sure hope one of those works for you! ?
Copy linkTweet thisAlerts:
@CazmanauthorAug 23.2009 — The second one worked perfectly WestWeb, thank you very much for the help! I completely understand why as well.
×

Success!

Help @Cazman spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...