List-style-type

[pgdx]

Finnes ikke den list-style-typen som gjør at du får en "-" foran hvert alternativt, og er ikke det i så tilfelle veldig rart?

[Lokaltog]

Tror ikke den finnes, men du kan jo alltids bare lage en gif-fil som ser ut som det, for så å sette list-style-image:url(...) til den fila..

[pgdx]

Hater bilder i listen...

 

Men jeg skriver heller bare en "-" foran kvar link.

[haugsand]

Litt nede på sida her står det en forklaring.

 

Vi kunne brukt

 

li:before {

content: "\2013 \0020";

}

 

Men siden IE ikke støtter denne metoden fullt ut, er vi nødt til å bruke denne:

 

ul {

list-style: none;

margin-left: 0;

padding-left: 1em;

text-indent: -1em;

}

 

Der -- plasseres først i li.

[epsil]

Men jeg skriver heller bare en "-" foran kvar link.

Dette er feil. Du skal aldri bruke en bindestrek som punktmerke i en liste, men derimot en tankestrek, som har Unicode-plasseringen U+2013. I både Mozilla- og Opera-støttet CSS2 blir dette slik (følgende kode er temmelig lik den satyrium kom med):

 

ul {
    list-style: none;
    margin: 0;
    padding: 0 1em;
}
ul li:before {
    content: "\2013\A0"; /* setter inn en tankestrek
                            etterfulgt av et hardt mellomrom */
    display: marker;
    padding-right: .25em;
}

margin- og padding-deklarasjonene er bare min måte å oppnå passende avstander på; du kan selvsagt justere disse etter behov.

 

Men så var det IE, da – som ikke støtter verken content-egenskapen eller pseudoelementet :before, og som følge av den øverste stilregelen ikke viser punktmerker i det hele tatt. Den eneste måten å (til en viss grad) få det som vi ønsker på er ved å bruke et et lite bilde i GIF- eller PNG-format (bruk PNG!), som vi setter inn foran hvert li-element med stilregelen

 

ul {
    list-style-image: url("strek.png")
}

Vi ønsker selvsagt ikke at denne stilregelen skal brukes av Mozilla og Opera, da dette vil føre til to streker foran hver li (urk). Derfor plasserer vi heller denne regelen i et eget stilark kun for Internet Explorer, som vi i HTML-dokumentene refererer til med følgende kode:

 

<!--[if IE]>
 <link href="IE.css" rel="stylesheet" type="text/css">
<![endif]-->

Bildeløsningen er en svak løsning, som ikke skalerer så veldig bra. Men den er fortsatt mye bedre enn å kludre til markeringen med «presentasjonelle» streker, og gjør at listene også vil fungere i nettlesere uten CSS-støtte (fordi strukturen i dokumentet er bevart).

Endret 3. mars 2004 av ePsiLON47