[html/css] alleen tekst van list item underlinen

[pasta]

Ik moet voor school een project doen waarin ik ook een site moet bouwen. Het site bouwen lukt op zich al behoorlijk aardig, maar nu ben ik op een probleem beland waar ik niet kan uitkomen. Het zit zo:
Ik heb een list gemaakt voor een menu, in dit menu zitten een aantal links (zoals meestal is bij een menu;)). In het menu zit er ook een selected item, die ik dus wou underlinen. Nu weet ik wel hoe ik moet underlinen, maar als ik het list item underline, wordt het list-icoontje ook underlined. En ik wil dus dat hij alleen de tekst underlinet.
Ik zou graag een screenshot willen posten, maar ik zit nu op school, en daar vinden ze FTP-toegang niet al te leuk .
Hier de code die ik gebruik:

Cascading Stylesheet:

#selected-item
    {
      list-style: none inside url("images/list-selected-item.gif");
      text-decoration: underline; 
      color:#007900;
    }

_{Ik heb hem maar uniek gemaakt omdat een geselecteerd item toch altijd maar 1x voorkomt}
en hier roep ik hem aan:

HTML:

<li id="selected-item">Paragraaf 4</li>

_{Ik heb hier ff de rest overbodig gelaten omdat het m.i. niet van toepassing is}

Is er overigens misschien een mogelijkheid om de text-decoration: underline pas vanaf een bepaalde positie te laten beginnen? (in mijn voorbeeld dus na het list-icoontje)

[Verwijderd]

Allereerst: is het niet vreemd om het enige element wat niet aanklikbaar is te underlinen? Underline is eigenlijk voorbehouden aan links. Oud internet-stigma.

Verder:

Cascading Stylesheet:

#selected-item
    {
      list-style: none inside;
      text-decoration: underline; 
      color:#007900;
      background:url("images/list-selected-item.gif") no-repeat;
      padding-left:20px;
    }

Zou je kunnen proberen.

[Mafioso]

zeer weird dit, had net reply getypt, en toen ik Verstuur bericht deed was opeens alles weg

Maar zo zou het moeten werken:

Cascading Stylesheet:

#selected-item
    {
      list-style: none inside url("images/list-selected-item.gif");
      color:#007900;
    }
#selected-item span
    {
      text-decoration: underline;
    }

HTML:

<li id="selected-item"><span>Paragraaf 4</span></li>

[pasta]

Verwijderd schreef op 02 december 2003 @ 16:11:
Allereerst: is het niet vreemd om het enige element wat niet aanklikbaar is te underlinen? Underline is eigenlijk voorbehouden aan links. Oud internet-stigma.

Hmmz, ja.. heb je op zich wel gelijk in . Maar daarentegen heb ik de links een andere kleur gegeven, en verwacht ik dan ook wel dat de gebruiker slim genoeg is om het verschil te zien tussen de link en de selected-item

Verder:
[..]
Zou je kunnen proberen.

Na een beetje herpositionering (leuk scrabble woord ) ben ik erachter gekomen dat het idd werkt.. thnx

[ Voor 2% gewijzigd door pasta op 03-12-2003 11:33 . Reden: typo's ]

[Justice]

Niet iedereen kijkt op een kleurenscherm en 8% van de heren en 2% van de dames heeft op een of andere manier een kleur-interpretatie probleem dus als je bijvoorbeeld naast een andere kleur ook nog bold of op een andere manier aangeeft dat het een link is ben je goed bezig.

[ Voor 14% gewijzigd door Justice op 03-12-2003 12:04 ]

[pasta]

Aaarrrghh.. * pasta schopt IE,
ik dacht dat ik het nu wel goed uitgevoerd werd, en ik dacht ik ga het even testen in Internet Explorer (6.SP1 op Win2K, SP4).. en het blijkt dus dat Internet Explorer zoals wel vaker het geval is, compleet zn eigen regels er op naleeft.

Cascading Stylesheet:

    #selected-item
    {
      list-style: none inside;
      text-decoration: underline; 
      color:#007900;
      background:url("images/list-selected-sub-item.gif") no-repeat;
      padding-left:18px;
    }

HTML:

<li id="selected-item">Paragraaf 4</li>

En dankzij een tip over MSN Groups kan ik ook ff screenshotje sturen van hoe IE het verkl**t:

^^ Internet Explorer


^^ Mozilla

[Verwijderd]

*anne denkt dat je voor IE een hack in je HTML moet uitvoeren (zoals uitgelegd in comment 3 als ik me niet vergis)*

[pasta]

Jeuj aan alle mensen die me geholpen me geholpen hebben
Ik heb het uiteindelijk weten op te lossen door de CSS hack zoals die al genoemd was (door middel van een spans in mijn list te zetten). Daarbij heb ik gelijk maar een padding-left voor IE only (d.m.v. _padding-left ipv de normale).
Het ziet er dus in beide pagina's zo uit

[jonggoud.nl]

Misschien is de volgende website nog even interessant om door te nemen als je in de toekomst besluit om iets meer met je lists te doen:

http://css.maxdesign.com.au/listamatic2/index.htm