Czas na warstwy! - zapoznanie z DIV

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-10-16

szukaj: warstwy div kurs css

Aby móc projektować strony oparte o warstwy najpierw należy sobie uzmysłowić co to jest warstwa:-). DIV jest to pojemnik - zwykły prostokąt, o niewielu domyślnych właściwościach - jest elementem blokowym [nie można - w normalnych warunkach - postawić dwóch div-ów obok siebie]. Na tej lekcji nauczysz się w tradycyjny sposób wykorzystywać DIV, a na następnych pójdziemy już z tym dalej.

Przykład:

p.tytul {
/ * usunięto ten kawałek
border-left:1px solid #333333;
border-right:1px solid #333333;
border-top:1px solid #333333; */
font-family: arial,tahoma,helvetica,sans-serif;
font-size: 10pt;
font-weight: bold;
text-align: justify;
/* a tu zmieniono
margin: 10px 0 0 10px;
padding: 5px 10px 5px 10px; na: */
margin: 0;
padding: 10px; }

P.tresc {
/ * usunięto ten kawałek
border-left:1px solid #333333;
border-right:1px solid #333333;
border-bottom:1px solid #333333; */
font-family: arial;
font-size: 9pt;
text-align: justify;
/* a tu zmieniono
margin: 0 0 10px 10px;
padding: 5px 10px 5px 10px; na :*/
margin: 0;
padding: 10px; }

DIV#cont { // 1
border: 1px solid #333333; // 2
margin: 10px; // 2
padding: 0; } // 2

Opis:

• * - w kodzie są komentarze gdzie usunąłem, lub zmieniłem fragment - pozmieniaj to też u siebie
• 1 - zacząłem tworzyć regułę dla DIV. Zastosowałem tu coś innego - wcześniej zawsze używaliśmy klas [np. <div class="klasa">] teraz użyłem identyfikatora [np. <div id="identyfikator">], a w kodzie CSS zapisuje się zamiast kropki hash ['#']
• 2 - Opisuję właściwości - obramowanie 1px ciągłe, 10pikselowy margines i padding na 0 [padding działa do środka, a tam już sobie poradzę paddingami z p. tresc i p.tytul]

Jak widzisz kod CSS się skurczył - a efekt pozostał ten sam! Teraz czas na zmiany w kodzie HTML.

<td class="txt">
<div id="cont">
<p class="tytul">Tu nagłówek</p>
<p class="tresc">wpisz tu dowolny własny text</p>
</div>
</td>
</tr>

Zapisz teraz zmiany w pliku. Co widzisz? Nic się nie zmieniło - to bardzo dobrze:-) Być może są lekkie różnice w odstępach, ale z tym już sam się pobaw:-). Mam nadzieję, że już wiesz jak wygląda zwyczajna warstwa i jak w ciekawy sposób można jej użyć:-)

Różnica między id a class

Elementy oznaczone ID muszą być unikatowe, tzn., że na jednej stronie może wystąpić tylko 1 element z takim ID. Jeśli nie mamy pewności, czy element wystąpi więcej niż raz to możemy bez obaw użyć 'class', które może być przypisane do nieskończenie wielu elementów na stronie. cs

Patryk 'yarpo' Jar

szukaj: warstwy div kurs css

Zagadnienia poruszane w tej części kursu:

• Czas na warstwy! - zapoznanie z DIV
• Budujemy tabelę - tworzenie nowych tagów