Kombination ID und Klasse - Verständnisproblem

[Rols]

Ich grüße Euch,

mein kleines Problem habe ich zwar schon SELF gelöst, aber, wie ich meine, nicht sehr elegant.

Ich habe ein Menü, das in ähnlicher, aber nicht gleicher Weise auf mehreren Seiten (natürlich nur jeweils einmal) verwendet wird. Das betreffende HTML-Element (<ul>) hat immer die ID "menu".

Die Grundformatierung geschieht zentral durch:
#menu { /* Formate */ }

Für die individuelle Feinformatierung, die von Seite zu Seite wechseln kann, möchte ich Klassen verwenden, so daß im HTML steht:

<ul #ID="menu" class="aussehen1">

oder auf einer anderen Seite

<ul #ID="menu" class="aussehen2">

Solange ich diese Klassen global definiere:
.aussehen1 {}
.aussehen2 {}

klappt alles prima, aber das kann ja nicht Sinn der Sache sein, diese Formatierungen soll es nur im Kontext eines <ul>-Elements mit der ID "menu" geben.

Also habe ich notiert:

#menu.aussehen1 {}
#menu.aussehen2 {}

was valide ist. Ist es auch richtig?

Firefox und Opera stellen alles wie gewünscht da. Der Internetexplorer 6 akzeptiert aber anscheinend nur _eine_ Klasse zu einer ID, nämlich die, die als erstes notiert wurde!

Any idea?

Danke schonmal

[Dennis]

Hi Rols,

#menu.aussehen1 {}
#menu.aussehen2 {}

was valide ist. Ist es auch richtig?

Ja, das sollte richtig sein (im Zweifelsfall durch einen CSS-Validator jagen) - soweit ich weiß wird es in der Form auch von allen verbreiteten Browsern interpretiert.

Allerdings bedeutet oben stehendes: Für ein Element #menu mit der Klasse aussehen1 - du wolltest jedoch ein Ul-Element mit der ID #menu und Klasse aussehen1 haben, folglicherweise müsstest du strenggenommen das hier verwenden:

ul#menu.aussehen1 { /* Formatierungen */ }

Im Bezug auf eine einzelne HTML-Seite bedeutet dies jedoch dasselbe wie

#menu { /* Formatierungen */ }

Warum? Weil in jedem HTML-Dokument jede ID nur ein einziges Mal vergeben werden darf! Ein #menu.aussehen1 macht also nur dann Sinn, wenn dasselbe Stylesheet auf mehrern Seiten eingebunden wird und in mehreren Seiten ein Element mit der ID menu vorkommt - aber mit einer verschiedenen Klasse.

MfG, Dennis.

[Rols]

Hallo Dennis,

Ja, das sollte richtig sein (im Zweifelsfall durch einen CSS-Validator jagen)

Ist geschehen.

du wolltest jedoch ein Ul-Element mit der ID #menu und Klasse aussehen1 haben, folglicherweise müsstest du strenggenommen das hier verwenden:
ul#menu.aussehen1 { /* Formatierungen */ }

OK, ist nur konsequent. Wenn ich die KLasse an die ID binden will, sollte ich das dann auch mut dem <ul>-Element verknüpfen.

Habe ich so umgesetzt, ändert leider nichts daran, daß IE6 bei mehreren derartigen Klassen nur die zuerst notierte schlucken will, die anderen ignoriert das Teil konsequent.

Könnte man das, was ich möchte (Klasse "lokal" zur ID an einem bestimmten HTML-Element), denn auch anders notieren?

#menu.aussehen1 macht nur dann Sinn, wenn dasselbe Stylesheet auf mehrern Seiten eingebunden wird und in mehreren Seiten ein Element mit der ID menu vorkommt - aber mit einer verschiedenen Klasse.

Jau, exakt so verwende ich das.

Danke!
Rols

[Der Martin]

Moin,

#menu.aussehen1 {}
#menu.aussehen2 {}
Allerdings bedeutet oben stehendes: Für ein Element #menu mit der Klasse aussehen1 ...

nein, es bedeutet: Selektiere ein Element _beliebigen Typs_ mit der ID "menu" und der Klasse "aussehen1" bzw. "aussehen2". Wenn du ein Element über seine ID selektierst, kannst du den Elementnamen getrost weglassen, da die Zuordnung über die ID sowieso schon eindeutig sein muss.
Die zusätzliche Angabe der Klasse ergibt natürlich nur Sinn, wenn dasselbe Stylesheet für verschiedene Dokumente genutzt wird, was ihr ja schon durchdiskutiert habt.

