Verschachtelte HTML Elemente mit CSS formatieren

[basementmedia]

Hi,

ich hab in meiner Page eine ziemlich verschachtelte HMTL Struktur und möchte die einzelnen Elemente gerne mit CSS ansprechen.
Bis zu einer gewissen Ebene funktionierts auch prächtig aber irgendwann klappts dann nimmer.
Hier die Beispielstruktur:

<div id="navbar">
<ul>
  <li><a id="aktiv">Angeklickter Menüpunkt</a></li>
  <li><a id="nichtaktiv">Menüpunkt</a></li>
  <li><a id="locked">gesperrter Menüpunkt</a></li>
</ul>
</div>

Folgendes klappt:

#navbar li {
  font-family: Georgia, Verdana, Sans Serif;
  font-size:11pt;
  font-weight:bold;
  color:#000000;
  display:inline;
  padding-left:10px;
  padding-right:10px;
  padding-top:10px;
}
#navbar li a:link {
 text-decoration:none;
 color:#000000;
}

aber das nächste z.B. leider nicht mehr

#navbar li active {
  color:#FF0000;
}

#navbar li locked {
  color:#CCCCCC;
}

Klar könnte ich das ganze vielleicht grundsätzlich einfach entschachteln, aber es müsste doch irgendwie möglich sein, die Unter-Attribute von Links in Listenpunkten anzusprechen, oder?

Bin für jeden Tipp dankbar.

Viele Grüße

Daniel

[schwarze Piste]

Tachchen!

#navbar li active {
  color:#FF0000;
}

#navbar li locked {
  color:#CCCCCC;
}

*hüstel*

Wie selektiert man in CSS eine ID?
Und wie eine Pseudoklasse ... wenn das überhaupt gewollt war? ;-)

Gruß

Die schwarze Piste

[the stell]

Hi,

ich hab in meiner Page eine ziemlich verschachtelte HMTL Struktur und möchte die einzelnen Elemente gerne mit CSS ansprechen.
Bis zu einer gewissen Ebene funktionierts auch prächtig aber irgendwann klappts dann nimmer.
Hier die Beispielstruktur:

<div id="navbar">
<ul>
  <li><a id="aktiv">Angeklickter Menüpunkt</a></li>
  <li><a id="nichtaktiv">Menüpunkt</a></li>
  <li><a id="locked">gesperrter Menüpunkt</a></li>
</ul>
</div>

aber das nächste z.B. leider nicht mehr

#navbar li active {
  color:#FF0000;
}

#navbar li locked {
  color:#CCCCCC;
}

hi,
du hast anscheinend das richtige Zeichen zum vor den Namen der Pseudoklasse bzw. der ID setzen vergessen:

 #navbar li :active {  
   color:#FF0000;  
 }  
  
 #navbar li #locked {  
   color:#CCCCCC;  
 }

Wenn du konsequent bleiben willst, dann schreib auch noch das Element vor den Doppelpunkt bzw. das Gatterzeichen. Notwendig ist das aber ned.

lg the stell

[Cheatah]

Hi,

#navbar li :active {

die Pseudoklasse :active hat mit der Angelegenheit hier exakt überhaupt nichts zu tun. Sie selektiert ein Element, das derzeit im User-Interface als aktiv gilt, beispielsweise zwischen dem Beginn und dem Ende eines Klicks.

Cheatah

[MudGuard]

Hi,

die Pseudoklasse :active hat mit der Angelegenheit hier exakt überhaupt nichts zu tun.

Wofür sonst sollte das active stehen? Im HTML gibt es weder eine id noch eine Klasse 'active' ...
CSS darf nicht anfangen, sowas zu übersetzen und das dann auf die id 'aktiv' anwenden ...

cu,
Andreas

[Cheatah]

Hi,

<li><a id="aktiv">Angeklickter Menüpunkt</a></li>
  <li><a id="nichtaktiv">Menüpunkt</a></li>
  <li><a id="locked">gesperrter Menüpunkt</a></li>

IDs müssen dokumentweit eindeutig sein. Wenn Du also zufällig mal zwei gesperrte (oder inaktive) Menüpunkte hast, versagt Dein Konzept. Klassifiziere Deine Menüpunkte.

Apropos inaktiv: Ich behaupte einfach mal, dies trifft auf alle Menüpunkte zu, die nicht als aktiv gekennzeichnet sind. Ich sehe keinen Grund, hier noch eine zusätzliche Bezeichnung einzuführen.

font-family: Georgia, Verdana, Sans Serif;

Was ist denn "Sans Serif" für eine Schriftart? Ich kenne sie nicht, mich überrascht aber die Namensähnlichkeit mit der generischen Schriftfamilie sans-serif, die Du im übrigen *unbedingt* am Ende der Schriftartenliste angeben solltest (sofern serifenlose Schriften gewünscht sind, versteht sich, ansonsten wähle die jeweils passende generische Schriftfamilie).

font-size:11pt;

Oh, dies ist ein Druck-Stylesheet? Andernfalls wäre "pt" wohl keine günstige Einheit, da sie auf dem Zentimeter basiert. Bevorzuge zudem % oder em, um die Einstellungen des Nutzers zu respektieren.

#navbar li active {

Der CSS-Selektor "active" selektiert ein Element namens <active>, welches es in HTML nicht gibt. ID-Selektoren beginnen so, wie Du es bei Deinem <div id="navbar"> schon geschafft hast; Klassenselektoren beginnen mit einem Punkt.

Cheatah

[suit]

Andernfalls wäre "pt" wohl keine günstige Einheit, da sie auf dem Zentimeter basiert.

kurz: ein punkt entspricht exakt 1/72 zoll

lang: wenn pt auf dem centimeter basierte, wären es wohl 0,7035277777... cm

selten basierend irgendwelche einheiten auf dem zentimeter. in SI basieren sogut wie alle einheiten auf basiseinheiten- mit ausnahme des gramm, hier ist die SI-basiseinheit kilogramm, die (nicht si-)basiseinheit der masse aber gramm

im falle von SI sind die einheiten aber ein vielfaches (oder einen bruchteil) von 3er-potenzen einer basiseinheit - in dem fall wäre als basis meter (m) oder millimeter (mm) geeignet

obrige rechnung bezieht sich übrigens auf das aktuell gebräuchliche system - der punkt war im laufe der geschichte vielfach leicht abweichend definiert

[Beat]

ich hab in meiner Page eine ziemlich verschachtelte HMTL Struktur und möchte die einzelnen Elemente gerne mit CSS ansprechen.
Bis zu einer gewissen Ebene funktionierts auch prächtig aber irgendwann klappts dann nimmer.
Hier die Beispielstruktur:

<div id="navbar">
<ul>
  <li><a id="aktiv">Angeklickter Menüpunkt</a></li>

Bist du sicher, dass es immer nur ein Element geben wird, das die das Attribut id=aktiv tragen darf?

<li><a id="nichtaktiv">Menüpunkt</a></li>

ditto...

<li><a id="locked">gesperrter Menüpunkt</a></li>

ditto...

Ansonsten verwende Klassen.

Bin für jeden Tipp dankbar.

mfg Beat

[Gunnar Bittersmann]

@@basementmedia:

<li><a id="aktiv">Angeklickter Menüpunkt</a></li>

Der angeklickte Menüpunkt sollte KEIN Link sein. „Verlinke niemals auf die aktuelle Seite.“ (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Live long and prosper,
Gunnar