Unterklasse einer ID

[santhiphap]

Hallo,
ich habe ein Navigationsscript für meine Seite und dazu folgenden Css code welcher das Hintergrundbild festlegt:

#navigation a,  
#navigation a .hover {  
  height: 31px; /*70*/  
        position: relative;  
        display: block;  
		background: url(images/navitop.jpg) 0 0 no-repeat;  
}

Nun möchte ich eine zweite Navigation mit einem anderen Hintergrundbild haben aber die gleiche ID "navigation" weiterbenutzen, da ich den restlichen css code nicht verdoppeln will und überall statt "navigation", "navigation2". Falls ich später mal was an der Navigation ändern will müsste ich ja dann auch umständlicher Weise doppelt soviel umschreiben.
Ich habe es schon mit Unterklassen probiert aber es nicht geschafft.
Könnt ihr mir da mal eben helfen?

[Der Martin]

Hi,

#navigation a,

#navigation a .hover {
  height: 31px; /70/
        position: relative;
        display: block;
background: url(images/navitop.jpg) 0 0 no-repeat;
}

  
bist du sicher, dass du hier keinen Abschreibfehler hast?  
Die CSS-Regeln gelten nämlich, so wie du sie notiert hat,  
 \* für a-Elemente innerhalb eines Elements mit der ID "navigation"  
 \* für Nachfahren mit der Klasse "hover" eines a-Elements innerhalb eines Elements mit der ID "navigation"  
  
Vermutlich soll der zweite Selektor nicht "#navigation a .hover" heißen, sondern "#navigation a:hover".  
  

> Nun möchte ich eine zweite Navigation mit einem anderen Hintergrundbild haben aber die gleiche ID "navigation" weiterbenutzen  
  
Das geht nicht. IDs müssen innerhalb eines Dokuments eindeutig sein, d.h. können nicht mehrfach vergeben werden. Dann solltest du Klassen anstelle von IDs verwenden.  
  
So long,  
 Martin  

-- 
[Ich bin 30](http://community.de.selfhtml.org/zitatesammlung/zitat318). Ich demensiere apokalyptisch.  
  (Orlando)  
  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[santhiphap]

Hallo und erstmal danke für deine Antwort.
Also ich mach mal nen Beispiel wie ich es umschreiben würde wenn ich keine "Unterklassen" oder so etwas in der Art benutzen könnte

#navigationoben a,  
#navigationoben a .hover {  
height: 31px; /*70*/  
position: relative;  
display: block;  
background: url(images/navitop.jpg) 0 0 no-repeat;  
}

#navigationunten a,  
#navigationunten a .hover {  
height: 31px; /*70*/  
position: relative;  
display: block;  
background: url(images/navibot.jpg) 0 0 no-repeat;  
}

Das Problem ist eben, das ich noch viele weitere Codeschnipsel mit der ID #navigation habe und ich nicht jedes davon in der css datei verdoppeln und umbenennen will.
Aber so wie du es sagst sieht es wohl so aus als müsste ich mir die Arbeit machen.

[suit]

Das Problem ist eben, das ich noch viele weitere Codeschnipsel mit der ID #navigation habe und ich nicht jedes davon in der css datei verdoppeln und umbenennen will.

Das Problem ist wahrscheinlich eher, dass du uns die HTML-Stuktur verschweigst und von CSS zu wenig Ahnung hast, um dein Problem sinnvoll zu lösen.

[Steel]

Moin!
.

Also ich mach mal nen Beispiel wie ich es umschreiben würde wenn ich keine "Unterklassen" oder so etwas in der Art benutzen könnte

#navigationoben a,

#navigationoben a .hover {
height: 31px; /70/
position: relative;
display: block;
background: url(images/navitop.jpg) 0 0 no-repeat;
}

>   
> ~~~css

#navigationunten a,  

> #navigationunten a .hover {  
> height: 31px; /*70*/  
> position: relative;  
> display: block;  
> background: url(images/navibot.jpg) 0 0 no-repeat;  
> }

Das Problem ist eben, das ich noch viele weitere Codeschnipsel mit der ID #navigation habe und ich nicht jedes davon in der css datei verdoppeln und umbenennen will.

Ich sehe Dein Problem nicht.

Aber so wie du es sagst sieht es wohl so aus als müsste ich mir die Arbeit machen.

Musst Du doch nicht. Machst Du doch jetzt auch schon fuer die bestehenden Elemente nicht. Warum faengst Du denn fuer #navigationunten damit an?

#navigationoben a,

#navigationoben a .hover, #navigationunten a,
#navigationunten a .hover  {
height: 31px; /70/
position: relative;
display: block;
background: url(images/navitop.jpg) 0 0 no-repeat;
}

  
Ausserdem kannst Du, wie Der Martin schon erwaehnte, Klassen benutzen. Wobei immer noch fraglich ist, ob Du wirklich 'a .hover' meinst.  

-- 
Ich bin dafuer verantwortlich was ich sage, nicht dafuer, was Du verstehst.

[Der Martin]

Moin,

Also ich mach mal nen Beispiel wie ich es umschreiben würde wenn ich keine "Unterklassen" oder so etwas in der Art benutzen könnte

mir scheint, das habe ich schon richtig verstanden

Das Problem ist eben, das ich noch viele weitere Codeschnipsel mit der ID #navigation habe

Ja, und das darf nicht sein. Eine ID darf in einem Dokument nicht mehrmals definiert werden, ebenso wie ein Autokennzeichen oder eine Personalausweisnummer.

und ich nicht jedes davon in der css datei verdoppeln und umbenennen will.
Aber so wie du es sagst sieht es wohl so aus als müsste ich mir die Arbeit machen.

Nein, eben nicht.
Abgesehen davon, dass du ja weitere Selektoren einfach mit Komma mit aufzählen kannst, wie du es bisher auch schon tust, empfehle ich dir hier eine Klasse anstatt der ID. Das sagte ich aber schon.

So long,
 Martin