h1-formatierungsfehler?

[Loon3y]

Hallo, habe folgendes im css definiert:

div#main h1     { text-align:center; margin-bottom: 20px; }

und für die newsanzeige folgendes:

div#main div.news_over h1        { width: 22.79em; height: 1.07em; padding: 5px 0 0 10px; 
font-size: 0.6em; font-weight: bold; text-transform: uppercase; color: #C00; }

wenn ich nun im news_over was mit h1 schreibe, macht er mir den margin-bottom vom main h1 mit rein. wieso das? wieso übernimmt er die werte aus dem div davor? Wie könnte ich dem aus dem wege gehen? vllt dann das mit <h2> anfangen?

Gruß
Loon3y

 

[threadi]

Natürlich übernimmt er auch die Werte von #main h1. Um diese zu überschreiben (also ungültig zu machen) musst Du bei #main .news_over h1 den margin neu definieren.

 

[Efchen]

Die Selektoren div#main h1 und div#main div.news_over h1 sprechen ja u.U. auch die selben h1 an.
"div#main h1" heißt "alle h1 irgendwo innerhalb des div#main, d.h. ein h1, das in einem div.news_over steht, das wiederm auch teil des div#main ist, für dieses h1 gilt natürlich auch der erste Slektor, weil sich dieses zweite h1 auch innerhalb des div#main befindet.

Was Du meinst, ist "div#main > h1", das bedeutet "h1 ist Kindelement von div#main", also Kind und nicht Enkel oder Urenkel oder sonstiger Nachfahre.

Aber IIRC hat der IE mit dem Selektor ">" ein Problem.