Das erste "Kind-Element" selektieren

[Hans Wurst]

Hallo zusammen,
ich arbeite gerade an einem Projekt und möchte gerne eine CSS-Navi (sehr klein gehalten, ehr schlicht und einfach) erstellen.

Hier das Grundgerüst:

<div class="navi">  
 <a href="#" title="">Link 1</a>  
 <a href="#" title="">Link 2</a>  
 <a href="#" title="">Link 3</a>  
 <a href="#" title="">Link 4</a>  
</div>

CSS:
.navi a { ... }

Nun möchte ich gerne per CSS _nur_ das erste <a> Element ansprechen, am besten Browserübergreifend (IE 6-8, FF 2-3.5, Opera und Safari), wie mach ich das?

Das Ziel ist dem ersten Element ein padding zu verpassen, dem Rest aber nicht. Ich möchte ungern ein Style-Attribut anhängen, oder eine eigene Class bzw. ID für dieses Element erstellen, es muss doch auch einfacher gehen oder?!

[suit]

Nun möchte ich gerne per CSS _nur_ das erste <a> Element ansprechen, am besten Browserübergreifend (IE 6-8, FF 2-3.5, Opera und Safari), wie mach ich das?

Überhaupt nicht, da der Internet Exploder mit der :first-child-Pseudo-Klasse nur bedingt etwas anfangen kann

Das Ziel ist dem ersten Element ein padding zu verpassen, dem Rest aber nicht. Ich möchte ungern ein Style-Attribut anhängen, oder eine eigene Class bzw. ID für dieses Element erstellen, es muss doch auch einfacher gehen oder?!

Setze die Klasse "first-child" ins erste Element - das ist die von mir bevorzugte Krücke.

[Hans Wurst]

Setze die Klasse "first-child" ins erste Element - das ist die von mir bevorzugte Krücke.

Es will leider nicht funktionieren :(

.header_navi {  
 width:990px;  
 height:45px;  
 background-image:url(../../Img/de/Tabslider_Club.gif);  
 background-repeat:no-repeat;  
 background-position:center center;  
}  
.header_navi .navi_container {  
 width:550px;  
 height:40px;  
 margin-left:10px;  
 float:left;  
}  
.header_navi .navi_container a {  
 width:180px;  
 height:38px;  
 float:left;  
}  
.header_vavi .navi_container a:first-child {  
 background-color:red;  
}

Leider bekommt das erste <a> Element nicht den roten Hintergrund... was mache ich Falsch?

[EKKi]

Mahlzeit Hans Wurst,

Setze die Klasse "first-child" ins erste Element - das ist die von mir bevorzugte Krücke.
Es will leider nicht funktionieren :(

"Es will leider nicht funktionieren" ist nur ein Äquivalent zu "funzt net" und damit sinnfrei.

Abgesehen von Gunnars Frage bezüglich der nicht vorhandenen Auszeichnung als Liste Deiner offensichtlichen liste passt dieser Selektor ...

.header_vavi .navi_container a:first-child {
background-color:red;
}

... in keinster Weise zu der HTML-Struktur, die Du genannt hast. Natürlich kann das deshalb nicht funktionieren.

Leider bekommt das erste <a> Element nicht den roten Hintergrund... was mache ich Falsch?

Dein HTML-Code ist semantisch falsch, Dein HTML- und CSS-Code passen nicht zusammen und Du hast suits Hinweis bezüglich einer eigenen Klasse für das erste Element der Liste nicht umgesetzt. Hole all' das nach und es wird funktionieren.

MfG,
EKKi

[Gunnar Bittersmann]

@@suit:

nuqneH

Nun möchte ich gerne per CSS _nur_ das erste <a> Element ansprechen, am besten Browserübergreifend (IE 6-8, FF 2-3.5, Opera und Safari), wie mach ich das?

Überhaupt nicht, da der Internet Exploder mit der :first-child-Pseudo-Klasse nur bedingt etwas anfangen kann

?? IE ≥ 7 kann es.

IE < 7 sind entweder irrelevant oder bekommen dafür eine CSS-Expression verpasst:

* html a  
{  
  padding-left: expression( [code lang=javascript](new Function('elem', 'elem.style.paddingLeft = (elem.previousSibling ? "0" : "42px");'))(this)
~~~ );  
}[/code]  
  
  

> Setze die Klasse "first-child" ins erste Element - das ist die von mir bevorzugte Krücke.  
  
Nein, völlig unnötig.  
  
Qapla'

-- 
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)

[suit]

IE < 7 sind entweder irrelevant oder bekommen dafür eine CSS-Expression verpasst:

IE < 7 mit deaktiviertem JavaScript sind leider verbreiteter als man denkt.

[Gunnar Bittersmann]

@@suit:

nuqneH

IE < 7 mit deaktiviertem JavaScript sind leider verbreiteter als man denkt.

Nutzer von IE < 7 wissen gar nicht, was JavaScript ist, geschweige denn, wie man es deaktiviert. Der Martin mal ausgenommen.

IE < 7 mit deaktiviertem JavaScript nutzen so wenige, dass ich dem bei solchen Kleinigkeiten keine größere Beachtung schenken würde. Dann sieht die Seite bei denen halt nicht ganz so schön aus – das bringt in China keinen Sack Reis zum Umfallen.

Qapla'

[suit]

IE < 7 mit deaktiviertem JavaScript nutzen so wenige, dass ich dem bei solchen Kleinigkeiten keine größere Beachtung schenken würde. Dann sieht die Seite bei denen halt nicht ganz so schön aus – das bringt in China keinen Sack Reis zum Umfallen.

Erklär das dem Marketingmenschen eines größeren Automobilkonzerns wenn die Webseite auf seinem Windows-2000-Rechner mit IE6 und ohne JavaScript nicht vernünftig aussieht :)

