wtorek,
Układ normalny elementów HTML
W układzie normalnym (normal flow) elementy HTML układają się zgodnie z ich kolejnością w kodzie oraz swoim typem. Elementy liniowe zajmują pozycje od lewej do prawej strony, a po wyczerpaniu miejsca w poziomie przechodzą do nowego wiersza. Znaczniki wyświetlane w sposób blokowy układają się jeden pod drugim, a odległości między nimi można ustalić za pomocą własności margin.
Kod HTML przykładu
Poniższy kod HTML w niezmodyfikowanej formie będzie wykorzystywany w kolejnych materiałach dotyczących układu elementów na stronie. Nie wykorzystano wprowadzonych w HTML5 znaczników semantycznych, które zostaną przedstawione w kolejnych materiałach, jednak zastosowano odpowiednie nazwy klas elementów div. Większość stron internetowych ma ograniczenie co do swojej szerokości, podobne założenie ma prezentowany projekt. Niepisaną normą stało się nadawanie dla elementu ograniczającego klasy o nazwie container. W przykładowym kodzie div.container obejmuje wszystkie elementy. Schematyczny zapis prezentowanego kodu:
body > div.container >
( div.header
+ div.section > (
div.main
+ div.aside
)
+ div.footer
)
W rzeczywistości w elementach div o klasach main i aside znajduje się więcej znaczników, niż zaprezentowano, nie umieszczono ich poniżej, aby zachować czytelność układu najbardziej istotnych elementów.
<body>
<div class="container">
<div class="header">
<h1>Debian GNU/Linux</h1>
</div>
<div class="section">
<div class="main">
Historia systemu...
</div>
<div class="aside">
Linus Torvalds...
</div>
</div>
<div class="footer">
<p>
Materiał szkoleniowy, CKZiU Mrągowo
</p>
</div>
</div>
</body>
Przykład
Z powodów technicznych prezentowana strona została umieszczona w ramce iframe. Możesz ją otworzyć w pełnym oknie. Chwytając za prawy dolny róg ramki, można przetestować zachowanie przykładowej strony na węższych ekranach. Jest ona przyjazna dla urządzeń mobilnych, i co najważniejsze osiągnięto to prostymi środkami.
Kod CSS
Wiele z poniższych reguł nie wpływa na układ strony, są to np. deklaracje kolorów tła i czcionki, centrowanie tekstu. Element div.container otrzymał tylko dwie zdefiniowane własności: max-width: 960px i margin: auto. Zastosowana do ograniczenia szerokości układu własność max-width jest lepsza niż width, ponieważ pozwala na automatyczne dopasowanie się strony przy niższych rozdzielczościach. Automatyczny margines ustawia element na środku okna, nie wpływa na górny i dolny margines. Na wizualny efekt duży wpływ mają wypełnienia (padding). Prezentowany przykład jest dobrym punktem wyjścia do opracowania bardziej złożonego rozwiązania przyjaznego zarówna dla komputerów stacjonarnych, jak i urządzeń mobilnych.
body, div {
margin: 0;
padding: 0;
}
body {
padding: 30px;
background-color: #e4d7c1;
}
.container {
max-width: 960px;
margin: auto;
}
.header {
background-color: #a00;
color: #fff;
text-align: center;
padding: 2% 0;
}
.section {
background-color: #f2f2f2;
}
.main, .aside {
padding: 3% 5%;
}
.aside {
background-color: #fff;
}
.footer {
background-color: #343434;
color: #fff;
text-align: center;
padding: .5% 3%;
}
