Több wrapperes elrendezési séma CSS-ben
A fejlesztés során gyakran találkozunk olyan elrendezésekkel, ahol a blokkok háttere kitölti a teljes oldalszélességet, de a blokkok tartalma középre igazított. Itt egy példa egy ilyen elrendezésre:
Egy ilyen elrendezésben nem egy wrappert, hanem többet kell készítenünk - minden blokkhoz. Ezenkívül a wrapperen belül kell lennie egy másik blokknak is, amely a tartalom középre igazításáért felelős. Szükségünk van egy osztályra is, amely a háttérszínezést vezérli.
Az elrendezésünk általános sémája a következőképpen fog kinézni:
<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>
A center osztályt a blokkok
középre igazítására használjuk:
.center {
width: 800px;
padding: 20px;
margin: 0 auto;
}
A line osztályt a blokkok
színezésére használjuk:
.wrapper.line {
background-color: #008040;
color: white;
}
A wrapper osztály pedig minden egyes
blokk szülője lesz. Ezt használjuk a blokkok közötti
távolság beállításához:
.wrapper {
margin-bottom: 30px;
}
Most írjuk meg a feladatunk teljes kódját:
<div class="wrapper">
<div class="center">
<h1>Főoldal fejléc</h1>
</div>
</div>
<div class="wrapper line">
<div class="center">
<h2>Cégünk</h2>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
<div class="wrapper">
<div class="center">
<h2>Áraink</h2>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
<div class="wrapper line">
<div class="center">
<h2>Kapcsolataink</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;
}