Tänään tuntuu siltä, että position: relative; ja position: absolute; ne yhteen soppii, pannaan ne...
CSS:n avulla voi sijoittaa nettisivun lähdekoodiin ilmoitettuja elementtejä haluttuun kohtaan nettisivun ulkoasussa. Lähdekoodiin merkattu navigaatio saattaa löytyä sivun lähdekoodin lopusta, kun se ulkoasussa näkyykin aivan sivun yläosassa.
Tein tuossa jokin aika sitten erään Eskon kotisivuille ulkoasua. Ulkoasun yläosassa näkyy navigaatio (eli se linkkivalikko, josta voi siirtyä sivuston eri osioihin) — navigaation alapuolella näkyy logo. Lähdekoodia katsomalla navigaatio kuitenkin näkyy sivuston logon alapuolella ja logo navigaation yläpuolella. Kuvattu tilanne on tällainen:
<div id="runko">
<div id="header">
<h1><a href="./">Sivuston nimi</a></h1>
</div>
<div id="navigaatio">
<ul
><li id="eka"><a href="./">Etusivu</a></li
><li><a href="#">Info</a></li
><li><a href="#">Linkit</a></li
><li><a href="#">Kotisivut</a></li
><li><a href="#">Kuvagalleria</a></li
><li><a href="#">Lataamo</a></li
><li><a href="#">Vieraskirja</a></li
></ul>
</div>
</div>
Ja kuitenkin se näyttää tältä. Tosi superia. Vau. Ihq. Tai sitten ei. Tämän tempun ja systeemin tekninen toteutus on hyvin helppo kenen tahansa oppia ja sitten mahdollisesti jopa soveltaa käytännössä. Vaihtoehtoja tuollaisen elementtien sijoittelun toteuttamiseen on varmaankin useita — tässä mahtioppaassa kuitenkin kerrotaan vain yksi niistä tavoista.
Laitetaan ensin header kuntoon. Laitetaanpa siis div-palikalle, jonka selektori on #header, seuraavanlaista CSS-muotoilua:
#header {
height: 100px;
background: #D73939 url(../kuvan/tiedostonimi.png) no-repeat 0 0;
}
Tuossahan vaan laitetaan #header-elementille korkeus ja taustakuva. Leveys on jo aiemmin määritelty jossain muualla (tässä tapauksessa elementissä #runko), mutta toki sen voi tässäkin ilmoittaa. Tässä vielä laitettiin #header-palikalle taustaväri ja taustakuva.
Sitten itse asian ytimeen, eli navigaatioon. Navigaatio on laitettu järjestämättömäksi listaksi, jonka ympärille on kääritty div-palikka, jonka selektoriksi on ilmoitettu #navigaatio. Tarraudutaan tuohon selektoriin ja laitetaan koko navigaatio logo yläpuolelle:
#navigaatio {
position: absolute;
top: 0;
left: 0;
width: 740px;
height: 100px;
background: #ABD24E url(../kuvan/tiedostonimi.png) no-repeat 0 0;
}
Äskeisessä CSS-litaniassa tärkeää on oikeastaan vain kolme ylintä riviä — merkkaus voisi näyttää tiivistettynä tältä:
#navigaatio {
position: absolute;
top: 0;
left: 0;
}
Jos nyt rohkenisimme katsoa ulkoasun tilannetta, näyttäisi ulkoasu menneen aika pitkälti päin helvettiä. Laitetaan div-elementtiin, joka ympäröi koko ulkoasua, tällaista tavaraa:
#runko {
width: 740px;
position: relative;
padding-top: 100px;
}
Tuossa siis määritellään koko ulkoasun leveys, joka on kiinteät 740 kuvapikseliä, sekä julistetaan #runko-elementti relatiiviseksi. Tämän lisäksi tehdään ulkoasun yläpäähän tilaa navigaatiota varten asettamalla paddingia, ts. merkkaamalla padding-top: 100px;.
Se, kun laitettiin #runko-mötikkä relatiiviseksi, tarkoittaa oikeastaan vain sitä, että navigaatio (joka sijoitetaan absoluuttisesti) ymmärtää olevansa aidattu #runko-elementin sisään.
Tämän julkaisun kommentointi on suljettu.
Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 2 kommenttia. Tämä artikkeli on lokeroitu kategoriaan Korinaa. Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2006/09/01/asioiden-laittamista-sijoittamista.
Gocom kirjoitti 620 päivää sitten:
Hmm, taidat olla ajatustenlukija :D. Ajattelin itse juuri kirjoittaa omaan blogiini tämmöisen oppaan juuri position: absolute:sta, sillä tätä käytin itse blogini uudessa ulkoasussa, ja siitä se sitten nousi mieleeni :) – tosin nyt sinä ehdit ensin ;)
Oppaasta voisi sanoa että se on selkeä, ymmärrettä ja hyvä. Opettaa selkeästi miten tuo tehdään, niin että kokemattomampikin osaa tuon tehdä (tai vaikea on muiden puolesta varmasti sanoa, kaikillahan ei lusikka suussa kasva, saati sitten aivot päässä :) )
Koska en sitten kirjoita sitä opasta, niin lisään tähän perustelua “miksi käyttää tätä position: absolutea”: Se mahdollistaa sivun selkeämmän ulkoasun jos sivua luetaan ilman tyyliä tai kännykällä. Palikka on myös muusta riippumaton, esimerkiksi tämä on helppo ratkaisu saada useampi palsta/valikko vierekkäin. Esim. valikko ja hakukenttä vierekkäin. Se latautuu nopeasti ja se leijuu kaiken päällä. Voit siis esimerkiksi tämän avulla laittaa vaikka Sisältöön linkin sivuston yläreunaan helposti, ilman uutta palstaa.
Huom. Muistathan että tämäkin toiminto saattaa näkyä ie:ssä eritavalla. Sen voit tosin kirjoittamalla uuden tyylitiedoston ie:lle. Tämä palikka voi myös työntää muuta sisältöä ie:ssä jos vieressä on float tai toinen position: absolute, palikka. Myös ie:n scrollbar tuottaa vaikeuksia. On se ie outo kun ei mitään osaa oikein ;)
Petri Ikonen kirjoitti 619 päivää sitten:
Jeps. Kirjoita toki juttua tästä aiheesta, tätä on varmasti hyödyllistä käsitellä toisenkin bloggaajan. Saadaan uusi näkökulma asiaan ja toivottavasti vieläpä valotettua lisää tuota absolute/relative-juttua.
Internet Explorerin ja muidenkin selainten kanssa voi tulla ongelmia, jotka mainitsit, eli jokin elementti saattaa tosiaan esim. jäädä jonkin toisen alle tai päälle. Sitä varten voikin joko nostaa tai laskea absoluuttisesti sijoitetun elementin asemaa syvyyssuunnassa. Suosittelen kaikkia tutustumaan CSS:n z-index -ominaisuuteen.