Vererbung

[bob]

Hallo Leute,

wie müsste das CSS aussehen wenn ich z.B. zwei DIVs habe, die die gleichen Eigenschaften haben sollen aber eins davon eine andere Eigenschaft oder eine Eigenschaft mehr.

Beispiel:

CSS:

.feld{
width:100px;
hight:40px;
padding:5px;
margin;10px;
background-color:#fff;
}

.feld2{
padding:20px;
border: 1px solid #999;
}

So, jetzt soll ".feld2" die gleichen Eigenschaften besitzten wie ".feld" mit dem Unterschied, dass das "padding" jetzt "20px" anstatt "5px" besitzt und ".feld2" soll noch um die Eigenschaft "border" ergänzt werden.

Ich weiss ist eigentlich was Anfänger und hat was mit Vererbung zu tun aber ich kenne die Syntax nicht.

Wäre nett wenn mir einer weiterhelfen könnte :)

Gruss Bob

[Ashura]

Hallo bob.

So, jetzt soll ".feld2" die gleichen Eigenschaften besitzten wie ".feld" mit dem Unterschied, dass das "padding" jetzt "20px" anstatt "5px" besitzt und ".feld2" soll noch um die Eigenschaft "border" ergänzt werden.

Dann nutzt du eben die aufzählende Schreibweise, um sowohl .feld als auch .feld2 die Eigenschaften zuzuweisen:

.feld, .feld2 {  
  /* Regeln, die für .feld und .feld2 gelten sollen */  
}

Den Regelsatz zu .feld2 kannst du unverändert belassen.

Siehe hierzu auch http://de.selfhtml.org/css/formate/zentrale.htm#elemente@title=SELFHTML.

Und bist du sicher, dass du pixelbasierte Dimensionsangaben verwenden möchtest? Normalerweise bieten sich em und % an.

Einen schönen Dienstag noch.

Gruß, Ashura

[bob]

Hallo Ashura,

vielen Dank erstmal, du hilfst mir jetzt schon nicht zum ersten Mal :)
Mit den Dimensionsangaben bin ich mir nicht so sicher, habe den Unterschied zwischen em und % noch nie so richtig verstanden(sind ja beide relative Angaben) bzw. kenne nicht die Vor- oder Nachteile. Soviel ich weiss streiten sich ja immer noch die Gelehrten darüber ob man px, em oder % verwenden sollte. Trotzdem habe ich festgestellt, dass em bei den meisten Websites verwendet wird um Schriftgrössen o.ä. zu definieren.

Dir auch einen schönen Dienstag.

Gruss Bob

[Ashura]

Hallo bob.

Mit den Dimensionsangaben bin ich mir nicht so sicher, habe den Unterschied zwischen em und % noch nie so richtig verstanden(sind ja beide relative Angaben) bzw. kenne nicht die Vor- oder Nachteile.

Einen gravierenden Vorteil von Dimensionsangaben in % kann ich dir nennen: du kannst damit rechnen. Du kannst einem umspannenden Element eine Breite von 100% zuweisen und dann mit ein wenig Rechenarbeit die Abstände sowie die Breiten der in ihm enthaltenen Elemente festlegen. Bei em ist dies nicht möglich.
Die Maßeinheit em dagegen hat nun einmal den Vorteil, dass sie sich an den mehr oder weniger willentlich getätigten Einstellungen im Client des Nutzers richtet.

Soviel ich weiss streiten sich ja immer noch die Gelehrten darüber ob man px, em oder % verwenden sollte.

Ich nutze px eigentlich nur für Angaben zur border-width, ansonsten eben em und %. (Und im Druckstylesheet noch pt.)

Einen schönen Dienstag noch einmal.

Gruß, Ashura

[wahsaga]

hi,

wie müsste das CSS aussehen wenn ich z.B. zwei DIVs habe, die die gleichen Eigenschaften haben sollen aber eins davon eine andere Eigenschaft oder eine Eigenschaft mehr.

