Enostavne enostolpne postavitve spletnih strani v CSS
V tej lekciji bomo vadili ustvarjanje enostavnih enostolpnih postavitev spletnih strani. Na primer, naredimo takšno postavitev:
Začnimo z implementacijo. Vsaka postavitev se praviloma začne s splošnim div z imenom
wrapper, ki vsebuje celotno preostalo spletno stran:
<div id="wrapper">
</div>
V našem primeru bo ovojnica poravnana na sredino zaslona:
#wrapper {
width: 800px;
margin: 50px auto;
}
Prav tako bo imela obrobo:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Zdaj naredimo glavno strukturo strani. Sestavljena bo iz menija in glavne vsebine:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Dodajmo vsebino naših blokov:
<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>
Zdaj lahko dodamo sloge našim blokom. Dodajmo slog meniju:
#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;
}
In zdaj dodajmo sloge elementom vsebine:
#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;
}
Zdaj lahko zberemo celotno kodo skupaj:
<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;
}
Nasvet 1
Najbolj priročno je dajati odmike od zgoraj navzdol.
Na primer, imamo meni in vsebino,
med njima pa je prazen prostor. Očitno je,
da je ta prostor lahko narejen z spodnjim
odmikom menija, zgornjim odmikom vsebine,
ali hkratnim vplivom obeh. V tem primeru
je bolje nastaviti spodnji odmik meniju, vsebini pa
odstraniti privzete vrednosti padding in margin
za h1.
Nasvet 2
Potomci ne bi smeli oblikovati odmika med
starši. Na primer, imamo meni.
Spodnji odmik tega menija je mogoče oblikovati
z margin div z menijem, ali z margin
povezav. Bolje je izbrati prvo možnost, saj
povezave ne bi smele delovati čez glavo
starša.
Nasvet 3
Recimo, da med dvema elementoma obstaja odmik
in v tem primeru vizualno ni razlike,
kaj izbrati za odmik - margin ali padding.
V tem primeru izberite margin, saj
je prav ta tisti, ki naj bi ustvarjal odmike med
elementi.
