<ul> <li> <ul> <li> Verschachtelung Schriftfarbe Problem

[182]

Hallo zusammen :)

ich habe wie die Überschrift schon sagt ein Problem mit der Schriftfarbe bei einer verschachtelung von ul's.

ich arbeite an einer Typo3 seite, für die ich das Template selber gestalte.
In meinem Dreamweaver sieht das Template sauber/richtig aus im Typo3 zeigt er mir aber die falsche Schriftfarbe an.

Es handelt sich dabei um mein Menü. Ich gehe davon aus das Dreamweaver irgendwie ein Auge zudrückt und es deshalb dort fuktioniert und Typo3 nichts zudrückt :D
Das Menu hat ein schwarzen Hintergrund und eine beige Schriftfarbe, bei klick drauf und öffnen des Submenüs wird es vertauscht, beiger Hintergrund und schwarze schrift. DA HAKT ES - der Hintergrund wird beige aber die Schrift bleibt auch beige :(

also hier mal der abschnitt wo ich die ul's nutze

<ul id="navlist">  
<li class="normal"><a href="#">Item one</a></li>  
<li class="active">Item two  
  
    <ul id="subnavi">  
        <li class="subactive">Sub-item one</li>  
        <li class="subnormal"><a href="#">Sub-item two</a></li>  
        <li class="subnormal"><a href="#">Sub-item three</a></li>  
    </ul>  
</li>  
<li class="normal"><a href="#">Item three</a></li>  
<li class="normal"><a href="#">Item four</a></li>  
<li class="normal"><a href="#">Item five</a></li>  
</ul>

Und hier der entsprechende CSS Teil dazu
(falls es extremst falsch sein sollte bitte nicht lachen, bin nicht so doll in CSS)

  
#navlist  
{  
padding-left: 0;  
margin-left: 0;  
border-bottom: 1px solid gray;  
width: 160px;  
color:#f6e0b1;  
    font-size:10px;  
}  
  
#navlist li  
{  
    color:#f6e0b1;  
    font-size:11px;  
list-style: none;  
margin: 0;  
padding: 0.25em;  
border-top: 1px solid gray;  
}  
  
#navlist li a,.active{  
text-decoration: none;  
padding:0 15px 0 0;  
color:#f6e0b1;  
    font-size:11px;  
    font-weight:bold;  
    }  
  
#navlist li ul{  
    padding-left: 0;  
margin-left: -3px;  
/*border-bottom: 1px solid gray;*/  
width: 160px;  
color:#000;  
background-color:#f6e0b1;  
    font-size:11px;  
    text-align:left;  
  
}  
  
  
#navlist li ul li,.subactive, .subnormal{  
    color:#000;  
    font-size:11px;  
list-style: none;  
margin: 0;  
padding:0.25em;  
/*border-top: 1px solid gray;*/  
text-align:left;  
background-color:f6e0b1;  
    background-image: url(arrow.gif);  
background-repeat: no-repeat;  
background-position: 0px 3px;  
  
}  
#navlist li ul li a, .subnormal,.subactive{  
    text-decoration: none;  
    color:#000;  
    padding:0 0 0 15px;  
    font-size:11px;  
    font-weight:bold;  
    text-align:left;  
}

habe auch noch mal weiter unten im CSS das hier probiert

