eMaupie figle z szablonami
Blog > Komentarze do wpisu

Podstawy layoutu CSS - część II

Jeśli zainteresowała Cię poprzednia notka, to zapraszam do przeczytania kolejnej części cyklu o podstawach layoutu za pomocą CSS. Kontynuując temat, dziś zajmiemy się właściwością float.

W przedstawianych przykładach użyłem tego samego kodu html, co w poprzedniej notce . Elementy "div1" i "div2" uzupełniłem jedynie o kilka linijek przykładowego tekstu, by opisywane efekty były lepiej widoczne.

Float: left

Określając dla elementu właściwość float: left spowodujemy, że zostanie on "uniesiony" i przesunięty możliwie najdalej w lewą stronę. Pozostałe elementy będą go otaczać (opływać z prawej strony). Efekt ten jest najczęściej stosowany do otaczania obrazków tekstem. Może też posłużyć do tworzenia layoutów kolumnowych bez użycia tabel. Właściwość float może przyjmować także wartości right (znaczenia chyba nie trzeba nikomu tłumaczyć) oraz none (wartość domyślna - bez efektu float).

#div1 {
    float:left;
    width: 300px;
}

Jeśli zastosujemy powyższą definicję stylu CSS, otrzymamy taki oto efekt:

Rys 5. - float: left;

Jak widać na powyższym przykładzie, ustawienie dla elementu "div1" własności float: left spowodowało jego przesunięcie do lewej strony elementu "container",  w którym się znajduje. Jednocześnie kolejny element "div2" nie układa się już pod spodem, lecz wchodzi w pustą przestrzeń po prawej stronie "div1" i otacza go tekstem.

Kolumny bez użycia tabeli

Wiedząc jak działa float możemy bez problemu wykorzystać go do zrobienia prostego, dwukolumnowego layoutu. Wystarczy dla dwóch kolejnych divów ustawić szerokość oraz właściwość float: left , jak w kolejnym przykładzie:

#div1 {
    float: left;
    width: 150px;
}

#div2 {
    float: left;
    width: 150px;
}

Rys 6. kolumny w CSS

Na rysunku widać jednak, że coś jest nie tak. Jak wspomniałem wcześniej element z ustawionym floatem jest "unoszony". To znaczy, że zawierający go element nie uwzględnia go przy wyliczaniu swojej wysokości. Na obrazku widać, że element "container" ma wysokość uwzględniającą jedynie istnienie elementu "div3", który nie ma ustawionej własności float. Element "after" jest częściowo zasłaniany przez "div1" i "div2", a tekst w nim zawarty otacza je z prawej strony.

Clear: both

By zapobiec takiej sytuacji zastosujemy kolejną własność, stosowaną w parze z float. Jest nią clear, która pozwala na przerwanie oblewania elementu tekstem i rozpoczęcie layoutowania pod nim. Własność ta, podobnie jak float może przyjmować wartości none, left right oraz both. Do uzyskania pożądanego przez nas efektu najczęściej używa się ostatniej z nich.

#div3 {
    clear: both;
}

Dodanie powyższej definicji do kodu CSS z poprzedniego przykładu, da następujący efekt:

Rys. 7 - clear: both;

Jak widać element "div3" został przeniesiony poniżej "div1" i "div2" przez co teraz także "container" obejmuje te elementy, a div "after" nie wchodzi już pod spód.

Ciąg dalszy nastąpi

Żeby można było mówić o cyklu notek, to przydałyby się chociaż ze trzy :) Dlatego, w następnej napiszę o ciekawej skądinąd własności display, o której już wspominałem w notce o zakładkach. Wszystkich, których zaciekawiła tematyka, zapraszam więc do śledzenia, a tym którzy są już znudzeni obiecuję, że kolejna będzie o czymś z innej beczki :)

środa, 13 lutego 2008, e-maupa

Polecane wpisy

  • Darmowe grafiki do szablonów

    Przygotowując szablon na bloga, najczęściej zaczynam od znalezienia jakiejś grafiki do nagłówka, która zdefiniuje charakter bloga oraz kolorystykę pozostałych e

  • 2. Ten z latarniami

    Ponieważ na nadmiar wolnego czasu w tej chwili nie narzekam, to prace przy nowym projekcie szablonu idą bardzo powoli. W związku z tym wrzucę dziś szablon, któr

  • Zakładki dla kategorii

    Jak za pomocą CSS przerobić linki do kategorii bloxa na zakładki? To proste, jeśli zastosujesz się do kilku poniższych wskazówek i zastosujesz prosty trick.

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
kate_mac
2008/02/14 12:39:59
dla mnie bomba
choć generalnie to o czym piszesz jest mi znane to teraz przynajmniej wiem że rozumiem
i czekam na więcej
-
2008/02/15 02:20:42
Ja nie czuję się absolutnie znudzona i tez czekam na więcej:)
-
2008/02/15 07:42:30
Dzięki dziewczyny :)
-
Gość: Firk, 62.233.164.*
2008/06/26 14:56:52
Masz talent do wyjaśniania. Dzięki :)