CSS: Eigenschaften vererben

Beitrag von **mcchaos** » 22.10.2004, 15:44

Hallo!

Ich habe einige selbstdefineirte CSS-Eigenschaften, nur als Beispiel:

.WarenkorbArtikel&#123; border-color&#58;#FF0000;border-width&#58;1px;border-style&#58;solid;background-color&#58;#00FF00;text-align&#58;left;&#125;
				         
.WarenkorbPreise&#123; border-color&#58;#FF0000;border-width&#58;1px;border-style&#58;solid;background-color&#58;#00FF00;text-align&#58;right;&#125;

Der Unterschied besteht also nur im text-align. Trotzdem müßte ich - wenn ich z.B. die border-color ändern möchte, dies in allen Klassen tun, was etwas mühsam und fehleranfällig ist.

Gibt es eine Möglichkeit, die Klasse WarenkorbPreise von WarenkorbArtikel "erben" zu lassen und dann nur den text-align neu zu setzen?

von **Anzeige von ABAKUS** »

SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002

persönliche Betreuung
individuelle Beratung
kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.

Beitrag von **Jörg** » 22.10.2004, 16:18

du könntest statt zwei drei Klassen definieren

Code: Alles auswählen

.Warenkorb&#123; border-color&#58;#FF0000;border-width&#58;1px;border-style&#58;solid;background-color&#58;#00FF00;&#125; 

.Artikel&#123; text-align&#58;left;&#125;
                      
.Preise&#123; text-align&#58;right;&#125;

und das dann z.B. so einbinden:

Code: Alles auswählen

<div class="Warenkorb Artikel"></div>
<div class="Warenkorb Preise"></div>

ich habs jetz allerdings nicht mehr im Kopf welche Browser mehrere Klassen pro Element unterstützern (NN4 jedenfalls nicht), müsste noch ausgetestet werden

edit:

2. Möglichkeit

wenn beide Elemente in einem übergeordneten Container liegen, kann man diesen als class="Warenkorb" klassifiziern

Code: Alles auswählen

<div class="Warenkorb">
<div class="Artikel"></div>
<div class="Preise"></div>
</div>

in der CSS-Datei muss dementsprechend stehen:

.Warenkorb div { border-color:#FF0000;border-width:1px;border-style:solid;background-color:#00FF00;}

.Artikel{ text-align:left;}

.Preise{ text-align:right;}