Jednoduché jednosĺpcové layouty stránok v CSS
V tejto lekcii si budeme precvičovať vytváranie jednoduchých jednosĺpcových layoutov stránok. Urobme napríklad takýto layout:
Poďme na realizáciu. Každý layout zvyčajne
začína všeobecným divom s názvom
wrapper, ktorý obsahuje celý zvyšok stránky:
<div id="wrapper">
</div>
V našom prípade bude wrapper zarovnaný na stred obrazovky:
#wrapper {
width: 800px;
margin: 50px auto;
}
Tiež bude mať ohraničenie:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Poďme teraz vytvoriť hlavnú štruktúru stránky. Bude pozostávať z menu a hlavného obsahu - contentu:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Pridajme obsah našich 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>
Teraz môžeme pridať štýly našim blokom. Pridajme štýl 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;
}
A teraz pridajme štýly elementom contentu:
#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;
}
Teraz môžeme celý kód poskladať dokopy:
<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;
}
Rada 1
Najpohodlnejšie je dávať odsadenia zhora nadol.
Napríklad, máme menu a content,
a medzi nimi - prázdny priestor. Je zrejmé,
že tento priestor môže byť vytvorený dolným
odsadením menu, horným odsadením contentu,
alebo ich súčasným vplyvom. V tomto prípade
je lepšie nastaviť dolný odstup menu, a contentu
odstrániť horný padding a margin predvolené
pre h1.
Rada 2
Potomkovia by nemali formovať odstup medzi
rodičmi. Napríklad, máme menu.
Dolný odstup tohto menu môže byť formovaný
buď margin divu s menu, alebo margin
odkazov. Lepšie je zvoliť prvú možnosť, pretože
odkazy by nemali konať cez hlavu
rodiča.
Rada 3
Nech medzi dvoma prvkami je odstup
a v tomto prípade vizuálne nie je rozdiel,
čo zvoliť pre odstup - margin alebo padding.
V tomto prípade zvoľte margin, pretože
práve on by mal vytvárať odstup medzi
prvkami.
