Luettelon rivit nappuloiksi
- Julkaistiin sunnuntaina 8. tammikuuta 2006.
- Ei saa kommentoida!
- Luettu 462 kertaa
- Tagit: css
Tämän blogin ulkoasun oikeassa laidassa näkyy kaksi tuollaista oranssia nappulaa. Nappuloissa lukee RSS ja Atom. Nappulat ovat linkkejä RSS- ja Atom-syötteisiin.
Nappulat on rakennettu tavallisen järjestämättömän listan lista-alkioista. Alla esimerkki tällaisesta luettelosta.
<ul
><li><a href="#">RSS</a></li
><li><a href="#">Atom</a></li
></ul>
Koodiesimerkissä ehkä ainoa kummallinen juttu on noiden väkästen siirtäminen seuraavan rivin alkuun. Väkästen siirtäminen poistaa tyhjän tilan, joka muuten jäisi luettelorivien väliin kun luettelo "kaadetaan" (ts. kun luettelorivit esitetään vaakatasossa).
Koodiesimerkin linkkien arvoksi on asetettu risuaita — sen tilalle luonnollisesti kannattaa vaihtaa oman linkin URL-osoite.
Luettelon ulkoasun muokkaaminen tapahtuu CSS:llä. Että saadaan hieman tarttumapintaa luettelon muovaamista varten, laitetaan luetteloon vaikkapa id-selektori, jonka nimi on tässä esimerkissä "syotteet":
<ul id="syotteet"
><li><a href="#">RSS</a></li
><li><a href="#">Atom</a></li
></ul>
Tässä vaiheessa on saatu valmiiksi HTML-merkkaus. Laitetaanpas nyt vuorostaan nappuloiden ulkoasu ojennukseen.
#syotteet {
list-style: none;
}
Yllä näkyvä CSS-merkkaus poistaa luettelorivien alussa näkyvät kuvakkeet. Järjestämättömän listan luettelorivien alussa taitaa yleisesti olla muodissa sellainen pallukka tai ympyrä. Pallukoita pullukoita tai numeroita, neliöitä ei nyt tässä tapauksessa tarvita koristeeksi lainkaan.
No niin. Nyt päästään asiaan: halutaan tehdä koko nappula klikattavaksi, siksi alapuolella näkyvä koodi on asetettu vaikuttamaan luettelorivin alkion sisällä olevaan linkkiin.
#syotteet li a {
text-decoration: none;
color: #FFF;
font-weight: bold;
display: block;
float: left;
padding: 5px;
width: 72px;
padding: 2px 0;
text-align: center;
background: url(http://www.kuopassa.com/weblog/
images/syote_bg.png) repeat-x 0 100%;
border: 1px outset #FFF;
margin: 0 2px;
}
Koodi #syotteet li a tarkoittaa sitä, että tämä CSS-merkkaus vaikuttaa linkkiin (a), joka on luettelorivin sisällä (li), ja luettelorivi taas on luettelon #syotteet sisällä.
Koodiesimerkissä toisella rivillä otetaan pois linkin koristelut (alleviivaus normaalisti). Kolmannella rivillä kerrotaan linkin väri, joka on valkoinen (#FFF). Neljäs rivi taas laittaa tekstin lihavoiduksi (bold).
Ehkä tärkein rivi on n:o 5, sillä siinä murskataan linkin oma tahto ja alistetaan se tottelemaan.
Koska halutaan, että nappulat ovat vaakatasossa, on laitettava koodi float: left. Voidaan tietysti laittaa myös koodi float: right ja katsoa mitä se tekee...
Esimerkkikoodissa kerrotaan lisäksi nappuloille asetettavan reunaviivan ominaisuuksista. Tässä esimerkissä viiva on valkoinen ja paksuudeltaan yksi pikseli. Viiva vielä muovataan näyttämään korostetulta muotoilukäskyllä outset. Reunaviivan CSS-merkkaus näyttää siis tältä:
border: 1px outset #FFF;
Jotta RSS- ja Atom-namiskat näyttäisivät, tai edes jonkin verran etäisesti muistuttaisivat, siltä miltä niiden oletetaan näyttävän, on meidän vielä laitettava väriä nappuloille. Kuorrutetaan siis nappulat oranssilla taustavärillä:
background: url(http://www.kuopassa.com/weblog/
images/syote_bg.png) repeat-x 0 100%;
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.
Luetuimpia blogimerkintöjä
- Visa Electronin kytkeminen PayPaliin. (20490 lukukertaa)
- [REC] on hieno, kauhea. (9275 lukukertaa)
- Ajattelin englanniksi bloggaamista (8626 lukukertaa)
- Pyöristetyt kulmat jQueryn avulla (8554 lukukertaa)
- AdBlockin käyttäjien tunnistamista. (8208 lukukertaa)
Blogimerkintää "Luettelon rivit nappuloiksi" muokattiin viimeksi 1931 päivää sitten, eli lauantaina 28.10.2006 kello 19:07.Tähän kirjoitukseen ei ole naputeltu yhtään kommenttia.
Oho! Tämän julkaisun kommentointi onkin jo suljettu. Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 0 kommenttia. Tämä artikkeli on lokeroitu kategoriaan Sekalaiset. Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2006/01/08/luettelon-rivit-nappuloiksi.
Korinaa kuopasta: Luettelon rivit nappuloiksi.
Selaat tällä hetkellä blogimerkintää Luettelon rivit nappuloiksi.. Se julkaistiin %. päivä tammikuuta 2006. 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!