[...] folglicherweise müsstest du strenggenommen das hier verwenden:
ul#menu.aussehen1 { /* Formatierungen */ }

Nein, siehe oben. Es schadet aber auch nicht ...

So long,
 Martin

[Dennis]

Hi Martin,

Wenn du ein Element über seine ID selektierst, kannst du den Elementnamen getrost weglassen, da die Zuordnung über die ID sowieso schon eindeutig sein muss.

Genau das wollte ich doch sagen ;-)

Die zusätzliche Angabe der Klasse ergibt natürlich nur Sinn, wenn dasselbe Stylesheet für verschiedene Dokumente genutzt wird, was ihr ja schon durchdiskutiert habt.

Genau das habe ich doch auch gesagt *g* Genauso kann aber der Elementtyp Sinn machen wenn das Stylesheet für mehrere Seiten verwendet wird - es kann ja einmal ul#menu und einmal ol#menu geben oder so.

[...] folglicherweise müsstest du strenggenommen das hier verwenden:
ul#menu.aussehen1 { /* Formatierungen */ }

Nein, siehe oben. Es schadet aber auch nicht ...

Mit "strenggenommen" bezog ich mich auf was er verwenden müsste, wenn der wirklich 100%ig das Gesagte umsetzen will.

MfG, Dennis.

[Axel Richter]

Hallo,

Also habe ich notiert:

#menu.aussehen1 {}
#menu.aussehen2 {}

Firefox und Opera stellen alles wie gewünscht da. Der Internetexplorer 6 akzeptiert aber anscheinend nur _eine_ Klasse zu einer ID, nämlich die, die als erstes notiert wurde!

Er akzeptiert nur einen (den ersten) ID-Selector je eindeutige ID-Bezeichnung je Style-Sheet.

Dieser IE Bug ist bekannt.

viele Grüße

Axel

[Der Martin]

Moin Axel,

Er [der IE6] akzeptiert nur einen (den ersten) ID-Selector je eindeutige ID-Bezeichnung je Style-Sheet.

Dieser IE Bug ist bekannt.

Danke, mir war er noch nicht bekannt.

Schönen Sonntag noch,
 Martin

[Rols]

Danke,

Er akzeptiert nur einen (den ersten) ID-Selector je eindeutige ID-Bezeichnung je Style-Sheet.

das klärt alles. Hatte zwar schon mal grob nach IE-CSS-Bugs gegooglet, aber doch eher an meine Dummheit geglaubt.

Rols

[Detlef G.]

Hallo Rols

Ich habe ein Menü, das in ähnlicher, aber nicht gleicher Weise auf mehreren Seiten (natürlich nur jeweils einmal) verwendet wird. Das betreffende HTML-Element (<ul>) hat immer die ID "menu".

Du könntest auch einem Vorfahrenelement des Menüs eine ID oder Klasse geben.
Dann verwendest du für die verschiedenen Varianten jeweils den Nachfahrenselektor.

#menu { /* Formate */ }  
#Variante1 #menu { /* spezielle Formate */ }  
#Variante2 #menu { /* spezielle Formate */ }  

bzw.

.Variante1 #menu { /* spezielle Formate */ }  
.Variante2 #menu { /* spezielle Formate */ }  

Wenn nicht nur das Menü sondern auch andere Teile genau dieser Seiten abweichende Formate haben sollen, könntest du dem body eine ID geben und damit alle abweichenden Formate dieser Seite mit dem Nachfahrenselektor ansprechen, wodurch du bestimmt diverse Klassen oder IDs einsparen könntest.

Beispiel:

#Variante1 h1 { /* spezielle Formate für h1-Überschriften dieser Seiten */ }  
#Variante1 p { /* spezielle Formate für Absätze dieser Seiten */ }  

Auf Wiederlesen
Detlef

[Rols]

Hallo Detlef,

danke für diese Idee:

Du könntest auch einem Vorfahrenelement des Menüs eine ID oder Klasse geben.
Dann verwendest du für die verschiedenen Varianten jeweils den Nachfahrenselektor.

In die Richtung habe ich auch schon gedacht, da die body-elemente der Seiten teilweise sowieso schon eigene Klassen haben.

Gefällt mir besser, als mich mit Broserweichen, Hacks etc. rumzuschlagen.

Schönen Sonntag noch
Rols