Asemointi CSS:n avulla

CSS:n avulla voidaan sivulle tehdä haluttuun paikkaan joko kiinteä tai kelluva "laatikko". CSS -osaan tulee esim. seuraava määritys (kommentointi punaisella):

#kiintea {
background-color: #FF0; - asetetaan taustaväri
border: 3px solid #000; - asetetaan 3 pikselin reunaviiva, yhtenäinen (solid) ja väri musta.
position: absolute; - sijainti absoluuttinen (suhteessa sivuun)
height: 200px; - laatikon korkeus
width: 300px; - laatikon leveys
padding: 5px; - ns. sisävierus, eli kuinka lähelle reunaa teksti tulee
left: 600px; - sijanti vasemmasta reunasta
top: 0px; - sijainti yläreunasta.
}
#kelluva {
background-color: #9F6; - astetaan taustaväri
font-family:Verdana, Geneva, sans-serif; - asetetaan laatikossa käytettävä fontti
padding: 5px; - ns. sisävierus, eli kuinka lähelle reunaa teksti tulee
position: fixed; - sijainti kelluva
left: 200px; - sijainti vasemmasta reunasta
height: 200px; - laatikon korkeus
width: 300px; - laatikon leveys
top: 0px; - sijanti yläreunasta
}

Sitten body -osaan tulee esim. seuraava teksti:

<div id="kiintea"> Tämä keltaisella taustalla ja mustalla 3 px paksulla reunaviivalla oleva laatikko on kiinteästi kiinni sivun asettelussa </div>
<div id="kelluva"> Tämä vihreällä taustalla oleva laatikko on kelluva. Kun vierität sivua tämä laatikko pysyy koko ajan selainikkunan yläreunassa, keltaisella taustalla oleva laatikko vierittyy piiloon.</div>

Katso tästä miltä sivu näyttää selaimessa:

Tehdään seuraavaksi "perinteinen" www-sivun asemointi CSS:n avulla. Tavoitteena on tehdä sivu, jossa on yläosassa kuva (koko 940 x 200 px), Sen alapuolella navipalkki (koko 940 x 40 px). Sen alapuolella vasen navi (leveys 200 px) ja varsinainen sisältöalue (leveys 740 px). Näiden alla on vielä alapalkki (leveys 940 px). Sivu suunnitellaan kiinteään leveyteen (940 px), eli se ei ole ns. responsiivinen (kuvat yms. sopeutuu näytön leveyteen). Katsotaan Bootstrap osiossa responsiivisen asettelun tekemistä. Eli sivun asettelu on seuraava.

Kuva

 
Ylänavi

Vasen navi

 

Varsinainen sisältö

 
Alapalkki

 

Tehdään ensin sivulle html osuus seuraavasti (kommentit punaisella). Lisätään vielä ns. container, jolla sivu keskitetään ruudulle (yhtä paljon tyhjää oikealla ja vasemalla).

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WWW-sivuston malli</title>
<link href="tyyli_asettelu.css" rel="stylesheet" type="text/css"> - linkitetään erilliseen css-tiedostoon
</head>
<body>
<div id="container"> - aloitetaan ns. container (säilö)
<div id="ylaosa"> - aloitetaan yläosa, johon kuva tms.
<p>Tähän kuva tms.</p>
</div> - lopetetaan yläosa
<div id="ylanavi"> - aloitetaan päänavi (ylänavi) -alue
<p>Linkki 1 Linkki 2 Linkki 3 </p>
</div> - lopetetaan ylänavi
<div id="vasennavi"> - aloitetaan vasen navi (alanavi)
<p>Linkki 1 <br/> Linkki 2 <br/> Linkki 3 </p>
</div> - lopetetaan vasen navi
<div id="sisalto"> - aloitetaan sivun varsinainen sisältö
<p>Tähän sisällön koodi </p>
</div> - lopetetaan sivun sisältö
<div id="alaosa"> - aloitetaan alaosa
<p>Tähän alaosan koodi</p>
</div> - lopetetaan alaosa
</div><!--container loppuu --> - lopetetaan containen, tästä myös html kommentti
</body>
</html>

Alla on yksi mahdollisuus yllä olevan koodin CSS -osuudesta, kommentit punaisella.

#container {
width: 940px; - sivulle varattava kokonaisleveys
margin:auto; - automaattinen marginaali keskittää sivun ruudulle
}

#ylaosa {
height: 200px; - varataan tilaa korkeussuunnassa 200 pikseliä
width: 940px; - varataan leveys 940 px
background-color: #0F0; - asetetaan taustaväri, toinen vaihtoehto olisi esim. taustakuva
}

#ylanavi {
background-color: #F90;
float:left; - asetetaan ns. kelluva asemointi vasempaan reunaan
height: 40px;
width: 940px;
top: 200px;
}

#vasennavi{
float: left;
width: 200px; - asetetaan naville leveys 200 px
min-height:100px; - asetetaan minimikorkeus 100 pikseliä
background-color: #0FF;
}

#sisalto {
background-color: #FF0;
float: left;
left: 200px;
min-height:100px;
width: 740px; - asetetaan sisällölle kiinteä leveys 740 px(940 - 200)
}

#alaosa {
background-color: #CCC;
clear:both; - lopetetaan float toiminto
height: 40px;
width: 940px;
}

Yllä olevan esimerkki mukaisen sivun voit katsoa tästä.