Schéma rozloženia s viacerými obalmi v CSS
Pri vývoji sa často stretávame s rozloženiami, v ktorých bloky majú pozadie na celú šírku stránky, ale obsah týchto blokov je vycentrovaný. Tu je príklad takéhoto rozloženia:
V takomto rozložení budeme musieť vytvoriť nie jeden obal, ale niekoľko - pre každý blok. Zároveň musí byť vo vnútri obalu ďalší blok, ktorý vycentruje obsah. Tiež musí existovať trieda, ktorá je zodpovedná za farbu pozadia obsahu.
Všeobecná schéma nášho rozloženia bude vyzerať nasledovne:
<div class="wrapper">
<div class="center">
</div>
</div>
<div class="wrapper line">
<div class="center">
</div>
</div>
<div class="wrapper">
<div class="center">
</div>
</div>
<div class="wrapper line">
<div class="center">
</div>
</div>
Trieda center bude použitá
na centrovanie blokov:
.center {
width: 800px;
padding: 20px;
margin: 0 auto;
}
Trieda line bude použitá na
farebné vyplnenie blokov:
.wrapper.line {
background-color: #008040;
color: white;
}
A trieda wrapper bude rodičom každého
bloku. Použijeme ju na nastavenie odsadenia
medzi blokmi:
.wrapper {
margin-bottom: 30px;
}
Poďme teraz napísať úplný kód našej úlohy:
<div class="wrapper">
<div class="center">
<h1>Hlavná hlavička stránky</h1>
</div>
</div>
<div class="wrapper line">
<div class="center">
<h2>Naša spoločnosť</h2>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
<div class="wrapper">
<div class="center">
<h2>Naše ceny</h2>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
<div class="wrapper line">
<div class="center">
<h2>Naše kontakty</h2>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.wrapper {
margin-bottom: 30px;
}
.wrapper.line {
background-color: #008040;
color: white;
}
.center {
width: 800px;
padding: 20px;
margin: 0 auto;
}
.wrapper h1 {
margin: 0;
font: 40px "Times New Roman";
}
.wrapper h2 {
margin: 0;
font: 25px "Times New Roman";
}
.wrapper p {
font: 16px/1.4 Arial;
text-align: justify;
}