Sivun asettelu 2008-01-12 17:46
| Kuvaus: | Esimerkki sivun asettelemiseksi. Sivun sisällön rakenteeseen sisältyy ylä- ja alatunnisteet, sisältöalue, sekä sivun vasempaan reunaan sijoitettava navigointivalikko. Näiden lisäksi tarvitaan muutama apuelementti CSS-asettelun avuksi. EsimerkkiRakenteellisesti erottuvat alueet sivulla voidaan merkitä omaksi div-elementikseen, ja annetaan jokaiselle oma yksilöllinen id-attribuutti. id-attribuutteja käytetään valitsimena CSS-määrittelyjen kohdistamiseksi tiettyyn div-elementtiin.  Rakenne XHTML:näXHTML-asiakirjassa sama voisi näyttää body-elementin sisällä tältä. <body>
<div id="kokosivu">
<div id="ylatunniste">
<!-- logo, päänavigointivalikko -->
</div>
<div id="wrapper">
<div id="sisalto">
<!-- sivun sisältö -->
</div>
</div>
<div id="navigointi">
<!-- navigointilista -->
</div>
<div id="extra">
<!-- ei sisältöä, alatunnisteen asettelun avuksi -->
</div>
<div id="alatunniste">
<!-- yhteystiedot, tekijänoikeudet... -->
</div>
</div>
</body>
Koko sivua ympäröivä div-elementti (container)Koko sivun sisältö kannattaa ympäröidä div-elementillä joka kattaa kaiken body-elementin sisällön. Tämä div-elementti aloitetaan heti body-elementin aloitustunnisteen jälkeen, ja päätetään juuri ennen body-elementin lopputunnistetta. Tämän div-elementin avulla voidaan antaa sivulle esimerkiksi leveys, ja sivun sisältö voidaan keskittää selainikkunassa, riippumatta selainikkunan koosta.
#kokosivu {
/* annetaan leveys niin että mahtuu 1024x768 näytölle */
width: 700px;
/* sisällön keskittäminen */
margin-right: auto;
margin-left: auto;
}
Internet Explorer 5.5 ja vanhemmat eivät tätä keskitystä tue. Niitä varten voi tarvittaessa määrittää: body { text-align: center; }
#kokosivu { text-align: left; }
Ylätunniste (header)Koska ylätunniste kirjoitettiin XHTML-dokumentin alkuun, se sijoittuu sivun alkuun luontevasti myös selaimessa. Erityisiä asettelumäärityksiä ei tarvita. Tekstin ja muun sisällön sijoitteluun kannattaa käyttää div#ylatunniste-elementille annettuja padding-määrittelyjä. Ylätunnisteeseen voi sijoittaa logon - kuvana tai taustakuvana, ja esimerkiksi vaakasuuntaisen navigointivalikon. Navigointi ja sisältö rinnakkain #1Jos navigointivalikko on lyhyt, se voidaan asetella sisältöalueen rinnalle helpoiten määrittelyllä position: absolute. Tällöin ylimääräistä div#wrapper-elementtiä ei tarvita. #kokosivu {
/* navigoinnin absoluuttista asettelua varten */
position: relative;
}
#sisalto {
/* tyhjää tilaa navigoinnille */
margin-left: 200px;
}
#navigointi {
position: absolute;
top: 70px; /* ylätunnisteen alapuolelle */
left: 0;
Navigointi ja sisältö rinnakkain #2Jos navigointivalikko on niin pitkä että se on välillä pystysuunnassa sisältöaluetta suurempi, molemmat kannattaa asetella kelluttamalla. Mikäli navigointivalikko halutaan vasempaan reunaan, tarvitaan sisältöalueen ympärille ylimääräinen div#wrapper-apuelementti. Sisältö (content) ja apuelementti "wrapper"Sisältöalue kannattaa ympäröidä kahdella div-elementillä: tässä id-attribuutit #sisalto ja #wrapper. #wrapper kellutetaan oikeaan reunaan, ja #sisalto-elementille annetaan marginaalia sivun vasempaan reunaan kellutettavaa navigointia varten. /* vasemmalle tilaa #navigointia varten */
#wrapper {
float: right;
width: 100%;
margin-left: -200px;
}
#sisalto {
margin-left: 190px;
}
NavigointiSivun vasempaan reunaan sijoitettava navigointi toteutetaan tekemällä XHTML-dokumentin loppuun normaali järjestämätön lista sivuston pääosioista, ja jokaiseen osioon tehdään linkki. Listalle (tai sitä ympäröivälle div-elementille) annetaan yksilöivä id-attribuutti, esim. 'navigointi'. Navigoinnin voi sijoittaa sivun vasempaan reunaan absoluuttisella asettelulla jos se on aina sisältöä lyhyempi, mutta tässä se tehdään kelluttamalla. #navigointi {
/* #navigointi vasempaan reunaan */
float: left;
width: 190px;
/* padding-top ominaisuudella muutetaan tarvittaessa
yläreunan etäisyyttä #ylatunnisteesta */
padding: 10px 0;
}
Navigointivalikon toteuttaminen listana osiossa Navigointi Alatunniste (footer)Alatunniste AMikäli jokaisella sivuston sivuilla on sisältöä enemmän kuin yhdelle näytölliselle mahtuu, ei alatunnisteen sijoittelussa ole suurempia ongelmia. Mikäli navigointi ja sisältöalue asetettiin edellä rinnakkain ensimmäisen version mukaan, ei alatunnisteen sijoittelu vaadi määrityksiä, se sijoittuu normaalisti sisällön alle. Mikäli taas tehtiin jälkimmäisellä tavalla float-ominaisuudella kelluttamalla, täytyy alatunniste määritetää alkamaan kellutettujen elementtien jälkeen, ettei se siirry sivupalkin mukana: #alatunniste {
clear: both;
}
Alatunniste BAlatunnisteen ongelmaksi saattaa muodostua sen siirtyminen näytöllä liian ylös niillä sivuilla joilla on vähän varsinaista sisältöä. Ratkaisu:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#kokosivu {
position: relative;
min-height: 100%;
/* seuraavat kaksi riviä vanhemmille selaimille, säilytä järjestys */
height: auto !important;
height: 100%;
}
#alatunniste {
/* sijoitetaan #alatunniste #kokosivun alareunaan */
position: absolute;
bottom: 0;
width: 100%; /* absolute vie leveyden */
}
#extra {
/* koska #navigointi ja #wrapper kellutettiin, ei #kokosivulla
ole korkeutta, näitä seuraavan #extran 'clear: both' lisää elementin
niiden alapuolelle ja antaa #kokosivulle korkeuden */
clear: both;
/* tehdään samalla tyhjää tilaa vähintään #alatunnisteen korkeuden
verran ettei #alatunniste tule #sisallön tai #navigoinnin päälle */
height: 50px;
}
LinkitSivupohjiaVerkosta löytyy lukuisia sivuja joilla tarjotaan valmiiksi tehtyjä CSS-asetteluja. Niistä voi katsoa mallia siitä millä eri tavoilla sivun asettelun voi toteuttaa.
Uusimmat
Lisää linkkejä haulla layout |
| Luokka: | web » ohje |
| Avainsanat: | XHTML, CSS, asettelu, layout |