CSS - szerokość strony

0

Witam

Zakodowałem lay'a i chciałem by poszczególne tła strony rozciągały się na całą szerokość ekranu, natomiast same "ciało" strony było wycentrowane na ekranie i miało szerokość 800px. Niestety coś mi nie wyszło i tło się rozciąga razem z zawartością strony mimo, że każde tło ma swojego DIV'a i odpowiednią klasę w CSS.

Plik HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>
<meta name="description" content="Opis strony" />
<meta name="keyword" content="slowa kluczowe" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="pl" />
<title>KamilNamysla.pl</title>
<link rel="stylesheet" href="css/screen.css" media="screen" type="text/css" />
</head>

<body>

	<div id="header">
    	<div class="content" >
        	<h1><a href="/">KamilNamysla.pl</a></h1>     	
			<ul>
            	<li><a href="webdesign.html">WEBDESIGN</a></li>
                <li><a href="fotomontaze.html">FOTOMONTAŻE</a></li>
                <li><a href="inne.html">INNE</a></li>
                <li><a href="">KONTAKT</a></li>
           </ul>          
        </div>  
    </div>
    
    <div id="slogan">
    	<div class="content">
        	<div id="galeria"></div>
        </div>
    </div>
    
   <div id="footer">
        <div class="rights">All rights reserved</div>
   		<div class="content"></div>
   </div>

</body>
</html>

Plik CSS:

/* reset marginesów oraz dopełnień */
html, body, ul, li {margin: 0; padding: 0;}

/* reset wysokości linii i fontu */
h1, h2, ul, li, p {margin: 0; padding: 0; font-size: 1em; line-height: 1.5em;}

/* ustawienia globalne */
body { font: 0.625em/1.5em tahoma, verdana, arial, sans-serif;}

/* szerokość strony */
.content {width: 800px; }

/* header */
#header {
    position: relative;
	height: 102px;
	border-bottom: 1px solid #fff;
	background: url(../images/headertlo_01.jpg);
	}
	
#header h1 {
	position: absolute;
	top: 6px;
	left: 51px;
	overflow: hidden;
}	
	
#header h1 a {
	display: block;
	width: 244px;
	height: 82px;
	background: url(../images/logo.png) no-repeat;
	text-indent: -666em;
	}

#header ul { overflow: hidden; position: absolute; bottom: 0; left: 700px; list-style: none;}
#header ul li { float: left;}
#header ul li a { display: block; padding: 10px 12px 40px; color: #787878; font: 17px tahoma, verdana, arial, sans-serif; text-decoration: none;}

#header ul li a:hover { background: url(../images/light.png) bottom  repeat-x; padding: 7px;} 

/*  main */
	
#slogan  {
	background: #131313 url(../images/tlo.jpg) repeat;
	border-bottom: 1px #fff solid;
	height: 900px;
	}
	
#slogan .content {

width: 800px;

}

#footer {
background: url(../images/stopka.jpg) top left repeat-x;
}	

#footer .content {
background: url(../images/design.jpg) top right no-repeat ;
height: 58px;
padding-left: 292px;
}

#footer .rights {
position: absolute;
left: 50px;
overflow: hidden;
display: block; 
padding: 20px 15px;
color: #727272;
font: italic bold 15px tahoma, verdana, arial, sans-serif; 
text-decoration: none;
}

Wiecie może co robię źle?

0

spróbuj

body {
width: 800px ;
margin: 0px auto ;
}
0

Już to rozpracowałem, tyle że zapomniałem tutaj o tym wspomnieć :/
Mimo wszystko dzięki :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1