CSS für h1

[bootsmann]

Hallo,

ein eigentlich simples CSS macht mich gerade etwas "mürbe".
Ich habe in einem Projekt zwei Seitenlayouts im Einsatz (#main und #startseite) und folgendes CSS für die h1-Formatierung:

#main h1,
#main h1 .ce_headline {
width:420px;
margin:0;
padding:0 0 5px;
border-bottom:1px dotted #006;
font-weight:bold;
color:#006;
font:16px Arial,Verdana;
}

#startseite h1,
#startseite h1 .ce_headline {
width:420px;
margin:0;
padding:0 0 5px;
border-bottom:1px dotted #006;
font-weight:bold;
color:#006;
font:16px Arial,Verdana;
}

Keines der beiden CSS bringt eine h1-Formatierung mit bold in der Ansicht.
Habe ich irgendetwas übersehen?

Danke und Gruß
Andreas

[MacKP]

Hallo bootsmann,
ich mag mich irren, aber müsste das nicht eigentlich

#main h1.ce_headline

heißen? Also ohne Leerzeichen nach der h1. Wenn ich mich nicht irre, dann hast du im Quellcode <h1 class="ce_headline"> stehen, dann müsste das auch so sein. Bei deiner Angabe wäre es ein Tag innerhalb der h1 mit der Klasse ce_headline.

Ansonsten wird uns nur ein Link zu deiner Seite weiterhelfen um genaueres zu sagen.

Viele Grüße

[de_bonner]

Ja muss

#main h1.ce_headline

heißen, andernfalls müsste noch etwas nach ce_headline folgen

[bootsmann]

...die Seite ist noch im "Arbeits-Modus", hier mal der Link dazu:
http://spuren-im-schnee.de/index.php

Gruß Andreas

[MacKP]

Wenn du dir das ganze jetzt mit Firebug anschaust, dann sieht man, das deine Anweisungen mit '#startseite h1, #startseite h1.ce_headline' überschrieben wird. Eventuell solltest du mal schauen ob du diese Anweisungen so auch brauchst oder ob du die h1 für alle Seiten anlegen wirst ;-)

Viele Grüße

[bootsmann]

..den Gedanken werde ich mal weiter verfolgen, denn trotz unterschiedlicher Layouts bleibt ja h1 überall gleich...
nur "dotted" macht er jetzt nicht mehr...

Gruß Andreas

[Spooky]

nur "dotted" macht er jetzt nicht mehr...

Du hast #h1 statt h1 geschrieben:

#h1 {
    width:420px;
    margin:0;
    padding:0 0 5px;
    border-bottom:1px dotted #006;
    font-weight:bold;
    color:#006;
    font:16px Arial,Verdana
} 

[bootsmann]

... bei h1 zeigt er kein bold...

[Spooky]

In der von dir verlinkten Online-Version der Seite steht immer noch #h1 statt h1.

[bootsmann]

bei h1 wird die Überschrift nicht fett angezeigt und die Formatierung rutscht weg, bei #h1 ist alles so wie es soll...
wo liegt der fehler?

[Spooky]

bei h1 wird die Überschrift nicht fett angezeigt und die Formatierung rutscht weg, bei #h1 ist alles so wie es soll...
wo liegt der fehler?

Mach im FireFox einfach einen Rechtsklick auf ein h1 und wähle "Element Inspizieren" (oder wie auch immer es auf Deutsch heißt). Dann siehst du welche Styles greifen und überschrieben werden etc. Momentan sieht dein h1 style so aus:

h1 {
    width: 350px;
    margin: 40px 0px 0px;
    padding: 0px 0px 5px;
    color: #006;
    font: 16px Arial,Verdana;
} 

Aus dem spuren_standardcss Stylesheet.

[bootsmann]

wahrscheinlich sehe ich schon den Wald vor Bäumen nicht mehr, da ich auch im gesamten CSS keine weiteren h1-Formatierungen habe, die es überschreiben könnten. Das Original sieht so aus:

h1 {
width:350px;
margin:40px 0 0;
padding:0 0 5px;
font-weight:bold;
color:#006;
font:16px Arial,Verdana;
}

[Spooky]

Das Original sieht so aus:

h1 {
width:350px;
margin:40px 0 0;
padding:0 0 5px;
font-weight:bold;
color:#006;
font:16px Arial,Verdana;
}

Ah, jetzt seh' ich's erst . Die font: Definition überschreibt die font-weight: Definition. Du musst also entweder alle Anweisungen in die font: Definition geben, oder font-weight:bold; danach schreiben, oder alles auftrennen.

Sowas übersieht man gern mal.

[bootsmann]

....das wars dann auch! :-)
Super und danke für den Unterricht!