Lauantaina 8. lokakuuta 2005 kategoriassa Oppaat
Itse en ole netistä löytänyt kovinkaan hyviä ohjeita div-lohkojen käytöstä. Div-taitto on kuitenkin helppoa. Tässäpä nyt sitten lyhyt ja ytimekäs opas:
Tehdään divejä käyttäen yksinkertainen ulkoasu, jossa on header, sisältö-alue, sivupalkki ja footer:
<html>
<head>
<style>
#head { width: 650px; border: 1px solid black; }
</style>
</head>
<body>
<div id="head">
<div> Header </div>
<div> Sisältö </div>
<div> Sivupalkki </div>
<div> Footer </div>
</div>
</body>
</html>
Divit tekevät automaattisesti rivinvaihdon. Jotain täytyy siis tehdä saadaksemme sisältö-alueen ja sivupalkin vierekkäin. Homma hoituu css-tyylimäärittelyllä. Määritellään sisältö- ja sivupalkki-divin sijainnit seuraavalla tavalla:
<html>
<head>
<style>
#head { width: 650px; border: 1px solid black; }
#sisalto { float: left; width: 65%; }
#sivupalkki { float: right; width: 32%; }
#footer { clear: both; }
</style>
</head>
<body>
<div id="head">
<div> Header </div>
<div id="sisalto"> Sisältö </div>
<div id="sivupalkki"> Sivupalkki </div>
<div id="footer"> Footer </div>
</div>
</body>
</html>
Kuten huomaat, float-määrityksellä voidaan määrätä divien sijainti ja näin ollen laittaa niitä myös vierekkäin. Jos vierekkäisten divien alapuolella on div, kuten tässä tapauksessa siellä on vielä footer, tulee sen css-määrityksiin laittaa “clear: both”-määritys. Nyt ulkoasu on valmis ja voit katsoa sen klikkaamalla tästä.
Mikäli haluamme laittaa kolme div-lohkoa vierekkäin, voimme toimia esimerkiksi näin:
<html>
<head>
<style>
#head { width: 650px; border: 1px solid black; }
#sisalto { float: left; width: 50%; }
#sivupalkki { float: left; width: 24%; }
#sivupalkki2 { float: left; width: 24%; }
#footer { clear: both; }
</style>
</head>
<body>
<div id="head">
<div> Header </div>
<div id="sisalto"> Sisältö </div>
<div id="sivupalkki"> Sivupalkki1 </div>
<div id="sivupalkki2"> Sivupalkki2 </div>
<div id="footer"> Footer </div>
</div>
</body>
</html>
Eli jos divejä halutaan vierekkäin enemmän kuin kaksi, “kellutetaan” niistä jokainen vasemmalle. Nyt meillä on siis rinnakkain kolme diviä. Klikkaa tästä nähdäksesi lopputuloksen.
Kirjoitusta muokattu 8.10. klo 19:15
Vieras
Se css..
18.10.05 klo 20:46
Miika
Css-määreet ovat html-koodin kanssa samassa syssyssä jos niitä hait. Näin oli mielestäni selkeintä.
18.10.05 klo 23:17
Lauri
Niin juuri EI pitäisi olla. Ulkoinen tyylitiedosto.
01.01.06 klo 11:01
Miika
Ei, ei. Mutta kun kyseessä on tällainen opas, en näe syytä erotella tyylejä html:stä. Näkeepähän helposti, mitkä tyylimäärittelyt ovat tekemisissä minkäkin kanssa.
01.01.06 klo 12:08
Mikko
Erittäin hyödyllistä, kiitos!
11.12.06 klo 12:13
Em
Hmm kuinkas toimii sitten sellainen kun haluan sen yhden eli teksi/sisältö osuuden keskelle ja reunoille jäisi sitten taustaväri, kuinka sen saan kestitettyä..?
13.03.07 klo 13:31
JuZZi90
edellinen kommaaja käyny oikeeseen aikaan, 1337 :D
16.04.07 klo 15:08
JuZZi90
..kelloki melkein sama :\
09.07.07 klo 10:27
DIVeihin ärsyyntyny
Tästä oli kuin olikin hyötyä…
30.05.08 klo 20:51
Wille
Totaaaa… Mis pageholder on?
13.06.08 klo 17:00