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?