Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dokument bez tytułu</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background-image: url(../../galery/images/TLO-2_01.png);
background-repeat: no-repeat;
margin: 0; /* zaleca się wyzerowanie dopełnienia i marginesu elementu body, tak aby mogły być uwzględniane różne domyślne ustawienia przeglądarki */
padding: 0;
text-align: center; /* kontener zostaje wyśrodkowany w oknach przeglądarek IE 5*. Następnie tekst określony przez selektor #container jest wyrównywany domyślnie do lewej */
color: #000000;
}
.twoColFixLtHdr #container {
width: 700px; /* użycie szerokości mniejszej o 20 piks. od pełnej szerokości 800 piks. pozwala uatrakcyjnić okno przeglądarki i uniknąć poziomego paska przewijania */
background: #FFFFFF;
margin: 0 auto; /* automatyczne marginesy (w połączeniu z szerokością) powodują wyśrodkowanie strony */
border: 0px solid #000000;
text-align: left; /* ustawienie to przesłania domyślne ustawienie wyrównania tekstu: środkowanie w elemencie body. */
}
.twoColFixLtHdr #header {
background-image:url(../../galery/images/TLO-2_01-02.png) ;
padding: 0 10px 0 20px; /* takie dopełnienie jest zgodne z wielkością wyrównania do lewej tych elementów div, które leżą poniżej. Jeśli w elemencie #header użyto obrazu zamiast tekstu, można usunąć dopełnienie. */
}
.twoColFixLtHdr #header h1 {
margin: 0; /* wyzerowanie marginesu w ostatnim elemencie nagłówka #header pozwoli uniknąć skrócenia marginesów – tj. dodania niepotrzebnych spacji między elementami div. Jeśli element div ma obramowanie, czynność ta jest niepotrzebna, ponieważ obramowanie również zapobiega skróceniu marginesów */
padding: 60px 0; /* użycie dopełnienia, a nie marginesu, pozwoli utrzymać odpowiednią odległość między elementem a krawędziami elementu div */
}
.twoColFixLtHdr #sidebar1 {
float: left; /* ponieważ jest to element pływający, należy określić szerokość */
width: 180px; /* rzeczywista szerokość elementu div, w standardowych przeglądarkach lub w zwykłym trybie pracy programu Internet Explorer oprócz szerokości będzie określone dopełnienie i obramowanie */
background: #EBEBEB; /* kolor tła będzie widoczny tylko w wypełnionym obszarze kolumny, nie dalej */
padding: 15px 10px 15px 20px;
}
.twoColFixLtHdr #mainContent {
margin: 0 0 0 250px; /* ustawienie lewego marginesu w elemencie div powoduje powstanie kolumny przy lewej krawędzi strony - niezależnie od liczby elementów na pasku bocznym sidebar1 odstęp kolumnowy pozostanie. Lewy margines można usunąć. Wtedy tekst skojarzony z elementem #mainContent będzie wypełniał element #sidebar1, począwszy od końca zawartości elementu #sidebar1. */
padding: 0 20px; /* należy pamiętać, że dopełnienie jest to pusty obszar w polu div, a margines jest to pusty obszar poza polem div */
}
.twoColFixLtHdr #footer {
padding: 0 10px 0 20px; /* takie dopełnienie jest zgodne z wielkością wyrównania do lewej tych elementów div, które leżą powyżej. */
background:#DDDDDD;
}
.twoColFixLtHdr #footer p {
margin: 0; /* wyzerowanie marginesów pierwszego elementu w stopce pozwoli uniknąć ewentualnego skrócenia marginesów - tj. dodania niepotrzebnych spacji między elementami div */
padding: 10px 0; /* użycie dopełnienia zapewni marginesy, a jednocześnie uniemożliwi ich skrócenie */
}
.fltrt { /* ta klasa może zostać użyta do zdefiniowania płynnego przesunięcia elementu w prawo. Przesuwany element musi poprzedzać element, który ma następować na stronie po nim. */
float: right;
margin-left: 8px;
}
.fltlft { /* ta klasa może zostać użyta do zdefiniowania płynnego przesunięcia elementu w lewo. */
float: left;
margin-right: 8px;
}
.clearfloat { /* tę klasę należy umieścić w elemencie div lub break, powinna ona stanowić ostatni element kontenera zawierającego element pływający */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.middle {vertical-align: middle; }
-->
</style><!--[if IE 5]> <style type="text/css"> /* w tym komentarzu warunkowym należy umieścić pole css odpowiadające przeglądarce IE 5* */ .twoColFixLtHdr #sidebar1 { width: 230px; } </style> <![endif]--><!--[if IE]> <style type="text/css"> /* w tym komentarzu warunkowym należy umieścić poprawki css, dotyczące wszystkich wersji programu IE */ .twoColFixLtHdr #sidebar1 { padding-top: 30px; } .twoColFixLtHdr #mainContent { zoom: 1; } /* powyższa właściwość zoom (powiększenie) ma wartość „hasLayout”, co pozwala uniknąć wielu błędów typowych dla przeglądarki IE */ </style> <![endif]--></head>
<body class="twoColFixLtHdr">
<div id="container">
<div id="header">
<h1> </h1>
<!-- end #header --></div>
<div id="sidebar1">
<h3>Zawartość paska bocznego Sidebar1</h3>
<p>Kolor tła skojarzony z tym elementem div będzie widoczny tylko w tle zawartości. Jeśli chcesz użyć linii oddzielającej, to umieść obramowanie po lewej stronie znacznika div #mainContent (o ile będzie on zawierał więcej elementów). </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<h1> Główna treść </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>Nagłówek na poziomie H2 </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p>Stopka</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Szukaj
Użytkownicy
Kalendarz
Pomoc
![[Obrazek: skys68.png]](http://i41.tinypic.com/skys68.png)
