Useita wrapper-elementtejä käyttävä layout-kaavio CSS:ssä
Usein kehitystyössä kohtaa layouteja, joissa lohkoilla on tausta koko sivun leveydellä, mutta näiden lohkojen sisältö on keskitetty. Tässä on esimerkki tällaisesta layoutista:
Tällaisessa layoutissa meidän on tehtävä ei yksi wrapper, vaan useita - jokaiselle lohkolle. Samalla wrapperin sisällä täytyy olla vielä yksi lohko, joka suorittaa sisällön keskuutuksen. Myöskään luokkaa, joka vastaa sisällön taustavärityksestä, ei saa unohtaa.
Layoutimme yleinen kaavio näyttää seuraavalta:
<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>
Luokkaa center käytetään
lohkojen keskuuttamiseen:
.center {
width: 800px;
padding: 20px;
margin: 0 auto;
}
Luokkaa line käytetään
lohkojen väritykseen:
.wrapper.line {
background-color: #008040;
color: white;
}
Ja luokka wrapper on jokaisen
lohkon vanhempi. Käytämme sitä välin
asettamiseen lohkojen välille:
.wrapper {
margin-bottom: 30px;
}
Kirjoitetaan nyt tehtävämme täydellinen koodi:
<div class="wrapper">
<div class="center">
<h1>Pääsivun otsikko</h1>
</div>
</div>
<div class="wrapper line">
<div class="center">
<h2>Yrityksemme</h2>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
<div class="wrapper">
<div class="center">
<h2>Hinnastomme</h2>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
<div class="wrapper line">
<div class="center">
<h2>Yhteystietomme</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;
}