CSS - layout

Jak rozłożyć elementy jeden obok drugiego?

Do układania poziomo elementów strony służą własności css: float, clear i position.

Float
  • float:left
  • float:right
  • float:none

Element strony posiadający własność float jest najpierw normalnie umieszczany na stronie, a potem przesuwany maksymalnie (w prawo lub w lewo) w ramach pudełka w którym się znajduje.

Clear
  • clear:left
  • clear:right
  • clear:both

Elementy występujące po floatowanym elemencie będą go otaczały. Jeśli chcemy uniknąć wystąpienia tego efektu, musimy je oznaczyć wlaściwością clear - przywraca ona naturalny rozkład elementów na stronie. Po nadaniu własności clear:left, element zostanie przesunięty poniżej wszystkich elementów floatowanych na lewo (float:left)

Jak to działa?
  • Naturalny układ strony

1-naturalny.png

  • Paragraf ma nadaną własnośc float:left
2-floated.png
  • Przy większej ilości tekstu
3-otoczony.png
  • Kiedy obiekt floatowany jest wyższy niż otaczający tekst
4-problem.png
  • Po wstawieniu spacer'a
6-rozwiazanie.png
  • Jeszcze jeden przykład
7-znow_zle.png
  • I ze spacer'ami
8-spacer_pomaga.png
  • Float:right
9-right.png
Alternatywny sposób rozkładania strony

Można poeksperymentować ;)

position: static
position: absolute
position: fixed
position: relative
top:
right:
bottom:
left:

Dodatkowy selector css

id -> oznacza element, który występuje na stronie tylko raz
w html'u:
<img id="nazwa_id">
w css:
#nazwa_id{}

Zadanie

Przygotować układ swojej strony używając do tego czterech div'ow. Jeden ma zawierać nagłówek, drugi główną treść strony, trzeci menu boczne, a ostatni stopke strony.

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