Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>STOS</title>
<link rel="stylesheet" href="style5.css" type="text/css" />
</head>
<body>
<div id="main">
<div id="top">
<div id="fixer"></div>
<div id="NAGLOWEK">Nagłówek szablonu</div>
<div id="MENU">Menu nawigacyjne</div>
<div id="REKLAMA">Dodatkowe informacje</div>
</div>
<div id="TRESC">Tre¶ć strony Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat pretium nibh ac hendrerit. Etiam eleifend ipsum eu velit cursus tincidunt. Aenean metus justo, ullamcorper tempor porta non, consectetur vitae lorem. Aliquam sed est arcu. Fusce vitae sapien facilisis odio varius euismod et ut mi. In vitae nibh at nisi gravida dapibus. Nullam ultricies bibendum dapibus. Proin aliquet nisi id enim iaculis feugiat. Nullam vulputate ligula ac tellus ornare tristique. Maecenas ac turpis nulla. In orci nunc, adipiscing sit amet semper nec, consectetur nec velit. Fusce dictum leo ullamcorper ante ornare iaculis. Curabiuam aliquam velit a tortor dignissim sed dictum nunc ornare. Praesent vehicula, nunc a convallis varius, lorem diam vulputate turpis, vitae placerat nibh diam in urna. Praesent nec justo magna. Sed velit ipsum, scelerisque et posuere tempus, porttitor vitae turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin scelerisque gravida felis, et tincidunt quam rutrum sit amet. Nam malesuada consequat sem, ut molestie urna feugiat vel. Maecenas accumsan tincidunt nisl, non fringilla elit malesuada adipiscing. Nulla ac purus ut ligula imperdiet dignissim nec id massa. Aenean imperdiet fringilla vehicula. Sed commodo libero a lectus imperdiet nec fermentum metus fermentum. Ut eu magna in ante euismod accumsan. Integer quis dolor quis libero condimentum tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut facilisis, neque ac venenatis eleifend, orci velit tristique nibh, sit amet pellentesque lectus velit malesuada urna. Nunc lectus neque, placerat id pretium ut, tincidunt at libero. Donec aliquet dapibus ultricies. Praesent sollicitudin mauris et purus elementum placerat. Duis laoreet tortor nec nunc tincidunt volutpat. Nullam scelerisque neque est. Duis dapibus dui at metus iaculis quis elementum lorem accumsan. Etiam quis eros non nunc vehicula fermentum et id tellus. Nulla iaculis mauris varius felis tempor at tincidunt libero adipiscing. </div>
<div id="STOPKA">Stopka serwisu</div>
</div>
</body>
</html>
/* CSS Document */
html, body {
background-color: #aff; /* ustalannie koloru tla, koloru fontu, usuwanie marginesow dla glownej strony */
color: #000;
margin: 0;
padding: 0;
}
#main { /* DOADATKOWY BLOK OBEJMUJACY*/
width: 960px;
margin: 0 auto;
}
#fixer { /* DODATKOWY BLOK ZAKRYWAJACY GORE STRONY -odsteb miedzy przegladarka a glownym blokiem (top) 25px */
width: 960px;
height: 25px;
background: #aff;
}
#top { /*blok obejmujacy - containing block*/
width: 960px; /*calosc 780px;*/
margin: 0 auto; /*powoduje ze blok glowny strony jest wysrodkowany*/
top: 0px;
position: fixed;
}
#NAGLOWEK {
background-color: #888;
height: 175px;
}
#MENU {
width: 200px; /*150px;*/
float: left;
overflow: hidden; /*w przypadku gdy zawartosc jest zbyt szeroka nastapi obciecie poprzez ukrycie za duzego elementu*/
background-color: #ccc;
top:200px; /* te 3 linijki odpowiadaja za to ze */
bottom: 25px; /* odrywaja warstwe (fixed) */
position: fixed; /* i rozciagaja automatycznie o 200px od gory i o szerokosc stopki na dole*/
}
#REKLAMA {
width: 160px;
float: right;
overflow: hidden;
background-color: #ccc;
top: 200px;
bottom: 25px; /* te 4 linijki rozciagaja w pione ale licza od lewej krawedzi PRZEGLADARKI a nie TOPu czy MAINa*/
position: fixed;
margin-left: 800px; /*a to zalatwia sprawe :), tyle czasu a to kwestia jednego polecenia */
}
#TRESC {
width: 600px; /* zawartosc, tresc 480px; */
overflow: hidden;
background-color: #fff;
margin: 200px auto 0px 200px;
}
#STOPKA {
clear: both; /*powoduje ze stopka nie wskakuje obok menu gdy jest malo tresci*/
width: 100%; /*eliminacja bledu IE6 w pozniejszych zbedne*/
background-color: #888;
}
