pomiędzy znacznikami <body></body>
<div id=”div_lewy”>lewy</div>
<div id=”div_srodkowy”>srodek</div>
<div id=”div_prawy”>prawy</div>
<div class=”czysc”></div>
<div id=”div_srodkowy”>srodek</div>
<div id=”div_prawy”>prawy</div>
<div class=”czysc”></div>
pomiędzy znacznikami <head></head>
<style type=”text/css”>
#div_lewy{
height:200px; /*deklarujemy rozmiar (wysokość – nie musimy) */
width:200px; /*deklarujemy rozmiar (szerokość – nie musimy) */
background-color:#FF0000; /*deklarujemy kolor tła by zobaczyć oco kaman (kolor czerwony) – nie musimy */
float:left; /* i to sprawia że div wyświetla się jeden obok drugiego przyciągają się do lewej można do prawej – right */
}
#div_srodkowy{
height:200px; /*deklarujemy rozmiar (wysokość – nie musimy) */
width:200px; /*deklarujemy rozmiar (szerokość – nie musimy) */
background-color:#00FF00; /*deklarujemy kolor tła by zobaczyć oco kaman (kolor zielony) – nie musimy */
float:left; /* i to sprawia że div wyświetla się jeden obok drugiego przyciągają się do lewej można do prawej – right */
}
#div_prawy{
height:200px; /*deklarujemy rozmiar (wysokość – nie musimy) */
width:200px; /*deklarujemy rozmiar (szerokość – nie musimy) */
background-color:#0000FF; /*deklarujemy kolor tła by zobaczyć oco kaman (kolor niebieski) – nie musimy */
float:left; /* i to sprawia że div wyświetla się jeden obok drugiego przyciągają się do lewej można do prawej – right */
}
.czysc{
clear:both; /* czyści nam powyższe ustawinia i nie przyciągnie do siebie już następnego <div>’a */
}
</style>
#div_lewy{
height:200px; /*deklarujemy rozmiar (wysokość – nie musimy) */
width:200px; /*deklarujemy rozmiar (szerokość – nie musimy) */
background-color:#FF0000; /*deklarujemy kolor tła by zobaczyć oco kaman (kolor czerwony) – nie musimy */
float:left; /* i to sprawia że div wyświetla się jeden obok drugiego przyciągają się do lewej można do prawej – right */
}
#div_srodkowy{
height:200px; /*deklarujemy rozmiar (wysokość – nie musimy) */
width:200px; /*deklarujemy rozmiar (szerokość – nie musimy) */
background-color:#00FF00; /*deklarujemy kolor tła by zobaczyć oco kaman (kolor zielony) – nie musimy */
float:left; /* i to sprawia że div wyświetla się jeden obok drugiego przyciągają się do lewej można do prawej – right */
}
#div_prawy{
height:200px; /*deklarujemy rozmiar (wysokość – nie musimy) */
width:200px; /*deklarujemy rozmiar (szerokość – nie musimy) */
background-color:#0000FF; /*deklarujemy kolor tła by zobaczyć oco kaman (kolor niebieski) – nie musimy */
float:left; /* i to sprawia że div wyświetla się jeden obok drugiego przyciągają się do lewej można do prawej – right */
}
.czysc{
clear:both; /* czyści nam powyższe ustawinia i nie przyciągnie do siebie już następnego <div>’a */
}
</style>
czemu używamy id i class?
id – jest to unikatowy znaczni i może wystąpić tylko jeden taki sam w kodzie jak się powieli Validator wyrzuci błąd; id wywołujemy znacznikiem #
class – tą samą deklaracje mozna używać wielokrotnie nie spowoduje wyświetlania się błędu; class wywołujemy znacznikiem “.”