Шема макета са више wrapper-а у CSS
Често се при развоју сусрећемо са макетима у којима блокови имају позадину преко целе ширине странице, а садржај тих блокова је центриран. Ево примера таквог макета:
У таквом макету ћемо морати да направимо не један wrapper, већ више - за сваки блок. Притом унутар wrapper-а мора да постоји још један блок који врши центрирање садржаја. Такође мора да постоји класа која је одговорна за бојење садржаја позадином.
Општа шема нашег макета ће изгледати следећим редом:
<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>
Класа center ће се користити
за центрирање блокова:
.center {
width: 800px;
padding: 20px;
margin: 0 auto;
}
Класа line ће се користити за
бојење блокова:
.wrapper.line {
background-color: #008040;
color: white;
}
А класа wrapper ће бити родитељ сваког
блока. Користићемо је за задавање одступања
између блокова:
.wrapper {
margin-bottom: 30px;
}
Хајде сада да напишемо потпуни код нашег задатка:
<div class="wrapper">
<div class="center">
<h1>Main site header</h1>
</div>
</div>
<div class="wrapper line">
<div class="center">
<h2>Our company</h2>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
<div class="wrapper">
<div class="center">
<h2>Our price</h2>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
<div class="wrapper line">
<div class="center">
<h2>Our contacts</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;
}