[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Opassivut > 9. Miten CSS annetaan listaelementeille

9. Miten CSS annetaan listaelementeille

Aiheet

Yleistä

Omien listakuvien käyttäminen eräs hauskimmista CSS-määrittelyjen tuomista mahdollisuuksista - ne ovat eräitä suosikki CSS-määrittelyjäni!

Lista elementtejä

CSS1 esimerkkejä

Alla on esimerkkejä CSS1:n mukaisten ominaisuuksien käytöstä ([M][S][Pw]):

ul li /* ei-järjestetyn listan listaelementit - koskee myös alilistoja, mikäli niitä ei ole erikseen määritelty */
{ list-style-type: disc; /* näille tarkoitetut CSS1-tason tyypit ovat disc, circle, square ja none; listatyyppi tulee aina määritellä sitä ajatellen, että listakuva ei ole käytettävissä */
list-style-image: url(pallo.gif);
list-style-position: outside; /* oletusarvo, joka aiheuttaa sisennyksen: arvo inside aiheuttaa sen, että seuraava mahdollinen rivi alkaa samalta tasolta kuin listan merkitsevät kuva tai kirjain */
ul li li /* edellisen listan sisään sijoittuvan seuraavan tason listan listaelementti - määrittely periytyy myös alilistoille, mikäli niitä ei ole erikseen määritelty */
{ list-style-type: disc;
list-style-image: url(pallo-vihrea.gif);
list-style-position: inside;
margin-left: -10px; }

ol li /* järjestetty lista - muista määritellä myös mahdolliset alilistat! */
{ list-style-type: upper-roman; /* näille tarkoitetut CSS1-tason tyypit ovat decimal, lower-alpha, upper-alpha, lower-roman, upper-roman; decimal on oletusarvo ja lower-alpha ja upper-alpha ovat aakkosia */
list-style-image: url(.gif); /*joskus voi käydä niin, että listaelementti saa listakuvan muuta kautta; jotta niin ei kävisi, on syytä määritellä olematon listakuva */
list-style-position: outside;}

Voit katsoa myös seuraavia esimerkkejä:

Listojen avulla voi luoda myös taulukkomaisia esityksiä, jollaisen näet sivulla Millaista terminologiaa olen käyttänyt [S][Pw] sekä eräässä aiemmin esillä olleessa mallissa ([M][S][Pw]).

Selainkohtaisia huomautuksia:

  1. Netscape 4.x:lle margin-arvot tulee antaa vain elementeille OL ja UL, ei elementille LI.

  2. Listakuvat eivät toimi Netscape 4.x -selaimissa.

  3. Netscape 4.x selaimissa text-align:justify ei toimi hyvin listoissa.

  4. Taulukkomaiset esitykset eivät toimi Netscape 4.x -selaimissa. Listojen sisällä oleva teksti on kuitenkin luettavissa, vaikka esitysten rakenne on totaalisen virheellinen.

  5. Jos list-style-position:inside alkaa lohkona, listamerkin tulee jäädä eri riviltä, sillä sen tulisi muodostaa oma elementtilaatikko. MS IE ja Opera eivät kuitenkaan seuraa tässä CSS-spesifikaatioita.

  6. Ominaisuuden list-style-position uudelleen määrittely alilistoille ei toimi MS IE 4.x Windows -selaimessa.

  1. MS IE -selaimet tekevät ainakin kehysten kanssa turhia vaakavierityspalkkeja, mikäli listaelementeillä on paljon asiasisältöä. Mikäli laitat ongelmallisen listaelementin (esim. UL) ulkopuolelle elementillä DIV (esim. div.kavennus {width:97%}) kavennuksen, ongelma voi hävitä.

  2. MS IE ei pysty käsittelemään oikein hyvin pitkiä ja monitasoisia listoja (esimerkkinä CSS-termilista[S] - jaoin se jaksoihin, mutta silti MS IE:llä on vaikeuksia vasemman reunan sisennysarvojen kanssa).

  3. Mozilla Gecko -selaimet määrittelevät listaelementtien välisen sisennyksen oletusarvon padding-ominaisuutta käyttäen kun Opera ja MS IE käyttävät margin-ominaisuutta. Jotta ongelmilta vältyttäisiin oletusarvoja muutettaessa sekä margin että padding ominaisuudet tulee määritellä. Jos vain margin ominaisuus muutetaan, se aiheuttaa erilaisen esitystavan, minkä voi nähdä testisivusta[S] ja siitä ottamistani kuvakaappauksista:

[Alku]

CSS2-CSS3 uutuuksia

CSS2:ssa on uusia listatyyppejä (esim. list-style-type:decimal-leading-zero ja list-style-type:lower-greek).

CSS2 tuo mahdollisuuden laittaa listoihin lisäkirjaimia sekä luoda niille laskimia (counters) näennäiselementtien (:before, :after) ja ominaisuuden content avulla. Käytän ominaisuutta content ennen kaikkea tämän sivuston tulostusversiossa.

CSS3 tulee lisäämään uusia arvoja (esim. radio) ominaisuudelle list-style-type, koska CSS3 tarjoaa paremman tuen HTML 4.0 lomake-elementeille. Myös joitakin uusia sisältöfunktioita (content functions) lisätään.

CSS:n tarkoituksena ei ole upottaa dokumenttiin satunnaisia merkkijonoa tai sisältöä. Ominaisuuden content idea on antaa mahdollisuus somistaa elementti pieniä kuvia or erikoismerkkejä (esim. *) käyttäen. Ominaisuus antaa myös mahdollisuuden näyttää normaalisti piiloon jäävän attribuutin arvo (content:attr()):

blockquote:before {content:"*"; float:left; width:1.0em; height:1.0em} /* * on käytetty ikään kuin listamerkkinä. */
blockquote:before {content:"*********************"; display:block; text-align:center} /* * on käytetty ikään kuin yläreunuksena. */
a[target="_blank"]:after {content: " <" attr(href) "> "} /* Sellaisten linkkien osoite näytetään, jotka vievät Web-sivuston ulkopuolelle. Osoitteen ympärille lisätään hieman tyhjää tilaa ja lisämerkkejä. */
W3C: CSS2: 12 Generated content, automatic numbering, and lists; 12.6 Markers and lists[Pw].

En käy lävitse tällä sivulla perusteellisemmin CSS2-C223 erikoisuuksia. Listaan niitä viimeisellä sivulla[S]. Seuraavaksi tarkastelemme taulukoita.

Selainkohtaisia huomautuksia:

  1. Mozilla Gecko -selaimet tukevat myös CSS2-tason listamäärittelyjä.

  2. Uudet näennäiselementit, tuotettu sisältö ja sitaatit toimivat Opera 4.x+:ssa ja Mozilla Gecko -selaimissa ([M][S][Pw]). Tosin Opera 5.1x-6.x uudet näennäiselementit eivät toimi taulukoiden alielementeille. Mozilla Gecko - ja Opera 7.x+ -selaimet tukevat content:url(); mutta vain kuvia voidaan käyttää. Syynä on se, että selainten suunnittelijat haluavat pitäytyä yllä CSS:n alkuperäistä henkeä - CSS ei ole tarkoitettu satunnaisen sisällön upottamiseen dokumenttiin.

  3. Jos sääntöjä ryhmitetään, content ominaisuus ei toimi Opera-selaimissa.

  4. Opera 4.+:ssa toimii myös automaattinen numerointi, joten Opera on paras selain viimeisimmän esimerkin tarkasteluun. Operassa on kuitenkin joitakin luotuun sisältöön liittyviä vikoja, jotka mainitsen CSS-kommenteissa[S]. Minulla on myös niistä testisivu[S].

[Alku]
   
Copyright Tapio Markula 1999-2003, Salo (kotisivu, s-posti - lisää s-postiosoiteeseen pisteellä erotettuna nimeni, Tapio Markula) (@dnainternet.net) - ei julkiskäyttöön ilman sopimusta.
Get Expression!
Editori, jolla saa luotua standardit täyttäviä HTML ja XML dokumentteja. Tämän sivuston sivut on useimmissa tapauksissa tarkastettu Dave Raggetin (W3C) tekemällä HTML-Tidy apuohjelmalla ja satunnaisesti W3C-organisaation virallisella koodintarkastusohjelmalla. Useimpien sivujen syntaksin pitäisi olla sopusoinnussa W3C:n XHTML 1.0 spesifikaation kanssa. Testaa tämä sivu!
Informaatiota selaimista, jotka näyttävät tai tulostavat tämän sivuston parhaiten.
[Hae Opera] [Hae Mozilla!]
CSS-opasta on viimeksi muutettu 20.12.2004