[Cheatah]

Hi,

Nutzer von IE < 7 wissen gar nicht, was JavaScript ist, geschweige denn, wie man es deaktiviert.

die Nutzer von IE < 7 sind nicht diejenigen, die ihn konfigurieren.

Cheatah

[Gunnar Bittersmann]

@@Hans Wurst:

nuqneH

<div class="navi">

<a href="#" title="">Link 1</a>
<a href="#" title="">Link 2</a>
<a href="#" title="">Link 3</a>
<a href="#" title="">Link 4</a>
</div>

  
Warum ist die Liste keine Liste?  
  
  

> Nun möchte ich gerne per CSS \_nur\_ das erste `<a>`{:.language-html} Element ansprechen, am besten Browserübergreifend (IE 6-8, FF 2-3.5, Opera und Safari), wie mach ich das?  
  
Indem du „erstes Kind“ ins Englische übersetzst und die entsprechende Pseudoklasse verwendest. [[CSS2 §5.11.1](http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap05.html#heading-5.11.1%A0), <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#first_line_letter_child@title=SELFHTML>]  
  
Qapla'

-- 
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)

[Hans Wurst]

Warum ist die Liste keine Liste?

Weil das eine horizontale Navigation ist UND weil die eingetlichen Reiter/Tabs eine Grafikdatei ist, über die ich einen <a> Element lege (Vorgabe! Leider!)

Indem du „erstes Kind“ ins Englische übersetzst und die entsprechende Pseudoklasse verwendest.

Habe ich schon versucht, aber irgendwie will es nicht funzen, siehe Antwort auf suits Post.

[EKKi]

Mahlzeit Hans Wurst,

Warum ist die Liste keine Liste?
Weil das eine horizontale Navigation ist

Die Ausrichtung (ob horizontal oder vertikal) bzw. generell das Aussehen spielt absolut keine Rolle. Eine Liste ist eine Liste ist eine Liste. Daran ändert sich semantisch überhaupt nichts.

UND weil die eingetlichen Reiter/Tabs eine Grafikdatei ist, über die ich einen <a> Element lege (Vorgabe! Leider!)

Ja und? Auch das ändert nichts daran. Gib der Liste die Grafikdatei als Hintergrund an, stelle die <li> inline dar, formatiere ihren Inhalt wie gewünscht - und schon hast Du eine semantisch korrekte Navigationsliste, die auch noch schick aussieht.

Indem du „erstes Kind“ ins Englische übersetzst und die entsprechende Pseudoklasse verwendest.
Habe ich schon versucht, aber irgendwie will es nicht funzen, siehe Antwort auf suits Post.

"Irgendwie will es nicht funzen" funzt irgendwie nicht.

MfG,
EKKi

[Hans Wurst]

"Irgendwie will es nicht funzen" funzt irgendwie nicht.

Ja ich weiß ich weiß, ich höre sowas auch nicht gern, weil man da nie weiß was schief gelaufen ist und was genau nicht funzt, ABER
bei diesem 5 Zeiligen HTML Code + 3 Zeiligen CSS Code den ich gepostet habe, konnte ich es mir leisten "funzt nicht" zu sagen, weil es eben nicht funktioniert hat. Was soll man da noch sagen?

[EKKi]

Mahlzeit Hans Wurst,

ABER

Es gibt kein "aber".

bei diesem 5 Zeiligen HTML Code + 3 Zeiligen CSS Code den ich gepostet habe, konnte ich es mir leisten "funzt nicht" zu sagen, weil es eben nicht funktioniert hat. Was soll man da noch sagen?

Z.B. was genau nicht funktioniert? Was bedeutet "funktioniert nicht"? Wird es anders dargestellt als gewünscht? Was genau wird gewünscht? Wie wird es dargestellt? In welchen Browsern tritt das Problem auf? Steht dort irgendetwas in der Fehlerkonsole? ...

Du siehst, es gibt genügend offene Punkte - die alle *NUR* durch Dich beantwortet werden können. Warum meint hier eigentlich jeder zweite Fragesteller, dass das Hobby der meisten Leser "Würmer-aus-der-Nase-ziehen-für-Fortgeschrittene" ist?

MfG,
EKKi

[Hans Wurst]

Z.B. was genau nicht funktioniert? Was bedeutet "funktioniert nicht"? Wird es anders dargestellt als gewünscht? Was genau wird gewünscht? Wie wird es dargestellt? In welchen Browsern tritt das Problem auf? Steht dort irgendetwas in der Fehlerkonsole? ...

Ja hast ja Recht.

Warum meint hier eigentlich jeder zweite Fragesteller, dass das Hobby der meisten Leser "Würmer-aus-der-Nase-ziehen-für-Fortgeschrittene" ist?

:)

