środa,
Układ pływający
Przez kilkanaście lat elementy pływające (float) były podstawową techniką budowy układu elementów na stronie internetowej, obecnie kaskadowe arkusze stylów oferują lepsze możliwości w tym zakresie. Własność float nie została zaprojektowana z myślą o tworzeniu układu strony, dlatego zawsze powoduje pewne problemy.
Kod HTML przykładu
Zgodnie z zapowiedzią zastosowany w przykładzie kod HTML to niezmodyfikowane rozwiązanie z materiału „Układ normalny elementów HTML”. Dla przypomnienia zaprezentowano jedynie schematyczny zapis kodu, jego pełną postać można zobaczyć w źródle przykładu.
Schematyczny zapis prezentowanego kodu:
body > div.container >
( div.header
+ div.section > (
div.main
+ div.aside
)
+ div.footer
)
Przykład
Z powodów technicznych prezentowana strona została umieszczona w ramce iframe. Możesz ją otworzyć w pełnym oknie.
Kod CSS
Kod CSS bardzo niewiele różni się od zastosowanego w poprzednich materiałach. Najważniejsze dla układu strony deklaracje znajdują się na jego końcu, dodatkowo oznaczono je komentarzami. Kontenery div.main oraz div.aside otrzymały własność float: left. Przy wystąpieniu własności float układ elementów zostaje zakłócony, dlatego ich element nadrzędny nie przyjmuje właściwej wysokości. Można to zniwelować na kilka sposobów, w przykładzie dla elementu div.section zastosowano regułę overflow: auto.
Wysokość sąsiadujących elementów pływających nie jest automatycznie równa, co powoduje problem w przypadku konieczności zastosowania odmiennego tła kolumn tworzących układ. Jest to znany problem, który doczekał się wielu sposobów rozwiązania. Niestety zawsze wymagają one pewnego kompromisu. Sposób polegający na jawnym zadeklarowaniu wysokości obu elementów, np. w pikselach, jest bezsensowny, ponieważ trzeba robić to dla każdej kolejnej strony oddzielnie, a przy zmianach ilości prezentowanej treści wymaga modyfikacji. Możliwości pokonania omawianego problemu zostaną przedstawione w kolejnych materiałach. W przykładzie zastosowano w tym zakresie bardzo prostą technikę, która sprawdza się akurat w tym przypadku. Założono, że element z prawej strony zawsze będzie mieścił mniej treści, co pozwoliło wykorzystać prostą sztuczkę. Element z lewej strony otrzymał ciemniejsze tło, a tło prawej kolumny to w rzeczywistości tło elementu nadrzędnego (div.section).
body, body div {
margin: 0;
padding: 0;
}
body {
padding: 30px;
background-color: #e4d7c1;
}
div.container {
max-width: 960px;
margin: 0 auto;
}
div.header {
background-color: #a00;
color: #fff;
text-align: center;
padding: 2% 0;
}
div.section {
background-color: #fff;
}
div.main {
background-color: #f2f2f2;
}
div.footer {
background-color: #343434;
color: #fff;
text-align: center;
padding: .5% 3%;
}
/* KLUCZOWE REGUŁY */
div.section {
overflow: auto;
}
div.main, div.aside {
float: left;
padding: 3% 5%;
width: 55%;
}
div.aside {
width: 25%;
}
/* END KLUCZOWE REGUŁY */
