Na początek czy możecie mi pomóc z ustawieniem elementów na stronie jak na tym zdjęciu. Generalnie to obrazki mam już chyba dobrze? jeszcze tylko z wyśrodkowaniem tego nagłówka u góry ("Tekst wyśrodkowany") i ustawienie tekstu poniżej jak na zdjęciu bo wyjeżdża poza obrazek. Nie wiem też czy ten mój kod jest zgodny z standardem W3C. Proszę o pomoc
Mój kod html:
Kod
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Moja strona</title>
</head>
<body>
<h2>Tekst wyśrodkowany</h2>
<div id="page">
<div id="page_left">
<img src="obraz1.jpg"/>
</div>
<div id="page_right">
<img src="obraz2.jpg"/>
</div>
<div id="page_down">
<img src="obraz3.jpg"/>
</div>
<p>przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst </p>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Moja strona</title>
</head>
<body>
<h2>Tekst wyśrodkowany</h2>
<div id="page">
<div id="page_left">
<img src="obraz1.jpg"/>
</div>
<div id="page_right">
<img src="obraz2.jpg"/>
</div>
<div id="page_down">
<img src="obraz3.jpg"/>
</div>
<p>przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst przydładowy tekst </p>
</div>
</body>
</html>
oraz kod CSS:
Kod
*{
margin: 0px;
}
body{
background: url('obraz.jpg') top repeat-x;
}
#page{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
h2{
position: absolute;
text-align: center;
color: white;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
vertical-align: middle
}
#page_left{
display: inline;
float: left;
}
#page_right{
display: inline;
float: right;
}
#page_down{
display: inline;
position: relative; top: 300px; left: 540px;
}
p{
float: left;
display: inline;
position: relative; top: 100px; left: 270px;
color: white;
}
margin: 0px;
}
body{
background: url('obraz.jpg') top repeat-x;
}
#page{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
h2{
position: absolute;
text-align: center;
color: white;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
vertical-align: middle
}
#page_left{
display: inline;
float: left;
}
#page_right{
display: inline;
float: right;
}
#page_down{
display: inline;
position: relative; top: 300px; left: 540px;
}
p{
float: left;
display: inline;
position: relative; top: 100px; left: 270px;
color: white;
}