Es geht dir also nicht um Vererbung, sondern um Anwendung von Selektoren.

.feld{
...
.feld2{

So, jetzt soll ".feld2" die gleichen Eigenschaften besitzten wie ".feld" mit dem Unterschied, dass das "padding" jetzt "20px" anstatt "5px" besitzt und ".feld2" soll noch um die Eigenschaft "border" ergänzt werden.

Entweder verpasst du dem Element beide Klassen - oder du entscheidest dich für die abweichenden Formatierungen zusätzlich für einen Selektor höherer Spezifität, oder du notierst es einfach folgendermaßen:

.feld1, .feld2 { /*allgemeine Eigenschaften+/ }
.feld2 { /*sepzielle Eigenschaften, die auf Grund ihrer späteren Deklaration die ersteren überschreiben*/ }

gruß,
wahsaga

[Sil]

Ich bin mir nicht ganz sicher was Du suchst, aber ev sowas:
<div id="div1" class="feld">text</div>
<div id="div2" class="feld feld2">text</div>

dem zweiten DIV werden so beide klassen zugewiesen.

[Ashura]

Hallo Sil.

Ich bin mir nicht ganz sicher was Du suchst, aber ev sowas:
<div id="div1" class="feld">text</div>
<div id="div2" class="feld feld2">text</div>

dem zweiten DIV werden so beide klassen zugewiesen.

Dein Gedankengang ist richtig, nur führst du ihn an der falschen Stelle durch.
Nicht das HTML muss sich der gewünschten Anzeige anpassen, sondern das CSS. Im Idealfall wird das HTML-Dokument nicht mehr angerührt, nachdem die Strukturierung abgeschlossen wurde.

(Und die IDs „div1“ und „div2“ haben einen Aussagwert gleich Null; hier sollten, wenn überhaupt erforderlich, sinnvollere Bezeichnungen vergeben werden.)

Einen schönen Dienstag noch.

Gruß, Ashura

[bob]

So vielen Dank erstmal an alle,

habe aber noch ein kleines Problem mit float:left!

Das ist mein richtiges CSS:

a.but:link, a.but:visited, a.but2:link, a.but2:visited {
    width: 104px;
    height: 26px;
    display:block;
    float:left;
    background-image: url(../pix2/but/butvor2.gif);
    text-align:center;
    line-height:26px;
    text-decoration:none;
    color:#999999;
    font-family:Arial, Helvetica, sans-serif;
}

a.but2:link, a.but2:visited {
    width:88px;
    height:25px;
    background-image:url(../pix2/but/butvor.gif);
}

Ich möchte kein float:left beim "a.but2" haben!

Was tun?

ps:
a.but2:link, a.but2:visited {
    width:88px;
    height:25px;
    background-image:url(../pix2/but/butvor.gif);
    float:none;
}
bringt nix!

Gruss...

[bob]

ps:
a.but2:link, a.but2:visited {
    width:88px;
    height:25px;
    background-image:url(../pix2/but/butvor.gif);
    float:none;
}
bringt nix!

Gruss...

Nehme alles zurück, mein zeiter link hatte noch die classe "but" anstatt "but2". Alles funktioniert wie es soll, danke!

gruss...

[wahsaga]

hi,

Ich möchte kein float:left beim "a.but2" haben!

Was tun?

Hebe float für diese Elemente ganz einfach wieder auf - in dem du es auf den Initialwert setzt.
(Nein, ich sage dir jetzt nicht, welcher das ist - ein bisschen was kannst du auch mal selber nachschlagen.)

gruß,
wahsaga

[Ashura]

Hallo wahsaga.

Hebe float für diese Elemente ganz einfach wieder auf - in dem du es auf den Initialwert setzt.

Öhm, hat er doch?

a.but2:link, a.but2:visited {  
    /* … */  
    float:none;  
}

Einen schönen Dienstag noch.

Gruß, Ashura