Listoille löytyy käyttöä. Laitetaan tänään luettelorivit laatikoiksi. Tätä ideaa on sovellettu mm. tässä blogissa, jossa jokaisen blogimerkinnän otsikon alapuolella esitetään järjestämätön lista. Listassa on kolme riviä, jotka on muljautettu vierekkäin.
Luodaan ensin järjestämätön lista ja pistetään sinne luettelorivejä:
<ul>
<li>Julkaistu: pp.kk.vvvv</li>
<li>Kategoria: <a href="#">Sekalaista</a></li>
<li>Kommentointi sallittu (0 kpl)</li>
</ul>
Okei. Jatketaan listan kehittelemistä pistämällä listan aloittavaan tagiin jokin id-selektori, jotta päästään käsittelemään listan ulkonäköä CSS:n avulla. Esimerkissä lista on jalostettu seuraavanlaiseksi:
<ul id="horisontaali-lista">
<li>Julkaistu: pp.kk.vvvv</li>
<li>Kategoria: <a href="#">Sekalaista</a></li>
<li>Kommentointi sallittu (0 kpl)</li>
</ul>
Okei, taas. Ei ollut kovin hankalaa. Yllä näkyvässä koodiesimerkissä listan id-selektorin arvoksi on annettu horisontaali-lista. Siihen tarraudutaan tyylitiedoston kautta. Otetaan listan koko runko käsiteltäväksi ja laitetaan sinne muutamia peruskyykytyksiä:
ul#horisontaali-lista {
list-style: none;
padding: 10px;
margin: 0;
text-align: center;
font: 0.8em "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #666;
letter-spacing: -1px;
}
Tuossa yllä näkyy nyt aikamoinen mötikkä noita CSS-määrittelyjä. Ylimmäinen koodirivi (eli se kohta, missä lukee ul#horisontaali-lista) tarkoittaa sitä, että nyt on kyykytettävänä järjestämätön lista (ul), jonka id-selektorin nimi on horisontaali-lista.
Toiseksi ylimmäinen CSS-rivi poistaa listan oletusarvoisesti esittämät symbolit, vai mitä lie palleroita ne ovatkaan. Ilman tätä koodiriviä jokaisessa luettelon rivissä näkyisi ennen luettelorivin sisältöä jonkinlainen symboli. Pallero. You know. Thingy.
CSS-määrittelyissä kajotaan myös luettelon ympärille jätettävään tyhjään tilaan (ts. padding) ja marginaaliin. Marginaaliksi asetettiin esimerkissä 0. Se tarkoittaa, ettei marginaalia jätetä lainkaan luettelon ympärille. Luettelon sisältämä teksti tasataan keskelle (text-align: center). Kirjasimen kooksi annetaan esimerkissä 0.8em ja ensisijaiseksi fonttiperheeksi vikitellään Trebuchet MS -nimistä kirjasinta. Listassa esitettävän teksti on väriltään vaaleahko harmaata. Kirjasinten välistystä kutistetaan ihan vähän.
Tältä näyttää lista. Ei ole kovin kummoinen näky. Vielä. Jatketaan kehittelemistä. Kosketaan seuraavaksi listan luetteloriveihin:
ul#horisontaali-lista li {
display: inline;
padding: 5px 10px;
margin-right: 5px;
}
Tuo yllä näkyvä CSS-koodimötikkä ottaa käsiteltäväksi jokaisen listan luettelorivin. Luettelossa voi olla rivejä yksi tai sata, mutta jokainen niistä kokee sen kohtalon, jonka tähän koodinpätkään kirjoitamme.
Ensimmäiseksi luettelorivit pitää kellistää. Laittamalla koodirin display: inline saamme luettelorivit hyllymään keskenään. Oletusarvoisesti listan luettelorivit kulkevat kukin omalla rivillään, mutta laittamalla ne inline-elementeiksi, jokainen rivi luiskahtaa vierekkäin.
Luettelon riveille annetaan vähän tyhjää tilaa ympärilleen. Tässä esimerkissä padding on jokaisella luettelorivillä seuraavanlainen:
Esimerkissä annetaan lisäksi luetteloriveille 5 pikseliä marginaalia luettelorivin loppuun. Eli jokainen rivi saa oikeaan laitaan 5 kuvapikselin verran hajurakoa.
Lista on jo lähes valmis. Viimeinen vaihe on koristella yksittäisten listan rivien esitystavat. Laitetaan luetteloriveille taustaväri ja -kuva, sekä ympäröidään ne reunaviivoin. Edellisessä vaiheessa riveille annettu marginaali pitää huolen siitä, ettei esimerkin laatikot pääse yhtymään keskenään — kyseisessä tapauksessa marginaalittomat rivit eivät ole kaunista katseltavaa. No joo. Jatketaan siis luettelorivien koristelemista. Pistetään uutta CSS-koodia saman selektorin sisälle kuin äskeisessäkin vaiheessa:
ul#horisontaali-lista li {
display: inline;
padding: 5px 10px;
margin-right: 5px;
background: #E8E8E8 url(10.png) no-repeat 0 0;
border-top: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
}
Nyt meillä on taustaväri jokaiselle listan riville. Taustaväri on harmaata ja värikoodi on #E8E8E8. Taustavärin lisäksi jokaiselle luetteloriville ilmoitetaan taustakuva. Taustakuvalle ilmoitetaan, ettei se saa toistua (no-repeat) ja se sijoitetaan vasempaan yläkulmaan. Taustakuva on tässä tapauksessa vain koriste, hillitty detalji.
Nyt myös luettelorivit saavat ympärilleen ääriviivat. Esimerkissä reunaviiva ei ole jokaisella yksittäisen rivin laidalla samanlainen. Vasemman laidan ja ylälaidan reunaviiva on paksuudeltaan vain 1 kuvapikseli ja sen väri on täysin sama kuin taustakuvan väri. Luettelorivien oikean laidan ja alalaidan reunaviivan paksuus on 2 pikseliä ja sen värisävy on hieman tummempi kuin em. viivojen. Reunaviivojen paksuutta ja väriä säätämällä voi yrittää luoda kolmiulotteisuutta laatikoihin.
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ää "Listan rivit laatikoiksi" muokattiin viimeksi 1276 päivää sitten, eli lauantaina 10.03.2007 kello 17:05. Kirjoitukseen on julkaistu kommentteja 3 kpl. Kaikki kirjoituksen saamat kommentit löytyvät suoraan tämän tekstimötikän alapuolelta.
Ihan nättiä jälkeä pelkällä tyylitiedoston muokkaamisella näköjään saa aikaiseksi :)
Mukava merkintä, tästä voisi vaikkapa ottaa itsekin mallia.
Vielä jäi uupumaan tuosta blogimerkinnästä tällainen pienellä präntätty:
Jätin tässä esimerkissä laittamatta nettiin live-demoa, joka toivottavasti kannustaa kokeilemaan ohjetta käytännössä.
Mitäs muuten, Kalle, sinulle kuuluu? :-) Et olekaan käynyt täällä kommentoimassa pitkään aikaan. Why is that so, Kalle? You’ve got some explaining to do, mister. Yes sir, you do.
Moro
Voi muuten olla hyvä idea jättää demo tekemättä, saa käyttää asteen verran enemmän omaa päätään kun pähkäilee noita :)
Haa vieläpä muistit minut. Tosiaan, on nämä nettisaitit jääneet hieman vähemmälle viime aikoina, innostuksen lakkautti viimeistään kotisivutilani poisto arkun serveriltä, koska en ilmeisesti ollut lähettänyt varmistusta sivutilan käyttöönotosta. Omaa tyhmyyttänihän se vain oli.
Tässä on tullut leikittyä koneella lähinnä kuvanmuokkauksen parissa. Vetäisin jouluna lahjapaketista Canon EOS 400D:n ja sillä on tullut nyt hieman leikittyä. Tarkoituksena olisi lisäillä ottamiani valokuvia myös sivulleni, jahka löydän jonkun hyvän ja muokattavissa olevan kuvagalleria ohjelman joka tekisi thumbit automaattisesti. Zenphoto gallerya kokeilin, mutta tämä ei lataa sivuille kuvia admin-paneelin kautta, enkä ole jaksanut tapella sen kanssa enempää.
Näin. Tuossapa hieman selityksiä kysymyksiisi. Mutta nyt ollaan taas takaisin kuvioissa ja entistäkin idearikkaampina :)
Oho! Tämän julkaisun kommentointi onkin jo suljettu. Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 3 kommenttia. Tämä artikkeli on lokeroitu kategoriaan Sekalaiset. Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2007/03/04/listan-rivit-laatikoiksi.
Selaat tällä hetkellä blogimerkintää Listan rivit laatikoiksi.. Se julkaistiin %. päivä maaliskuuta 2007. 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!