[Gunnar Bittersmann]

@@Hans Wurst:

nuqneH

Warum ist die Liste keine Liste?
Weil das eine horizontale Navigation ist

Das ist kein Grund. Was hat die (horizontale) Darstellung mit dem Markup zu tun?

UND weil die eingetlichen Reiter/Tabs eine Grafikdatei ist, über die ich einen <a> Element lege

Auch das ist kein Grund.

Also was spricht gegen

<ul class="navi">  
 <li><a href="#" title="">Link 1</a></li>  
 <li><a href="#" title="">Link 2</a></li>  
 <li><a href="#" title="">Link 3</a></li>  
 <li><a href="#" title="">Link 4</a></li>  
</ul>

Qapla'

[Hans Wurst]

Also was spricht gegen

<ul class="navi">

<li><a href="#" title="">Link 1</a></li>
<li><a href="#" title="">Link 2</a></li>
<li><a href="#" title="">Link 3</a></li>
<li><a href="#" title="">Link 4</a></li>
</ul>

Absolut nichts, daher habe ich dieses Konstrukt übernommen, danke!  
Allerdings habe ich nocht transparente Images in die Anker-Blöcke gepackt, damit sie eine gewissen Breite + Höhe haben.

[EKKi]

Mahlzeit Hans Wurst,

Allerdings habe ich nocht transparente Images in die Anker-Blöcke gepackt, damit sie eine gewissen Breite + Höhe haben.

Warum das? Breite und Höhe kann man sehr gut <http://de.selfhtml.org/css/eigenschaften/positionierung.htm@title=mittels CSS festlegen>.

MfG,
EKKi

[Hans Wurst]

Warum das? Breite und Höhe kann man sehr gut <http://de.selfhtml.org/css/eigenschaften/positionierung.htm@title=mittels CSS festlegen>.

Das hatte ich vorher, habe aber einen Tipp bekommen das nicht jeder Browser eine Positionszuweisung von Ankern <a> unterstützt, daher.

Habe es aber inzwischen angepasst...

[ChrisB]

Hi,

Warum das? Breite und Höhe kann man sehr gut <http://de.selfhtml.org/css/eigenschaften/positionierung.htm@title=mittels CSS festlegen>.
Das hatte ich vorher, habe aber einen Tipp bekommen das nicht jeder Browser eine Positionszuweisung von Ankern <a> unterstützt, daher.

Von wem bekommst du deine "Tipps" - vom blinden Hund der Omi in der Nachbarwohnung?

MfG ChrisB

[Hans Wurst [NEUES THEMA]]

Ok, ich bleibe mal in meinem Thread und stelle eine neue Frage, da die alte schon erfolgreich beantwortet ist (DANKE SCHÖN!).

Es geht immer noch um die Navi.

.header_navi {  
  width:990px;  
  height:45px;  
  background-image:url(../../Img/de/Tabslider_Club.gif);  
  background-repeat:no-repeat;  
  background-position:center center;  
}  
  
.header_navi ul {  
  position:absolute;  
  width:550px;  
  height:40px;  
  margin-left:9px;  
  list-style-type:none;  
  padding-left:0px;  
}  
  
.header_navi ul li {  
  float:left;  
}  
  
