Problem mit Klassen und DIV

[sub-xero]

Hallo zusammen,

ich habe im Stylesheet folgendes definiert, um wechselnde Hintergrundgrafiken über Klassen zu steuern:

div#absatz  
{  
	height: 220px;  
	width: 910px;  
	background: url(test.jpg) no-repeat;  
}  
.variante1  
{  
	background: url(variante.jpg) no-repeat;  
}

Leider greift die Klasse nicht, wenn ich im HTML-Code folgendes angebe:

<div id="absatz" class="variante1">  
</div>

Kann mir jemand helfen und mir sagen, was ich falsch mache?
Vielen Dank schonmal im Voraus!

[Cheatah]

Hi,

Kann mir jemand helfen und mir sagen, was ich falsch mache?

Du beachtest die Spezifität der Selektoren nicht.

Cheatah

[sub-xero]

Hi,

Kann mir jemand helfen und mir sagen, was ich falsch mache?

Du beachtest die Spezifität der Selektoren nicht.

Wie bitte?

[Helmut Weber]

Hallo sub-xero,

Cheatah meinte, dass die CSS-Anweisung für die ID #absatz mehr Gewichtung erhält als für die Klasse .variante1, und daher diese immer "überschreibt".

Umgehen könntest Du dies, wenn Du die zweite Anweisung so deklarierst:
div#absatz.variante1 { ... }

Trotzdem solltest Du deine gesamte Dokumentenstruktur nochmals überdenken, da eine ID nur 1x in einem Dokument vorkommen darf, und es daher eigentlich gar keine Variante 1 und/oder 2 geben darf.

Herzliche Grüße aus Ellhofen
Helmut Weber

[sub-xero]

Cheatah meinte, dass die CSS-Anweisung für die ID #absatz mehr Gewichtung erhält als für die Klasse .variante1, und daher diese immer "überschreibt".

Umgehen könntest Du dies, wenn Du die zweite Anweisung so deklarierst:
div#absatz.variante1 { ... }

Vielen Dank für diese Antwort, das war sehr hilfreich!
Gibt es denn eine elegante Lösung, ein einzelnes Attribut eines DIV (z.B. durch Klassen) zu variieren, ohne den gesamten DIV mehrmals in allen Varianten definieren zu müssen?

[gast42]

Gibt es denn eine elegante Lösung, ein einzelnes Attribut eines DIV (z.B. durch Klassen) zu variieren, ohne den gesamten DIV mehrmals in allen Varianten definieren zu müssen?

Klar: gemeinsame Klasse, Besonderheiten durch ID kennzeichnen

(also genau umgekehrt zu dem, wie du es gemacht hast)

[Helmut Weber]

Hallo sub-xero,

Gibt es denn eine elegante Lösung, ein einzelnes Attribut eines DIV (z.B. durch Klassen) zu variieren, ohne den gesamten DIV mehrmals in allen Varianten definieren zu müssen?

Ein HTML-Element kann auch mehrere Klassen haben. In deinem Beispiel würde es dann so aussehen:
<div class="absatz variante1"></div>
<div class="absatz variante2"></div>

Per CSS deklarierst Du für die Klasse "absatz" die allgemein gültigen Gestaltungselement, und in den Klassen "variante1" bzw. "variante2" die spezifischen unterschiede.

Herzliche Grüße aus Ellhofen
Helmut Weber

[sub-xero]

Ein HTML-Element kann auch mehrere Klassen haben. In deinem Beispiel würde es dann so aussehen:
<div class="absatz variante1"></div>
<div class="absatz variante2"></div>

Per CSS deklarierst Du für die Klasse "absatz" die allgemein gültigen Gestaltungselement, und in den Klassen "variante1" bzw. "variante2" die spezifischen unterschiede.

Perfekt, so funktioniert es und so werde ich es machen. Vielen Dank noch einmal!

[gast_42]

Perfekt, so funktioniert es und so werde ich es machen.

nur als Anmerkung:

für Einmaliges gibt's IDs, Klassen sind für Gemeinsamkeiten da, insofern ist der Tipp von Helmut Weber hier evtl. irreführend.

[Helmut Weber]

Hallo gast_42,

für Einmaliges gibt's IDs, Klassen sind für Gemeinsamkeiten da, insofern ist der Tipp von Helmut Weber hier evtl. irreführend.

Warum so förmlich? ;-)

Ich kenne in diesem Fall ja nicht die ganze Dokumentenstruktur, und habe sub-xero ja auch darauf hin gewiesen, dass er diese genau überdenken sollte.

Ich habe sein Beispiel "nur" um ein weiteres DIV-Element erweitert, und extra auf IDs verzichtet, weil sein DIV ja nicht mehr einmalig ist. Was kann hier sub-xero in die Irre führen bzw. ist missverständlich?

Herzliche Grüße aus Weinsberg
Helmut Weber

[Gunnar Bittersmann]

@@sub-xero:

nuqneH

Du beachtest die Spezifität der Selektoren nicht.
Wie bitte?

Natürlich hätte Cheatah dir die Verweise zur CSS-Spezifikation oder http://de.selfhtml.org/css/formate/kaskade.htm@title=SELFHTML auf dem Silbertablett servieren können. Aber die sind nun acuh wirklich nicht schwer zu finden.

Was tut man, wenn man einen Begriff nicht versteht? Man begibt sich auf die Suche …

Qapla'

[Gunnar Bittersmann]

@@sub-xero:

nuqneH

div#absatz
.variante1

Meine Glaskugel zeigt: Du hast mehrere div mit der ID "absatz"?

Das ist natürlich nicht erlaubt; ID steht für Identität. Es dürfen ja auch nicht zwei Bürger eines Landes dieselbe Personalausweisnummer haben und nicht zwei Autos dasselbe Kennzeichen.

Und was soll das div überhaupt auszeichnen? Für einen Absatz gibt es ein http://de.selfhtml.org/html/text/index.htm@title=HTML-Element: p.

Qapla'