Yksinkertaiset yksisarakkeiset verkkosivujen asettelut CSS:ssä
Tässä oppitunnissa harjoittelemme luomaan yksinkertaisia yksisarakkeisia verkkosivujen asetteluja. Tehdään esimerkiksi tällainen asettelu:
Aloitetaan toteutus. Jokainen asettelu
yleensä alkaa yleisestä div-elementistä nimeltä
wrapper, joka sisältää koko loppuvan verkkosivun:
<div id="wrapper">
</div>
Meidän tapauksessamme wrapper keskitetään näytön keskelle:
#wrapper {
width: 800px;
margin: 50px auto;
}
Sillä on myös reunus:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Tehdään nyt sivun perusrakenne. Se koostuu valikosta ja pääsisällöstä - kontentista:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Lisätään lohkojemme sisältö:
<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>
Nyt voimme lisätä tyylejä lohkoillemme. Lisätään tyyli valikolle:
#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 nyt lisätään tyylit kontentin elementeille:
#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;
}
Voimme nyt koota koko koodin yhteen:
<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;
}
Vinkki 1
Mukavinta on antaa marginaaleja ylhäältä alas.
Esimerkiksi meillä on valikko ja kontentti,
joiden välissä on tyhjää tilaa. Ilmeisesti
tämä tila voidaan tehdä joko valikon alimarginaalilla,
kontentin ylämarginaalilla,
tai niiden samanaikaisella vaikutuksella. Tässä tapauksessa
on parempi asettaa valikolle alimarginaali, ja kontentilta
poistaa oletus padding ja margin
h1-elementille.
Vinkki 2
Alkuasukkaiden ei pitäisi muodostaa marginaalia
vanhempiensa välille. Esimerkiksi meillä on valikko.
Tämän valikon alimarginaalin voi muodostaa
joko valikkodivin margin:lla, tai linkkien margin:lla.
On parempi valita ensimmäinen vaihtoehto, koska
linkkien ei pitäisi toimia vanhempien yli.
Vinkki 3
Oletetaan, että kahden elementin välillä on marginaali
ja tässä tapauksessa visuaalisesti ei ole eroa,
kumpi valita marginaaliksi - margin tai padding.
Tässä tapauksessa valitse margin, koska
juuri sen pitäisi luoda marginaaleja elementtien
välille.
