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.
Koska aika on arvokasta, kannattaa tutustua tähän alla näkyvään listaan jos mielit löytää tämän nettisivuston parhaat kirjoitukset. Tässä alapuolella on kaikkein luetuimpia kirjoituksia Korinaa kuopasta -blogin aarreaitasta. Kirjoitukset on järjestetty suosituimmuusjärjestykseen siten, että luettelon kärjessä on tällä hetkellä eniten lukukertoja saaneet kirjoitukset.
Blogimerkintää "Asioiden laittamista, sijoittamista." muokattiin viimeksi 6088 päivää sitten, eli torstaina. Kirjoitukseen on julkaistu kommentteja 2 kpl. Kaikki kirjoituksen saamat kommentit löytyvät suoraan tämän tekstimötikän alapuolelta.
Selaat tällä hetkellä blogimerkintää Asioiden laittamista, sijoittamista. Se julkaistiin 01. ä. Voit siirtyä lukemaan blogin tuoreimpia kirjoituksia klikkaamalla tiesi weblogin etusivulle. Tässä blogissa julkaistaan kiinnostaviksi katsomiani asioita, joten jos tiedät kiinnostavan nettiin liittyvän aiheen, josta kannattaisi kirjoittaa, laita palautetta!
