Eenvoudige enkelkoloms lay-outs voor websites in CSS
In deze les gaan we oefenen met het maken van eenvoudige enkelkoloms lay-outs voor websites. Laten we, bijvoorbeeld, zo'n lay-out maken:
Laten we beginnen met de implementatie. Elke lay-out begint
meestal met een algemene div met de naam
wrapper, die de rest van de website bevat:
<div id="wrapper">
</div>
In ons geval wordt de wrapper gecentreerd op het scherm:
#wrapper {
width: 800px;
margin: 50px auto;
}
Het heeft ook een rand:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Laten we nu de hoofdstructuur van de pagina maken. Het zal bestaan uit een menu en de hoofdinhoud - content:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Laten we de inhoud van onze blokken toevoegen:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
Nu kunnen we stijlen toevoegen aan onze blokken. Laten we stijl toevoegen aan het menu:
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
En laten we nu stijlen toevoegen aan de content-elementen:
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
We kunnen nu alle code samenvoegen:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Tip 1
Het is het handigst om marges van boven naar beneden toe te voegen.
We hebben bijvoorbeeld een menu en content,
en daartussen - lege ruimte. Het is duidelijk
dat deze ruimte kan worden gemaakt door de onderste
marge van het menu, de bovenste marge van de content,
of hun gelijktijdige invloed. In dit geval
is het beter om een onderste marge aan het menu te geven, en de bovenste
padding en margin standaard
voor h1 te verwijderen.
Tip 2
Descendants mogen geen marge vormen tussen
parents. We hebben bijvoorbeeld een menu.
De onderste marge van dit menu kan worden gevormd
door de margin van de div met het menu, of de margin
van de links. Het is beter om voor de eerste optie te kiezen, omdat
de links niet over het hoofd van de
parent heen mogen werken.
Tip 3
Stel dat er een spatie is tussen twee elementen
en in dit geval is er visueel geen verschil,
wat te kiezen voor de spatie - margin of padding.
Kies in dit geval voor margin, omdat
dit degene is die spaties tussen
elementen moet creëren.
