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
- Paragraf ma nadaną własnośc float:left
- Przy większej ilości tekstu
- Kiedy obiekt floatowany jest wyższy niż otaczający tekst
- Po wstawieniu spacer'a
- Jeszcze jeden przykład
- I ze spacer'ami
- Float:right
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.