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 6822 päivää sitten, eli lauantaina. Kirjoitukseen on julkaistu kommentteja 3 kpl. Kaikki kirjoituksen saamat kommentit löytyvät suoraan tämän tekstimötikän alapuolelta.
Selaat tällä hetkellä blogimerkintää Listan rivit laatikoiksi. Se julkaistiin 04. ä. 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!