.header_navi ul li a {  
  width:180px;  
  height:40px;  
  display:block;  
}  

Die class "header_navi" ist der Haupt-Container der Navi und steuert das Bild der Navigation (mit 3x Reitern/Tabs).
Die CSS-Datei ist in jedem der 3x HTML Seiten eingebunden, d.h. alle 3x Seiten haben unterschiedlichen Inhalt, aber die selbe Navi (u.a. auch das Hintergrundbild).

Also ich möchte gerne das die jeweilige Seite, ihren eigenen Navi-Hintergrund bekommt.

Wie zusehen ist, sind von der "header_navi" auch andere classes abhängig, d.h. ich kann sich nicht einfach kopieren, unbenennen und die unterclassen duplizieren, das ist nicht der Sinn der Sache.

Wie löse ich es am intelligentesten mit CSS?
Ich hoffe mein Problem habe ich deutlich genug erklären können...

[Gunnar Bittersmann]

@@Hans Wurst [NEUES THEMA]:

nuqneH

Also ich möchte gerne das die jeweilige Seite, ihren eigenen Navi-Hintergrund bekommt.

Die aktuelle Seite sollte im Menü nicht verlinkt sein. (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Wenn dann beim Menüpunkt der aktuellen Seite der Titel nicht in einem 'a'-Element steht, kannst du '.header_navi ul li' und '.header_navi ul li a' unterschiedliche Hintergründe zuweisen.

Qapla'

[EKKi]

Mahlzeit Gunnar Bittersmann,

Die aktuelle Seite sollte im Menü nicht verlinkt sein. (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Das ist zwar richtig ...

Wenn dann beim Menüpunkt der aktuellen Seite der Titel nicht in einem 'a'-Element steht, kannst du '.header_navi ul li' und '.header_navi ul li a' unterschiedliche Hintergründe zuweisen.

... und das auch, allerdings nicht das Problem von Hans Wurst - da bei ihm das Hintergrundbild über die gesamte <ul> geht (wenn ich den Code richtig verstanden habe).

MfG,
EKKi

[Hans Wurst]

da bei ihm das Hintergrundbild über die gesamte <ul> geht (wenn ich den Code richtig verstanden habe).

Völlig korrekt.

[Hans Wurst]

Die aktuelle Seite sollte im Menü nicht verlinkt sein. (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Ich weiß nicht was du mir damit sagen willst, die aktuelle Seite ist nicht auf sich selbst verlinkt, der Reiter zur der aktuellen Seite ist zwar da, aber nicht anklickbar, wozu auch wenn man sich gerade dort befindet.

Wenn dann beim Menüpunkt der aktuellen Seite der Titel nicht in einem 'a'-Element steht, kannst du '.header_navi ul li' und '.header_navi ul li a' unterschiedliche Hintergründe zuweisen.

Den Hintergrund beinhaltet NUR der Hauptcontainer ".header_navi" (DIV) indem dann eine Auflistung (3x) der Menüpunkte erscheint, das Hintergrundbild beinhaltet bereits Tab (aktiviert/deaktiviert), daher muss es seitenabhängig gezeigt werden, aber mit eiener class, wenns geht...

[EKKi]

Mahlzeit Hans Wurst [NEUES THEMA],

Es geht immer noch um die Navi.
.header_navi {
  width:990px;
  height:45px;
  background-image:url(../../Img/de/Tabslider_Club.gif);
  background-repeat:no-repeat;
  background-position:center center;
}

Die CSS-Datei ist in jedem der 3x HTML Seiten eingebunden, d.h. alle 3x Seiten haben unterschiedlichen Inhalt, aber die selbe Navi (u.a. auch das Hintergrundbild).

Also ich möchte gerne das die jeweilige Seite, ihren eigenen Navi-Hintergrund bekommt.

Da gibt es verschiedene Möglichkeiten. Einige davon sind:

• Gib der Navi auf jeder Seite zusätzlich zu der Klasse eine seitenspezifische ID, schmeiß das Hintergrundbild aus dem o.g. Abschnitt raus und definiere für jede einzelne Seite ungefähr folgendes:

#navi_Club {  
  background-image:url(../../Img/de/Tabslider_Club.gif);  
}  
  
#navi_Foo {  
  background-image:url(../../Img/de/Tabslider_Foo.gif);  
}  
  
#navi_Bar {  
  background-image:url(../../Img/de/Tabslider_Bar.gif);  
}

• Gib der Navi auf jeder Seite eine weitere zusätzliche seitenspezifische Klasse ... Rest s.o.

• Unschön: binde das entsprechende Hintergrundbild einfach direkt im <ul> ein. Ich persönlich würde zu eine der vorgenannten Möglichkeiten tendieren.

