środa,
Układ tabelaryczny
W przeszłości przez wiele lat na stronach internetowych do tworzenia układu elementów stosowano tabele, obecnie dzięki możliwościom własności display można formować w kształt tabeli zupełnie inne znaczniki. W prezentowanym przykładzie zastosowano znaczniki div, ale z powodzeniem można je zastąpić innymi.
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
W układzie tabelarycznym elementy zachowują się tak, jak składowe zwykłej tabeli. Element typu display: table niekoniecznie rozciąga się na całą dostępną szerokość, dlatego własność width należy zadeklarować jawnie. W prezentowanym układzie jego obecność nie jest niezbędna, podobnie jak brak jawnie zadeklarowanego wiersza tableli (display: table-row). Elementy z własnością display ustawioną na table-cell układają się w poziomie jeden obok drugiego. Za pomocą reguł CSS można im nadać szerokość. Przy stosowaniu standardowego modelu pudełkowego należy pamiętać o uwzględnieniu wypełnień i obramowań. W przykładzie zastosowano jednostkę względną (procent), aby zachować elastyczność elementów. Własność display: table-cell oznacza, że element nie może mieć marginesów, gdyby zaistniała potrzeba zastosowania odstępów, pomocna może okazać się deklaracja własności border-spacing.
body, div {
margin: 0;
padding: 0;
}
body {
padding: 30px;
background-color: #e4d7c1;
}
.container {
max-width: 960px;
margin: 0 auto;
}
.header {
background-color: #a00;
color: #fff;
text-align: center;
padding: 2% 0;
}
.section {
background-color: #f2f2f2;
}
.aside {
background-color: #fff;
}
.footer {
background-color: #343434;
color: #fff;
text-align: center;
padding: .5% 3%;
}
/* KLUCZOWE REGUŁY */
.section {
display: table;
width: 100%;
}
.main, .aside {
display: table-cell;
padding: 3% 5%;
width: 55%;
}
.aside {
width: 25%;
}
/* END KLUCZOWE REGUŁY */
