CSS - Układ strony

CSS krok po kroku

Pod adresem http://css-krok-po-kroku.yoyo.pl znajduje się prosta strona prezentująca krok po kroku dodawanie stylów do strony XHTML. Prezentuje zarówno elementy CSS poznane na ostatnich zajęciach, jak i możliwości pozycjonowania elementów na stronie, które omawiane będą dzisiaj.

Aby w pełni skorzystać z wiedzy zawartej na stronie http://css-krok-po-kroku.yoyo.pl należy podglądać jej strukturę i style CSS przy pomocy Firebuga lub widoku źródła w przeglądarce.

Układ strony

Opływanie (float) i czyszczenie (clear)

Aby elementy blokowe strony ułożyć obok siebie na stronie można wykorzystać własność "opływania" (float).

Możliwe wartości float w CSS:

  • left - element przesunięty na lewo, kolejne elementy "opływają" go z prawej strony
  • right - element przesunięty na prawo, kolejne elementy "opływają" go z lewej strony
  • none - standardowa wartość, element nie jest opływany

Przykładowo prosty dokument z obrazkiem i tekstem:

...
<h2>Floatowanie i clearowanie strony</h2>
<p>
<img ... /> To jest normalny układ strony.
</p>

będzie wyglądał tak:
1-naturalny.png

Nadanie obrazkowi stylu float: left sprawi, że:
2-oplywanie.png
przesunie on się na lewo (jest po lewej stronie, więc nic się nie zmienia), a tekst zacznie go opływać z prawej strony.

Jeśli tekstu będzie więcej, to:
3-oplywanie-dlugi-tekst.png

Problem pojawia się, gdy opływane elementy różnią się wielkościami lub gdy wszystkie elementy wewnątrz innego elementu mają ustawiony float.
Np, gdy obrazek będzie większy niż tekst w paragrafie:
4-problem.png

Aby element nadrzędny rozszerzał swoją wysokość do opływanych elementów wewnątrz należy skorzystać z własności clear i overflow.

Własność clear ma wartości analogiczne do float:

  • left - "czyści" (kończy/zamyka) opływanie z lewej strony
  • right - "czyści" opływanie z prawej strony
  • both - "czyści" opływanie z lewej i prawej strony
  • none - nie czyści opływania (standardowa wartość)

Zatem elementom zawierającym opływane elementy należy nadać style:

odpowiedni-selektor {
  clear:both; /* najlepiej czyścić oba opływania */
  overflow: hidden; /* musi być, nie będziemy wnikać dlaczego ;) */
}
 
/* czyli przykładowo dla paragrafu z przykładu powyżej: */
p {
  clear: both;
  overflow: hidden;
}

Dzięki temu:
5-czyszczenie.png

Podobnie dla większej ilości opływanych elementów może się zdarzyć tak:
6-wiecej.png

Ale odpowiednie czyszczenie opływania sprawia, że:
7-czyszczenie.png

Oczywiście zamiast float:left można użyć float:right żeby obrazek znajdował się z prawej strony:
8-oplywanie.png

Linki:
Zastosowanie opływania do układu strony można zobaczyć np. na http://css-krok-po-kroku.yoyo.pl/krok/5/
Dokładne omówienie opływania np. na stronie: http://css.maxdesign.com.au/floatutorial/

Pozycja elementów

Inną metodą ustawiania elementów jest ręczne ustalanie ich pozycji na stronie. Służy do tego własność position.
Możliwe wartości:

  • static - standardowa - przeglądarka decyduje gdzie ma być narysowany element
  • relative - ustalamy pozycję elementu względem jego pozycji standardowej
  • absolute - ustalamy pozycję bezwzględną elementu w odniesieniu do nadrzędnego elementu
  • fixed - ustalamy pozycję bezwzględną elementu w odniesieniu do okna przeglądarki

W przypadku użycia własności position z wartością inną niż static element pozycjonujemy podając wartości:

  • top - pozycja od góry (w pikselach)
  • bottom - pozycja od dołu (w pikselach)
  • left - pozycja od lewej (w pikselach)
  • right - pozycja od prawej (w pikselach)

W większości przypadków wystarczy podać pozycję jednego z narożników (czyli parę wartości top lub bottom i left lub right).

Ze względu na ograniczenia czasowe nie mamy czasu na szczegółowe przyglądanie się temu zagadnieniu, ale jest to otwarte pole do eksperymentów i poszukiwań w internecie :)


Pomoce naukowe

Na przyszłość


Zadanie 5

  1. Nadać swojej stronie ostateczny kształt. Można usunąć elementy niepotrzebne, a dodane ze względu na zadania (np. formularz).
  2. Wykorzystać poznane elementy CSS, model pudełkowy do ustalenia rozmiarów elementów i ich odstępów, dostosować układ strony przy pomocy opływania tak, by uzyskać efekt 2 lub 3 kolumn. Przykładowy układ na obrazku poniżej.
  3. Wykorzystać elementy graficzne uatrakcyjniające wygląd (np. obrazki tła dla strony / nagłówka)
  4. Ściągnąć książkę Art & Science of CSS - link na stronie http://kck.wikidot.com i zastosować chociaż jedną opisaną tam technikę (np. nagłówki, nawigacja).

Przykładowy układ:
twocolumn.gif

Każda podstrona musi oczywiście być poprawnym ("walidującym się") i semantycznie poprawnym XHTML-em.
Arkusz CSS musi być poprawnym ("walidującym się") dokumentem CSS. Dopuszczalne są ostrzeżenia walidatora CSS (warning). Jedyne dopuszczalne błędy walidacji CSS mogą wynikać z zastosowania właściwości z CSS 3 (np. przezroczystość opacity lub zaokrąglone narożniki -moz-border-radius).

termin: godzina 24:00 w piątek 12 grudnia (północ z piątku na sobotę)
punkty: ??

Za każdy dzień spóźnienia odejmowany jest 1 punkt.

Strona na licencji Creative Commons Attribution-ShareAlike 3.0. Autorzy: A. Czoska, M. Komosiński, B. Kowalczyk, A. Kupś, M. Lubawy