Lihtsad ühe veeruga veebilehtede maketid CSS-is
Selles õppetükis harrastame lihtsate ühe veeruga veebilehtede makettide loomist. Teeme näiteks järgmise maketi:
Asume rakendamise juurde. Iga makett algab tavaliselt üldise div-iga nimega
wrapper, mis sisaldab kogu ülejäänud veebisaiti:
<div id="wrapper">
</div>
Meie puhul joondatakse wrapper ekraani keskele:
#wrapper {
width: 800px;
margin: 50px auto;
}
Samuti on sellel piirjoon:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Teeme nüüd lehe põhistruktuuri. See koosneb menüüst ja põhisisu - sisust:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Lisame meie plokkide sisu:
<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>
Nüüd saame lisada stiilid meie plokkidele. Lisame menüüle stiili:
#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;
}
Ja nüüd lisame stiilid sisuelementidele:
#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;
}
Saame nüüd kogu koodi kokku panna:
<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;
}
Nõuanne 1
Kõige mugavam on anda taandeid ülevalt alla.
Näiteks on meil menüü ja sisu,
ning nende vahel on tühi ruum. Ilmselgelt
võib see ruum olla tehtud menüü alumise
taandega, sisu ülemise taandega
või nende samaaegse mõjuga. Sel juhul
on parem määrata menüüle alumine taanne, ning sisule
eemaldada ülemine padding ja margin vaikimisi
h1 jaoks.
Nõuanne 2
Järglased ei peaks moodustama taandet
vanemate vahel. Näiteks on meil menüü.
Selle menüü alumist taandet saab moodustada
kas menüüdivi margin-iga või linkide margin-iga.
Paremini on valida esimene variant, sest
lingid ei peaks tegutsema üle vanema pea.
Nõuanne 3
Olgu kahe elemendi vahel taanne
ja antud juhul pole visuaalselt vahet,
mida valida taande jaoks - margin või padding.
Sel juhul valige margin, sest
just see peaks looma taandeid elementide
vahel.
