nicht angemeldet
CSS für verschachtelte Listen
Hallo Leute,
war lange nicht zu Gast hier (bisher hat mir in den meisten Fällen die Suchfunktion geholfen), habe jetzt aber doch ein Problem, für das ich keine Lösung finden kann.
Mein Problem: (auf den ersten Blick sieht es ganz einfach aus): ich möchte Listen verschachteln und mit CSS die Einträge unterschiedlich gestalten. Die Hauptpunkte (beispielsweise) grün und unterstrichen und die Unterpunkte rot und nicht unterstrichen.
Dazu habe ich das hier gemacht:
.
.
.
<style type="text/css">
ul li {font-family: verdana;font-size:12px;color:green; text-decoration:underline; }
ul li ul li {font-family: verdana;font-size:10px;color:red; text-decoration:none; }
</style>
.
.
.
<BODY>
<ul>
<li>Hauptpunkt1
<ul>
<li>Unterpunkt1</li>
</ul>
</li>
</ul>
.
.
.
Es klappt auch alles, bis auf die text-decoration. Das Problem ist, dass auch die Unterpunkte unterstrichen sind, was sie aber nicht sein sollten. Ich habe auch schon einiges herumexperimentiert mit Klassen für die li-Elemente, aber es entsteht immer der gleiche Effekt. Wenn ich es umgekehrt probiere (Unterpunkte unterstrichen, Hauptpunkte nicht unterstrichen) geht es.
Ach ja, im IE funzt es, mein Problem tritt im Opera und Mozilla auf.
Was mache ich falsch?
Danke und Gruß
Torsten
-
hi,
Es klappt auch alles, bis auf die text-decoration. Das Problem ist, dass auch die Unterpunkte unterstrichen sind, was sie aber nicht sein sollten.
http://forum.de.selfhtml.org/archiv/2004/12/t95595/#m580102
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hi,
danke, ich habe jetzt verstanden, wo das Problem liegt und warum dieser Effekt auftritt.
Ich halte das trotzdem zumindest für ein "bemerkenswertes" Browser-Verhalten, da ja die anderen Attribute (Schriftfarbe, -art, -größe) offenbar akzeptiert werden und die "Elternwerte" wie gewünscht überschreiben. Nur beim underline eben nicht und auch nur in einer Richtung nicht. btw: sehr schöner metapher mit dem Karton, obwohl ich eine Weile nachdenken musste, was Du meinst .. ;-) Was ich will, ist scheinbar ein Loch in den Zimmer-Fussboden sägen ... ;-)Danke und Gruß
Torsten
-
Hi,
ich habe noch eine Nachfrage:
heisst das in der Endkonsequenz tatsächlich, dass ich ein underline in keinem Kindelement mehr loskriege? Oder gibst dafür eine konstruktive Lösung?Torsten
-
hi,
Ich halte das trotzdem zumindest für ein "bemerkenswertes" Browser-Verhalten, da ja die anderen Attribute (Schriftfarbe, -art, -größe) offenbar akzeptiert werden und die "Elternwerte" wie gewünscht überschreiben. Nur beim underline eben nicht und auch nur in einer Richtung nicht.
Nein, das ist durchaus logisch.
Das Unterelement enthält selber die Schrift, also kannst du diese auch nach belieben für das Unterlement spezifisch formatieren.
Die underline gehört aber nicht zum Unterelement - also kannst du diese nicht durch Formatieren des Unterelementes "loswerden".ich habe noch eine Nachfrage:
heisst das in der Endkonsequenz tatsächlich, dass ich ein underline in keinem Kindelement mehr loskriege? Oder gibst dafür eine konstruktive Lösung?Du könntest ein weiteres Element in die Listelemente auf der Hauptebene schachteln (wenn dich diese zusätzlichen Elemente vom strukturellen Gesichtspunkt her nicht stören), bspw. einen span - und dann nur diesem eine underline verpassen.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hi,
Die underline gehört aber nicht zum Unterelement - also kannst du diese nicht durch Formatieren des Unterelementes "loswerden".
Ich verstehe die Logik, finde es aber trotzdem merkwürdig (ich weiss, das klingt, als ob ich mir selber widerspreche .. ;-)
Ich hätte mir gewünscht, dass ich bei expliziter Angabe von "none" für das Kindelement diese Eigenschaft auch entsprechend überschreiben kann.
Wenn das Elternelement rot ist und das Kindelement grün, wird die Schrift ja auch nicht braun, nur weil schon ne rote Schrift "drunterliegt". Im Endeffekt ist underline doch nichts anderes als eine "Schrifteigenschaft" wie die Farbe auch, dachte ich zumindest bisher ...
Und dass ich mit dieser Meinung nicht alleine stehe, zeigt ja das Verhalten des viel (und oft zu recht ;-) gescholtenen IE...
Aber wie gesagt, ich verstehe jetzt warum es so ist...Du könntest ein weiteres Element in die Listelemente auf der Hauptebene schachteln (wenn dich diese zusätzlichen Elemente vom strukturellen Gesichtspunkt her nicht stören), bspw. einen span - und dann nur diesem eine underline verpassen.
ja, das war meine Vermutung bzw. Befürchtung, dass es da keinen anderen Weg gibt. Na ja, egal: Problem erkannt, Problem gebannt .. ;-)
Dankeschön nochmal
Gruß Torsten
-
hi,
Ich hätte mir gewünscht, dass ich bei expliziter Angabe von "none" für das Kindelement diese Eigenschaft auch entsprechend überschreiben kann.
Da die Eigenschaft text-decoration nicht vererbt wird, kannst du sie auch nicht überschreiben.
Wenn das Elternelement rot ist und das Kindelement grün, wird die Schrift ja auch nicht braun, nur weil schon ne rote Schrift "drunterliegt".
Eben da liegt der entscheidende Unterschied:
Es liegt in so eine Falle eben keine Schrift "drunter".
Das Unterelement hat seinen _eigenen_ Textinhalt, und dem kannst du natürlich gerne eine Farbe geben.Im Endeffekt ist underline doch nichts anderes als eine "Schrifteigenschaft" wie die Farbe auch, dachte ich zumindest bisher ...
underline hingegen liegt (in diesem Falle) wirklich "drunter" - als Eigenschaft des umgebenden Elements, und damit kannst du sie aus dem Unterlement heraus nicht mehr "wegwischen".
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-
-