Lil Pump

Div jest to nic innego jak pojemnik. Pojemnik, któremu możemy nadać cechy poprzez CSS.
W zasadzie każdy doświadczony programista używa właśnie div, ponieważ nie istnieje żadna inna konstrukcja, która zapewni spójności strony.

Zatem jak wygląda div ?

Bardzo prosto: <div> … </ div>

Podany przykład to podstawowa struktura diva, która składa się z otwarcia i zamknięcia.
Taki div jest bezużyteczny, ponieważ bez żadnych cech on nie wie, jak ma się zachowywać.

W tym poradniku style będę pisał mniej elegancko, czyli w wewnętrznym arkuszu stylów między znacznikami <style>…< /style> . Pamiętajcie najlepiej zawsze tworzyć do tego osobny plik CSS.

W ramach przykładu utworzymy sobie diva, który będzie miał szerokość 100px, wysokość 100px i dodatkowo będzie koloru czerwonego.

Tak jak w poprzednim poradniku tworzymy podstawową strukturę HTML:

Następnie dodajemy znaczniki <div></ div> i dodajemy im cechy szerokość – width , wysokość – height i kolor tła czyli background-color w następujący sposób.

Każdą cechę należy zamknąć średnikiem ‘;’, to on właśnie mówi przeglądarce, gdzie się kończy pojedyncza cecha!.

Jak widzimy efekt jest następujący mamy czerwony kwadrat z napisem w środku Czerwony kwadrat.

Nie takie straszne prawda?

Teraz zrobimy ciekawszy przykład. Powiedzmy, że chcemy zrobić proste Menu strony internetowej.

W tym momencie musimy utworzyć kilka divów i teraz, jak to zrobić aby poszczególne elementy tworzyły jedną całość?

Otóż istnieje takie coś, jak zagnieżdżanie, polega ono na wpisywaniu diva do diva.

Zatem działajmy!

Znowu tworzymy nową strukturę HTML tak jak na początku i tworzymy pomiędzy znacznikami body 2 divy, w czym jeden wpisany w drugi.

Aktualnie nic się nie stanie, ponieważ tak, jak cały czas wspominam Div bez cech (stylow css) jest bezużyteczny!

Żeby utworzy nasze menu musimy nadać szerokość i wysokość divowi ‘Matce’ czyli temu divowi, w którym zawierają się pozostałe. Nadajemy mu tak szerokość i wysokość, jak kwadratowi w pierwszym przykładzie przez cechy width i height.

Teraz nasz div ‘Matka’ ma określoną szerokość i wysokość. Każdy div, który znajduje się wewnątrz głównego diva ‘Matki’, może dzielić jej szerokość. My utworzymy 3 divy wewnątrz matki i podzielimy je na 1 div – 500px szerokości i 200px i wysokości , 2 div – 600px szerokości, 200px wysokości i 3 div – 500 px szerokości i 200 wysokości.

Dodatkowo, aby je rozróżnić każdemu dodamy inny kolor np. pierwszy niech będzie zielony, drugi niebieski a trzeci pomarańczowy.

I co teraz posiadamy mamy 3 divy jednak każdy z nich układa się pod sobą, dlaczego tak się dzieje?

Odpowiedzi jest prosta, ponieważ nie są określone, jak mają się układać, a domyślnie tworzą się pod sobą. Aby nasze kontenery – divy były obok siebie wystarczy do naszych stylów dodać cechę float:left;

 Teraz nasze divy ustawiły się tak, jak chcieliśmy w każde z tych divów możemy włożyć, co tylko zechcemy. Dziękuję za przeczytany poradnik, myślę, że objaśniłem wam jak działają divy, jak je wykorzystywać.