CSS für verschachtelte Elemente korrekt angeben

[Sanne1612]

Hallo ihr Lieben,

ich möchte das Layout einer bestehenden Seite mit CSS beeinflussen. Die Struktur der Seite kann ich nicht ändern. Nun tue ich mich schwer das korrekt und elegant zu machen, da ich es irgendwie nicht realisiert bekomme die einzelnen Elemente geschickt anzusprechen und so quasi jedes einzelne editiere. Sehr umständlich und zeitaufwendig. Ich gehe davon aus, dass es auch einfacher geht.

Der Aufbau der Seiten ist eigentlich immer gleich:

<div id="seite1" class="formular1">

ein Haufen höchst-verschachtelter Elemente, Formulare, auch weitere DIVs etc.

</div>

Jetzt möchte ich nichts weiter als, dass für ein bestimmtes Element, sagen wir alle Labels, innerhalb dieses DIVs die gleichen Formatierungen gelten, egal in welchem Zusammenhang es vorkommt. Das müsste doch möglich sein?

Kann irgendwer helfen?

Viele Grüße Sanne

[Der Martin]

Moin,

ich möchte das Layout einer bestehenden Seite mit CSS beeinflussen. Die Struktur der Seite kann ich nicht ändern.

wenn die einigermaßen vernünftig aufgebaut ist, ist das auch nicht schlimm.

Jetzt möchte ich nichts weiter als, dass für ein bestimmtes Element, sagen wir alle Labels, innerhalb dieses DIVs die gleichen Formatierungen gelten, egal in welchem Zusammenhang es vorkommt. Das müsste doch möglich sein?

Ja. http://wiki.selfhtml.org/wiki/CSS/Selektoren könnte ein gute Einstieg für dich sein.
In kurz:

element { ... }
   Selektiert alle Elemente eines bestimmten Typs, z.B. alle div-Elemente
.klasse { ... }
   Selektiert alle Elemente, die eine bestimmte Klasse haben
#id { ... }
   Selektiert _das Element_ mit einer ID (es darf nur eins davon geben)

Interessant wird's erst, wenn man diese Selektoren dann kombiniert, z.B. mit dem Nachfahrenselektor. So selektiert beispielsweise

div#seite1 label { ... }

alle label-Elemente, die sich irgendwo innerhalb eines div-Elements mit der ID seite1 befinden. Der verlinkte Wiki-Artikel zeigt noch eine Reihe anderer Möglichkeiten auf.

So long,
 Martin

[Gunther]

Moin!

#id { ... }
   Selektiert _das Element_ mit einer ID (es darf nur eins davon geben)

Interessant wird's erst, wenn man diese Selektoren dann kombiniert, z.B. mit dem Nachfahrenselektor. So selektiert beispielsweise

div#seite1 label { ... }

Aus dem Erstgenannten folgt, dass Letzteres also auch nur

#seite1 label { ... }  

heißen sollte! ;-)

Gruß
Gunther

[Der Martin]

Hallo,

#id { ... }
   Selektiert _das Element_ mit einer ID (es darf nur eins davon geben)

Aus dem Erstgenannten folgt, dass Letzteres also auch nur
#seite1 label { ... }
heißen sollte! ;-)

das ist korrekt. Ich gebe auch gern zu, dass ich
 a) an diese sinnvolle Verkürzung nicht gedacht habe und
 b) das Beispiel bewusst möglichst explizit gemacht habe.
Ich neige im technischen Kontext sowieso dazu, auch optionale Angaben der Klarheit wegen häufig mit anzugeben. Hier wäre sogar denkbar, dass die Angabe von div#seite1 anstatt #seite1 wegen der unterschiedlichen Spezifizität wieder sinnvoll sein könnte - je nachdem, was sonst so alles im Stylesheet steht.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Hier wäre sogar denkbar, dass die Angabe von div#seite1 anstatt #seite1 wegen der unterschiedlichen Spezifizität wieder sinnvoll sein könnte - je nachdem, was sonst so alles im Stylesheet steht.

Wenn div#seite1 anstatt #seite1 nötig sein sollte, dann steht ziemlicher Mist im Stylesheet.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Wenn div#seite1 anstatt #seite1 nötig sein sollte, dann steht ziemlicher Mist im Stylesheet.

Für neue Browser ist das Element mit der ID ‚seite1‘ ein section-Element.
section#seite1 und div#seite1 sollen anders gestaltet werden.

Deshalb steht im CSS

#seite1 {  
  /* … */  
}  
div#seite1 {  
  display: none;  
}

SCNR.

Matthias

[Sanne1612]

Hallo,

so einfach ist es leider nicht. Die Anweisung hat keinerlei Auswirkungen.
Meinem Verständnis nach müsste es so funktionieren. Tut es aber nicht.
Was kann das Problem sein? Im Inspektor (Firefox) wird die Regel auch nicht
angezeigt und selbst wenn er sie ignorieren würde aus irgendeinem Grund,
würde sie ja angezeigt und durchgestrichen.

Viele Grüße
Sanne

[Gunther]

Hallo!

so einfach ist es leider nicht. Die Anweisung hat keinerlei Auswirkungen.
Meinem Verständnis nach müsste es so funktionieren. Tut es aber nicht.
Was kann das Problem sein?

Es wäre hilfreich, wenn du uns mal den relevanten Teil deines CSS (und ggf. auch den betreffenden Auszug aus deinem HTML) zeigen würdest ...! ;-)