.subactive{color:#000;}  
.subnormal{color:#000;}

in der Hoffnung das er die Schrift evtl. dann Schwarz macht, nichts da.

[ChrisB]

Hi,

Das Menu hat ein schwarzen Hintergrund und eine beige Schriftfarbe, bei klick drauf und öffnen des Submenüs wird es vertauscht, beiger Hintergrund und schwarze schrift. DA HAKT ES - der Hintergrund wird beige aber die Schrift bleibt auch beige :(

Dann liegt vermutlich ein Problem mit der Spezifität der Selektoren vor.
Informiere dich zu dem Stichwort, und nutze dann bspw. Firebug um zu überprüfen, welche Formatierungen wirklich zur Anwendung kommen, bzw. welche Regeln von solchen mit höherer Spezifität überschrieben werden.

MfG ChrisB

[182]

Hi,

Das Menu hat ein schwarzen Hintergrund und eine beige Schriftfarbe, bei klick drauf und öffnen des Submenüs wird es vertauscht, beiger Hintergrund und schwarze schrift. DA HAKT ES - der Hintergrund wird beige aber die Schrift bleibt auch beige :(

Dann liegt vermutlich ein Problem mit der Spezifität der Selektoren vor.
Informiere dich zu dem Stichwort, und nutze dann bspw. Firebug um zu überprüfen, welche Formatierungen wirklich zur Anwendung kommen, bzw. welche Regeln von solchen mit höherer Spezifität überschrieben werden.

MfG ChrisB

Das habe ich vermutet bin auch schon dabei aber leider noch nicht erfolgreich... ich hatte die Hoffnung das evtl. jemand mit geschulten Blick direkt sieht wo der Hund begraben ist :(

Danke für die Idee mit Firebug!

[182]

Das habe ich vermutet bin auch schon dabei aber leider noch nicht erfolgreich... ich hatte die Hoffnung das evtl. jemand mit geschulten Blick direkt sieht wo der Hund begraben ist :(

Danke für die Idee mit Firebug!

ich komm einfach nicht dahinter auch nicht mit firebug :(
sehe zwar jetzt das es, wie vermutet an der Vererbung liegt, doch ich kriege es nicht hin. er will es nicht akzeptieren

[Gunnar Bittersmann]

@@182:

nuqneH

Das Menu hat ein schwarzen Hintergrund

Nein. Wo sollte der auch herkommen?

bei klick drauf und öffnen des Submenüs wird es vertauscht, beiger Hintergrund und schwarze schrift.

Davon ist nichts zu sehen. Online-Beipiel, bitte.

Qapla'

[MudGuard]

Hi,

<ul id="navlist">
<li class="normal"><a href="#">Item one</a></li>
<li class="active">Item two

#navlist li
{
    color:#f6e0b1;
    font-size:11px;
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
}

#navlist li a,.active{

Dir ist bewußt, daß auf das <li class="active">
sowohl die Regeln, die Du für
.active
als auch die, die Du für
#navlist li
definiert hast, zutreffen, wobei letztere ein höheres Gewicht haben.

Insbesondere bedeutet
#navlist li a, .active { /*irgendwas*/ }
dasselbe wie
#navlist li a { /*irgendwas*/ }
.active { /*irgendwas*/ }

Es bedeutet NICHT:
#navlist li a { /*irgendwas*/ }
#navlist li .active { /*irgendwas*/ }

#navlist li ul li,.subactive, .subnormal{

Auch hier: das bedeutet:
.subactive { /* irgendwas */ }
.subnormal { /* irgendwas */ }
#navlist li ul li { /* irgendwas */ }

Wozu brauchst Du da überhaupt in jedem li und im inneren ul eine Klasse?
Die sind doch alle aufgrund der Struktur einfach ansprechbar.
Z.B. das innere ul über #navlist ul

cu,
Andreas

[182]

Hi,

<ul id="navlist">
<li class="normal"><a href="#">Item one</a></li>
<li class="active">Item two

#navlist li
{
    color:#f6e0b1;
    font-size:11px;
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
}

#navlist li a,.active{

Dir ist bewußt, daß auf das <li class="active">
sowohl die Regeln, die Du für
.active
als auch die, die Du für
#navlist li
definiert hast, zutreffen, wobei letztere ein höheres Gewicht haben.

Insbesondere bedeutet
#navlist li a, .active { /*irgendwas*/ }
dasselbe wie
#navlist li a { /*irgendwas*/ }
.active { /*irgendwas*/ }

Es bedeutet NICHT:
#navlist li a { /*irgendwas*/ }
#navlist li .active { /*irgendwas*/ }

#navlist li ul li,.subactive, .subnormal{

Auch hier: das bedeutet:
.subactive { /* irgendwas */ }
.subnormal { /* irgendwas */ }
#navlist li ul li { /* irgendwas */ }

Wozu brauchst Du da überhaupt in jedem li und im inneren ul eine Klasse?
Die sind doch alle aufgrund der Struktur einfach ansprechbar.
Z.B. das innere ul über #navlist ul

cu,
Andreas

Hi Andreas

danke für die Tipps und Ratschläge,
ich habe jetzt noch mal mein CSS Teil angepasst soweit ich dich verstanden habe. Jedoch zeigt er mir jetzt alle Menüpunkte, egal ob Oberpunkt oder submenü in blauer farbe an und besuchte Menüpunkte in lila.
dabei habe ich doch in meinem CSS die Farbe ganz klar festgelegt?!
hier mein upgedatetes CSS Skript

  
#navlist{  
/*color:#f6e0b1;*/  
padding-left:0;  
margin-left:0;  
border-bottom:1px solid gray;  
width:160px;  
font-size:11px;  
font-weight:bold;  
}  
#navlist ul{  
/*color:#000;*/  
padding-left: 0;  
margin-left: 0;  
width: 160px;  
background-color:#f6e0b1;  
font-size:11px;  
text-align:left;  
font-weight:bold;  
}  
/*------*/  
.normal{  
color:#f6e0b1;  
font-size:11px;  
list-style: none;  
margin: 0;  
border-top: 1px solid gray;  
padding:0.25em 15px 0 0;  
font-weight:bold;  
}  
.active{  
color:#f6e0b1;  
font-size:11px;  
list-style: none;  
margin: 0;  
border-top: 1px solid gray;  
padding:0.25em 15px 0 0;  
font-weight:bold;  
}  
.subnormal{  
color:#000;  
font-size:11px;  
list-style: none;  
margin: 0;  
padding:0.25em 0 0 15px;  
border-top: 1px solid gray;  
text-align:left;  
background-color:f6e0b1;  
background-image: url(arrow.gif);  
background-repeat: no-repeat;  
background-position: 0px 3px;  
  
}  
.subactive{  
color:#000;  
font-size:11px;  
list-style: none;  
margin: 0;  
padding:0.25em 0 0 15px;  
border-top: 1px solid gray;  
text-align:left;  
background-color:f6e0b1;  
background-image: url(arrow.gif);  
background-repeat: no-repeat;  
background-position: 0px 3px;  
}  

[Beat]

ich habe jetzt noch mal mein CSS Teil angepasst soweit ich dich verstanden habe. Jedoch zeigt er mir jetzt alle Menüpunkte, egal ob Oberpunkt oder submenü in blauer farbe an und besuchte Menüpunkte in lila.
dabei habe ich doch in meinem CSS die Farbe ganz klar festgelegt?!

Du willst die Ankerelement stylen, also style sie.

mfg Beat

[182]

ich habe jetzt noch mal mein CSS Teil angepasst soweit ich dich verstanden habe. Jedoch zeigt er mir jetzt alle Menüpunkte, egal ob Oberpunkt oder submenü in blauer farbe an und besuchte Menüpunkte in lila.
dabei habe ich doch in meinem CSS die Farbe ganz klar festgelegt?!

Du willst die Ankerelement stylen, also style sie.

mfg Beat

wie denn? und warum hat er die farben nicht bereits überneommen ich habe sie doch bereits festgelegt.

[Beat]

Du willst die Ankerelement stylen, also style sie.

wie denn? und warum hat er die farben nicht bereits überneommen ich habe sie doch bereits festgelegt.

Das sehe ich in deinem neuen CSS aber nicht.
Wenn a Elemente die Frabe der Parentelemente haben sollen, dann musst du ihnen schon entweder die gleiche Farbe oder das keyword inherit als Farbwert zuweisen.

mfg Beat

[182]

Das sehe ich in deinem neuen CSS aber nicht.
Wenn a Elemente die Frabe der Parentelemente haben sollen, dann musst du ihnen schon entweder die gleiche Farbe oder das keyword inherit als Farbwert zuweisen.

mfg Beat

Es funktioniert leider nicht, wenn ich
 #navlist:a{color:#f6e0b1;}
passiert garnichts

[MudGuard]

Hi,

Es funktioniert leider nicht, wenn ich
#navlist:a{color:#f6e0b1;}
passiert garnichts

Natürlich, weil es keine Pseudoklasse a gibt.

Du solltest Dir die Grundlagen von CSS, insbesondere die Selektoren, beibringen.

cu,
Andreas

[182]

Hi,

Es funktioniert leider nicht, wenn ich
#navlist:a{color:#f6e0b1;}
passiert garnichts

Natürlich, weil es keine Pseudoklasse a gibt.

Du solltest Dir die Grundlagen von CSS, insbesondere die Selektoren, beibringen.

cu,
Andreas

Ich habe jetzt folgendes angelegt:

a:link{color:#f6e0b1;}  
a:active{color:#f6e0b1;}  
a:vistited{color:#f6e0b1;}  
a:hover{color:#f6e0b1;}  

damit er ALLE a element in Beige anzeigt - super klappt

die untermenüs sollen aber schwarz sein also mache ich noch das hier:

.subactive:a:link{color:#000;}  
.subactive:a:visited{color:#000;}  
.subactive:a:hover{color:#000;}  
.subactive:a:active{color:#000;}

klappt nicht.. was muss ich tun damit die Schriftfarben so sind wie sie sein sollen

[ChrisB]

Hi,

Natürlich, weil es keine Pseudoklasse a gibt.

Ich habe jetzt folgendes angelegt:

Bevor du antwortest, denke bitte darüber nach, was die Antwort, die dir zuvor gegeben wurde, bedeutet.
Wenn du Verständnisprobleme hast, dann frag gezielt nach.

die untermenüs sollen aber schwarz sein also mache ich noch das hier:

.subactive:a:link{color:#000;}

.subactive:a:visited{color:#000;}
.subactive:a:hover{color:#000;}
.subactive:a:active{color:#000;}

>   
> klappt nicht..  
  
Und der Hinweis diesbezüglich lautet immer noch:  

> > Natürlich, weil es keine Pseudoklasse a gibt.  
  
Ist dir klar, was eine Pesudoklasse ist? Wenn nein, informiere dich bitte!  
  

> was muss ich tun damit die Schriftfarben so sind wie sie sein sollen  
  
Korrektes und auf die Aufgabenstellung passendes CSS schreiben. Momentan ist noch nicht mal das erste davon erfüllt.  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

[Beat]

.subactive:a:link{color:#000;}

.subactive:a:visited{color:#000;}
.subactive:a:hover{color:#000;}
.subactive:a:active{color:#000;}

>   
> klappt nicht.. was muss ich tun damit die Schriftfarben so sind wie sie sein sollen  
  
schreib dir den Link hinter die Ohren.  
<http://de.selfhtml.org/css/formate/zentrale.htm>  
  
mfg Beat

-- 

><o(((°>           ><o(((°>  

   <°)))o><                     ><o(((°>o  
Der Valigator leibt diese Fische

[Gunnar Bittersmann]

@@182:

nuqneH

Ich habe jetzt folgendes angelegt:
a:link{color:#f6e0b1;}
a:active{color:#f6e0b1;}
a:vistited{color:#f6e0b1;}
a:hover{color:#f6e0b1;}

Das ist unsinnig. Wenn alle Links gleich aussehen sollen, müssen die unterschiedlichen Zustände (Pseudoklassen) nicht getrennt angegeben werden. 'a{color:#f6e0b1;}' genügt.

Willst du dem Nutzer wirklich die Navigationhilfe wegnehmen, schon besuchte Links von noch nicht besuchten unterscheiden zu können?

.subactive:a:link{color:#000;}
.subactive:a:visited{color:#000;}
.subactive:a:hover{color:#000;}
.subactive:a:active{color:#000;}
klappt nicht.. was muss ich tun damit die Schriftfarben so sind wie sie sein sollen

Was MudGuard sagte: „Du solltest Dir die Grundlagen von CSS, insbesondere die Selektoren, beibringen.“

Qapla'

[MudGuard]

Hi,

Das ist unsinnig. Wenn alle Links gleich aussehen sollen, müssen die unterschiedlichen Zustände (Pseudoklassen) nicht getrennt angegeben werden. 'a{color:#f6e0b1;}' genügt.

Nein, weil damit die im Browser-Stylesheet vorgegebenen Rulesets für a:link, a:visited usw. nicht überschrieben werden, denn der Selektor a weist eine niedrigere specificity auf als a:link usw.

cu,
Andreas

[Gunnar Bittersmann]

@@MudGuard:

nuqneH

'a{color:#f6e0b1;}' genügt.

Nein

Doch …

weil damit die im Browser-Stylesheet vorgegebenen Rulesets für a:link, a:visited usw. nicht überschrieben werden

… weil das Browserverhalten ein anderes ist.

denn der Selektor a weist eine niedrigere specificity auf als a:link usw.

Hat da jemand (2) und (3) [CSS21 §6.4.1] vertauscht? ;-)

Qapla'

[MudGuard]

Hi,

Wozu brauchst Du da überhaupt in jedem li und im inneren ul eine Klasse?
Die sind doch alle aufgrund der Struktur einfach ansprechbar.
Z.B. das innere ul über #navlist ul

danke für die Tipps und Ratschläge,
ich habe jetzt noch mal mein CSS Teil angepasst soweit ich dich verstanden habe.

Offensichtlich nicht sehr weit.
Denn jetzt formatierst Du praktisch nur noch Klassen. Und ich schrieb doch, daß die Klassen überflüssig sind.

cu,
Andreas