MfG,
EKKi

[Hans Wurst]

Da gibt es verschiedene Möglichkeiten. Einige davon sind:

• Gib der Navi auf jeder Seite zusätzlich zu der Klasse eine seitenspezifische ID, schmeiß das Hintergrundbild aus dem o.g. Abschnitt raus und definiere für jede einzelne Seite ungefähr folgendes:

Genau das habe ich bereits gemacht, gefällt mir aber nicht so, weil CSS Code in HTML vorkommt, das möchte ich vermeiden und am besten auslagern.

• Unschön: binde das entsprechende Hintergrundbild einfach direkt im <ul> ein. Ich persönlich würde zu eine der vorgenannten Möglichkeiten tendieren.

Nee, da gefällt mir doch die o.g. Variante besser... ;)

Danke!

[EKKi]

Mahlzeit Hans Wurst,

• Gib der Navi auf jeder Seite zusätzlich zu der Klasse eine seitenspezifische ID, schmeiß das Hintergrundbild aus dem o.g. Abschnitt raus und definiere für jede einzelne Seite ungefähr folgendes:
  Genau das habe ich bereits gemacht, gefällt mir aber nicht so, weil CSS Code in HTML vorkommt, das möchte ich vermeiden und am besten auslagern.

Wenn Du es richtig machst, kommt kein CSS im HTML vor. Nochmal:

CSS:

.navi {  
  [...]  
}  
  
#navi_eins {  
  background-image: url(/foo/bar/eins.jpg);  
}  
  
#navi_zwei {  
  background-image: url(/foo/bar/zwei.jpg);  
}  
  
#navi_drei {  
  background-image: url(/foo/bar/drei.jpg);  
}

--------------------------------------------------

HTML "eins.html":

<ul class="navi" id="navi_eins">  
[...]  
</ul>

--------------------------------------------------

HTML "zwei.html":

<ul class="navi" id="navi_zwei">  
[...]  
</ul>

--------------------------------------------------

HTML "drei.html":

<ul class="navi" id="navi_drei">  
[...]  
</ul>

MfG,
EKKi

[Gunnar Bittersmann]

@@EKKi:

nuqneH

• Gib der Navi auf jeder Seite zusätzlich zu der Klasse eine seitenspezifische ID

Eine seitenspezifische ID wäre dann aber beim 'html'- oder 'body'-Element besser aufgehoben; es ist ja eine ID für das Dokument.

In CSS dann per Nachfahrenselektor …

Qapla'

[EKKi]

Mahlzeit Gunnar Bittersmann,

Eine seitenspezifische ID wäre dann aber beim 'html'- oder 'body'-Element besser aufgehoben; es ist ja eine ID für das Dokument.

In CSS dann per Nachfahrenselektor …

Stimmt auch wieder ...

MfG,
EKKi

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Eine seitenspezifische ID wäre dann aber beim 'html'- oder 'body'-Element besser aufgehoben;

Wobei noch anzumerken ist, dass das 'html'-Element in XHTML 1.0, 1.1 und (X)HTML 5 ein Attribut @id haben darf, nicht jedoch in HTML 4.01.

Qapla'

[Hans Wurst [NEUES THEMA] --> ERLEDIGT]

Danke an alle, ich habe es gelöst, auch wenns nicht so schön ist, ist aber dafüf ausgelagert ;)

.header_navi {  
  width:990px;  
  height:45px;  
  /* background-image:url(../../Img/de/Tabslider_Club.gif); */  
  background-repeat:no-repeat;  
  background-position:center center;  
}  
  
.header_navi ul {  
  position:absolute;  
  width:550px;  
  height:40px;  
  margin-left:9px;  
  list-style-type:none;  
  padding-left:0px;  
}  
  
.header_navi ul li {  
  float:left;  
}  
  
.header_navi ul li a {  
  width:180px;  
  height:40px;  
  display:block;  
}  
  
#tab_club {  
  background-image:url(../../Img/de/Tabslider_Club.gif);  
}  
  
#tab_konto {  
  background-image:url(../../Img/de/Tabslider_Konto.gif);  
}  
  
#tab_bestellungen {  
  background-image:url(../../Img/de/Tabslider_Bestellungen.gif);  
}  

[EKKi]

Mahlzeit Hans Wurst [NEUES THEMA] --> ERLEDIGT,

Danke an alle, ich habe es gelöst, auch wenns nicht so schön ist, ist aber dafüf ausgelagert ;)

Gunnar hatte da noch eine verbessere Idee ...

MfG,
EKKi