Im Inspektor (Firefox) wird die Regel auch nicht
angezeigt und selbst wenn er sie ignorieren würde aus irgendeinem Grund,
würde sie ja angezeigt und durchgestrichen.

Ja, wobei die Regel nicht "ignoriert" wird, sondern in so einem Fall durch eine nachfolgende, oder eine mit einer höheren Spezifität überschrieben wird.

Gruß
Gunther

[Sanne1612]

Hallo,

das wollte ich vermeiden, da es nicht mit ein "bisschen" Code getan ist. Hier ein für die Seite typischer Ausschnitt aus dem HTML:

http://pastebin.com/FULzr67k

Relevantes CSS:

.form-item label {  
    font-size: 13px;  
    font-weight: bold;  
}  
  
.form-item label {  
    font-size: 0.929em;  
}  
  
label {  
    float: left;  
    padding-left: 3px;  
}  
  
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {  
    margin: 0px;  
    padding: 0px;  
    border: 0px none;  
    font: inherit;  
    vertical-align: baseline;  
}  
  
label {  
    display: block;  
    font-weight: bold;  
}

und gemäß meiner Logik:

#edit-field-kunden-name  lable {  
width: 120px;	  
}

Vielleicht hilft es ja dennoch weiter.

Viele Grüße!

[Gunther]

Hallo!

das wollte ich vermeiden, da es nicht mit ein "bisschen" Code getan ist. Hier ein für die Seite typischer Ausschnitt aus dem HTML:

http://pastebin.com/FULzr67k

Relevantes CSS:

label {
    float: left;
    padding-left: 3px;
}

label {
    display: block;
    font-weight: bold;
}

>   
>   
>   
> und gemäß meiner Logik:  
>   
> ~~~css

#edit-field-kunden-name  lable {  

> width: 120px;	  
> }

Vielleicht hilft es ja dennoch weiter.

Tut es! ;-)
Wenn du jetzt nochmal genau auf die Schreibweise achtest, bin ich sicher, du siehst es jetzt auch ...! ;-)

Gruß
Gunther

[Sanne1612]

Leider nein :-( , hab mich lediglich im Forum vertippt. Steht schon

#edit-field-kunden-name  label {  
width: 120px;  
}

im Quelltext.

[Gunther]

Leider nein :-( , hab mich lediglich im Forum vertippt. Steht schon

#edit-field-kunden-name  label {

width: 120px;
}

>   
> im Quelltext.  
  
Dann ist (mir zumindest) anhand deiner Infos nicht ersichtlich, warum die Regel vom Browser nicht angewendet werden sollte.  
  
  
Gruß  
Gunther

[Sanne1612]

Habe es nun mittels direktem Selektor gelöst. Damit geht es.

[ChrisB]

Hi,

Leider nein :-( , hab mich lediglich im Forum vertippt. Steht schon

#edit-field-kunden-name  label {

width: 120px;
}

>   
> im Quelltext.  
  
Und was genau „funzt“ daran jetzt angeblich nicht?  
  
<http://jsfiddle.net/pLq7Ln58/> – die ersten sechs Labels unter „Name“ haben alle 120px Breite … also wo ist jetzt das vermeintliche Problem …?  
  
MfG ChrisB  
  

-- 
Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/

[Matthias Apsel]

Om nah hoo pez nyeetz, Sanne1612!

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

margin: 0px;
    padding: 0px;
    border: 0px none;
    font: inherit;
    vertical-align: baseline;
}

  
Es ist nicht sinnvoll, die Abstände für alle Elemente so konsequent auf Null zu setzen. Du musst hinterher alle Abstände per Hand setzen, auch die, deren Standardwerte möglicherweise passen würden.  
  
0px ist dasselbe wie 0[pc](http://de.wikipedia.org/wiki/Parsec). Deshalb kannst du die Einheit weglassen.  
  
Es haben nur die Elemente per default einen border, die den auch haben sollten, input, textarea, fieldset beispielsweise.  
  
font wird automatisch vererbt, das brauchst du nicht zu schreiben.  
  
Der default-Wert von vertical-align ist baseline.  
  
Eine sinnvolle Normalisierung um Browserunterschiede auszugleichen wäre etwa  
  
~~~css
ul, ol, li, dl, dt, dd {  
  display: block;  
  padding: 0;  
  margin: 0;  
}  
  
li {  
  display: list-item;  
  margin-left: 2em;  
}

Matthias

[MudGuard]

Hi,

font wird automatisch vererbt, das brauchst du nicht zu schreiben.

Das sorgt aber dafür, daß Elemente, die üblicherweise eine andere Schrift haben, auch die "normale" Schrift verwenden. Beispiele: pre, textarea verwenden üblicherweise ne monospaced-Schrift - nach diesem Ruleset wird pre auch die "normale" Schrift verwenden, also üblicherweise eine nicht-monospaced-Schrift.

Sinnvoll finde ich solche General-Rücksetzungs-Mechanismen nicht.
Sinnlos sind die wenigsten Browser-Voreinstellungen - im Zweifelsfall sind die sinnvoller als padding/margin:0.
Und wenn ich explizit bestimmte Werte haben will, setze ich die halt. Gezielt.

Eine sinnvolle Normalisierung um Browserunterschiede auszugleichen wäre etwa

ul, ol, li, dl, dt, dd {

display: block;
  padding: 0;
  margin: 0;
}

  
Auch hier ist meine Meinung: nicht erstmal "normalisieren", sondern im Bedarfsfall passende Werte vorgeben.  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)  
[O o ostern ...](http://ostereier.andreas-waechter.de/)  
  
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.