Wie margin-top beim ersten h1 im div ignorieren?

[BRotondi]

Guten Morgen

Wenn ich in einem Div gleich zuoberst ein <h1>Titel</h1> habe, wirkt das margin-top sehr störend.

Gibt es einen Trick, dieses zu unterbinden?

(Meine Idee, via php das h1 durch ein gleich formatiertes span zu ersetzen, ist nicht ganz perfekt. Beim Copy/Paste nach Word geht die Gliederung verloren. Auch benötigt allenfalls mal ein automatisches Inhaltsverzeichnis diese Header.)

Besten Dank für Eure Tipps!
Bruno

 

[Efchen]

Wenn ich in einem Div gleich zuoberst ein <h1>Titel</h1> habe, wirkt das margin-top sehr störend.
Gibt es einen Trick, dieses zu unterbinden?

Nein. Mit Tricks hat das nichts zu tun. "margin-top:0" einstellen und fertig.

Meine Idee, via php das h1 durch ein gleich formatiertes span zu ersetzen, ist nicht ganz perfekt.

Nicht ganz perfekt? Das hört sich nach ausgewachsenem Blödsinn an. Eine Überschrift wird als Überschrift ausgezeichnet. Wenn Du das durch das allgemeine Inline-Element ersetzt, hast Du nicht nur auf einmal kein Block-Element mehr, sondern ein Inline-Element, nein Du änderst auch noch die Bedeutung Deines Inhalts! Und das ist ja Quatsch.

Beim Copy/Paste nach Word geht die Gliederung verloren.

Du bearbeitest Websites aber hoffentlich nicht mit einem Textverarbeitungsprogramm?

 

[BRotondi]

Guten Morgen Efchen

Merci für den Hinweis. Bringt mich auf die banale Lösung, das erste <h1> mit <h1 style="margin-top:0;"> zu ersetzen. Weiss jemand gerade, welche php-Funktion hierfür zuständig ist? str_replace ersetzt offenbar immer alles...

Eine einfachere Möglichkeit gibt es wohl nicht. conditional css z.B scheint mir nicht für so was gedacht.

Du bearbeitest Websites aber hoffentlich nicht mit einem Textverarbeitungsprogramm?

:) Nein, sauberes Copy/Paste zu ermöglichen ist ein Service.

 

[rapid10]

Arbeite doch mit einer externen CSS-Datei. Wozu brauchst du da conditional und str_replace?

 

[Space Vampire]

du kannst h1 ja auch noch ne zusätzliche class oder id verpassen, wenn du mehrere formatierungen brauchst.
dann kannst du h1 ganz normal mit margin nutzen und im bedarfsfall wie in deinem beispiel mit der class/id auszeichnen.

aber mal ganz davon abgesehen:
wann braucht man ernsthaft schon mal alle 6 h-tags in unterschiedlichen größen?
wenns bei dir reicht, mach h1 mit margin-top:0 und dann h2 in identischer formatierung, aber MIT margin.
sollte selbst semantisch immer noch korekt sein, da h1 ja in diesem fall immer die erste überschrift auf jeder deiner seiten ist...

wenn nicht, möge man mich korrigieren.

 

[BRotondi]

mach h1 mit margin-top:0 und dann h2 in identischer formatierung, aber MIT margin.

Genau das war die bisherige Lösung. Nachteil wie erwähnt beim Copy/Paste nach Word.

Der eigentliche Grund für meine Lösung ist aber der, dass ich gerne die Grenzen des Machbaren ausreize bzw. neue Möglichkeiten und clevere Lösungen kennen lerne.

 

[Efchen]

dwann braucht man ernsthaft schon mal alle 6 h-tags in unterschiedlichen größen?

Bei den 6 Ordnungsstufen der Überschriften geht es nicht um die Größe.

wenns bei dir reicht, mach h1 mit margin-top:0 und dann h2 in identischer formatierung, aber MIT margin.

Das wäre ja semantisch falsch. <h2> ist eine Überschrift 2. Ordnung, also dem <h1> untergeordnet. Was Du vorschlägst, wäre aber, <h2> als gleichwertige Überschrift zu <h1> zu missbrauchen.

sollte selbst semantisch immer noch korekt sein

Kommt auf den Inhalt an. Wenn man <h1> als "Site-Überschrift" verwendet und die nur 1x vorkommt, dann könnte das hinhauen, ja.

 

[stachelbeer]

und das Pseudoformat :first-child hilft nicht?

 

[Space Vampire]

So habe ich die Fragestellung oben auch verstanden. Derzeit benutzt er h1 wohl an mehreren Stellen im Dokument. Anders ist es wohl nicht zu erklären, dass ihn die Margin im obersten Element stört und anderswo offenbar nicht.
Wenn er h1 ausschließlich da nutzen würde, wo ihn die Margin stört, wäre die Lösung denkbar einfach. "Wegformatieren" und fertig.
da ist die logische Lösung ziemlich naheliegend, h2 als (ich nenns jetzt mal) Abschnittsüberschrift so zu formatieren, wie er es benötigt. Ob beide Überschriften die gleiche Größe und Stärke haben ist dann doch eher Zweitrangig, solange h1 nicht nochmal mitten im Dokument auftaucht...

Aber um darauf mal zurückzukommen:

Das wäre ja semantisch falsch. <h2> ist eine Überschrift 2. Ordnung, also dem <h1> untergeordnet. Was Du vorschlägst, wäre aber, <h2> als gleichwertige Überschrift zu <h1> zu missbrauchen.

Was wäre die dogmat...äh...semantisch richtige lösung, wenn er nunmal zwei überschriften gleicher Größe an zwei verschiedenen stellen des Dokumentes benötigt, die sich nur durch vorhanden- oder nichtvorhandensein einer Topmargin unterscheiden?

 

[Efchen]

Was wäre die dogmat...äh...semantisch richtige lösung, wenn er nunmal zwei überschriften gleicher Größe

...die Größe der Überschriften spielt für die Semantik keine Rolle...

an zwei verschiedenen stellen des Dokumentes benötigt, die sich nur durch vorhanden- oder nichtvorhandensein einer Topmargin unterscheiden?

Dann muss er die beiden Überschriften gleicher Ordnung (<h1>) irgendwie kennzeichnen können. Entweder durch eine Klasse, durch eine ID oder durch die Elternelemente.

 

[BRotondi]

und das Pseudoformat :first-child hilft nicht?

1000 Dank!

Das ist die absolut beste Lösung, kannte ich nicht!

h1 {
    margin-top: 30px;
}
h1:first-child {
    margin-top: 0;
}

 

[Efchen]

Gibt vermutlich auch genug Browser, die das nicht können, der IE6 z.B.