Woher kommt das Margin Problem?

Josh

Josh

Legendäres Mitglied
Hallo alle

Vergleicht mal die beiden Dokumente

http://www.josh.ch/files/temp/margin_problem1.html
http://www.josh.ch/files/temp/margin_problem2.html

Kann mir irgendwer erklären, woher der weisse Balken im zweiten Dokument kommt? Und wie man das beheben kann? Ich möchte nicht

h1 { margin: 0; }

setzen, es muss doch eine andere Lösung geben?

Und schaut, was passiert, wenn ich border: 1px solid yellow; setze für den blauen div:

http://www.josh.ch/files/temp/margin_problem3.html

Ich verstehe das einfach nicht...

Danke für Hilfe. Joshua :)
 
Das Problem scheint eindeudig von dem <h1>-Tag zu stammen.

Ich würde das hier als die sauberste Lösung ansehen:

CODE h1 {
  margin-top: 0;
}




MfG Sascha Ahlers
 
Stimmt, aber die Standardformatierung H hat wohl noch mehr unangehme Eigenschaften. Soweit meine Erfahrungen reichen, lassen sich der folgende Zeilenabstand auch nur schwer bändigen - vor allem wenn es um verschiedene Browser geht. Mein Tipp_ weg davon und eine eigene CSS-Klasse erstellen

Gruß Ronny
 
QUOTE (Josh @ Do 6.7.2006, 18:09)Kann mir irgendwer erklären, woher der weisse Balken im zweiten Dokument kommt? Und wie man das beheben kann?

Ein H1 hat by Design einen Abstand, weil es als Überschrift gedacht ist, und Überschriften haben nun mal in den allermeisten Fällen einen grösseren Abstand. Ich finde das grundsätzlich auch richtig, weil zu einer grösseren Schrift gehört ein grösserer Abstand, um lesbar zu bleiben.

In dem speziellen Beispiel wendest Du auf einen Div einen Style an, und der H1 "erbt" den Style nicht, wohl weil er eher als "Elternelement" gedacht ist. Entweder Du löst es über Margin 0, oder Du gibst den Style (Hintergrund und was noch immer gewünscht) direkt dem H1 anstatt dem Div. Oder Du verzichtest auf das H1, falls Du sowieso die Schrift und noch anderes verstellen willst; benutzt einen Span oder einen P, denen kannst Du zuweisen was Du willst ohne dass sie voreingestellte Formate haben. Ich benutze aus deshalb praktisch nie H-Tags.

Griessli
Irene
 
QUOTE (ronnic @ Do 6.7.2006, 21:36)[...] Mein Tipp_ weg davon und eine eigene CSS-Klasse erstellen [...]

Nein, bloss nicht mit sowas anfangen!
Ich würde dies nicht empfehlen, sondern eher, dass man die H-Elemente mittels CSS komplett neu formatiert, alles andere würde mehreren Aspekten des Webdesign total widersprechen.
Die H-Elemente dienen nicht nur zur Suchmaschinenoptimierung, sondern auch noch für die Strukturierung des Dokumentes, und damit auch der Barrierefreiheit. Von daher würde ich die H-Elemente nicht durch eine CSS-Klasse ersetzen.



MfG Sascha Ahlers
 
Äusserst unangenehm, dieser Effekt. Und irgendwie lächerlich dazu (vor allem der Teil mit dem zusätzlichen border: 1px solid green). Kommt mir äusserst inkonsistent vor, wie das interpretiert wird. Aber sowohl Firefox, Opera, IE Win als auch Safari interpretieren es so, nur der IE Mac stellt es so dar, wie ich es eigentlich erwarten würde... (muss unbedingt auch mal den Konqueror noch zu Rate ziehen).

Ich werde also mit dem ungeliebten margin: 0; fortfahren. Zumindest eure Rückendeckung gibt mir dabei ein besseres Gefühl als zuvor. :)
Übrigens bin ich exakt derselben Meinung wie Sascha: der HTML Dokumentaufbau sollte immer möglichst beim Standard belassen werden!

Danke und Grüsse
Joshua
 
<style type="text/css" media="screen">
body {
margin:0px;
}
#header {
height: 100px;
background-color: red;
}

#content {
background-color: blue;
}

#content h1{
margin:0px;
}
</style>
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben