CSS: margin > 0 reisst Lücken ins Layout?

2nd

2nd

Aktives Mitglied
Thread Starter
Dabei seit
25.07.2004
Beiträge
9.018
Reaktionspunkte
243
Hmm, stehe gerade auf dem Schlauch und checks nicht:

Mein Inhalts DIV hat eine Hintergrundfarbe und li + re Borders mit 1px. So weit, so gut. Wenn ich jedoch eine Headline und einen Absatz einbaue, habe ich über der Überschrift und unter dem Absatz einen Bereich, in dem der Hintergrund und die Borders unterbrochen sind. Setze ich MARGIN/PADDING im CSS von H1 und p auf 0 geht es nahtlos, aber ich brauche natürlich individuelle Abstände.

HTML: 
#headerHome {
	position:relative;
	background-color:#004a80;
	border-left: 1px #FFFFFF solid;
	border-right: 1px #FFFFFF solid;	
}

#contentHome {
	position:relative;
	background-color:#004a80;
	border-left: 1px #FFFFFF solid;
	border-right: 1px #FFFFFF solid;	
}

h1 {
	font-size: 21px;
}

p {
	font-size: 12px;
	color: #77afdb;
}

HTML: 
<div id="headerHome">
   Navigation
</div>

<div id="contentHome">
		
   <h1>Willkommen bei uns!</h1>

    <p>So schlicht und persönlich kann alles sein...</p>
</div>

So sieht es zerissen aus:

navi.png


Mir fällt gerade überhaupt nicht ein, woran das liegen könnte :kopfkratz:
Jemand eine Idee?

2nd
 
mach mal margin: 0px; bei den Divs.
 
Also wenn das ein ähnliches Problem ist, wie das in dem Buch zu
css-Zengarden, dann wäre padding: 1px 0; auf die divs einen Versuch
wert… Weiß allerdings nicht, ob das dir was bringt :/
 
Hmm, ich habe bei H1 und P den MARGIN auf 0 gesetzt und damit geht es. Die Abstände regulier ich nun über die PADDINGs - so geht es auf jeden Fall erstmal.

@hammer: Das hatte ich schon probiert - aber daran liegt es nicht. Mein Header-Div wird ja auch nahtlos an an das Content-Div geklebt.

@lea: Versuche ich auch noch mal, danke!

Was mich halt so irritiert ist folgendes: Die H1-Überschrift und der Absatz liegen innerhalb des Content-DIVs. Warum macht der MARGIN vom Absatz und von der Überschrift eine Lücke zwischen die DIVs? Meinem Verständnis nach sollte das nicht sein - das ist unlogisch.

2nd
 
2ndreality schrieb:
Was mich halt so irritiert ist folgendes: Die H1-Überschrift und der Absatz liegen innerhalb des Content-DIVs. Warum macht der MARGIN vom Absatz und von der Überschrift eine Lücke zwischen die DIVs? Meinem Verständnis nach sollte das nicht sein - das ist unlogisch.
Zum Vergrößern anklicken....
Ist aber so. Vertikale margins werden unter bestimmten Umständen zusammengefasst(das Wort trifft es nicht ganz, aber ich wusste nicht, wie ich collapse sinngemäß übersetzen soll).

Nachzulesen ist das ganze hier.
 
Zuletzt bearbeitet:
collapse: zusammenfallen.

und ein padding:0.01em 0; reicht aus, um das zu verhindern.
(also so klein, dass es der browser nicht mehr als pixel darstellt)
 
Danke für die Infos.

2nd
 
pichfl schrieb:
collapse: zusammenfallen.

und ein padding:0.01em 0; reicht aus, um das zu verhindern.
(also so klein, dass es der browser nicht mehr als pixel darstellt)
Zum Vergrößern anklicken....
Interessant zu wissen, dass das auch mit Werten < 1px funktioniert… ?!
0.01em klingt layouttechnisch sympathischer als 1px :)
 
Zuletzt bearbeitet:
Hmm, ich nochmal: Das padding:0.01em 0; auf die DIVs bringt nicht gewünschten Erfolg?!?

2nd
 
Ist das jetzt eine Frage oder eine Aussage?
 
Beides :)

2nd
 
warum setzt du um das ganze nicht einen DIV, der die border be-inhaltet (beinhalten sieht so seltsam aus).
die navi und content layer dann ohne rahmen.
 
Weil ich was gegen DVIitis habe. Ich habe eine DIV Box aussenrum, darin befindet sich Inhalte (Überschriften und Absätze) - das gehört meinem Verständnis nach nicht in noch einen Container im Container.

Oder habe ich Dich falsch verstanden?

2nd
 
nein, eigentlich schon richtig verstanden.

aber wenn du mit deinem setup nicht zum ziel kommst, musste halt umdenken.

aber wenn du bereits einen DIV aussenrum hast, könntest du DIESEN ja so formatieren wie's sein soll.

z.b. in dem du, bei einer fixen breite der seite, ein hintergrundbild einfügst, das den rahmen besitzt (wenn der über-container breiter ist als der inhalt).

aber natürlich wäre es ideal, dem problem auf den grund zu gehen. das selbe hab ich nämlich auch schon erlebt, und bin daher zu über-DIV gegangen, oder hab den hintergrund grafisch vorgegeben und die DIVs entsprechend positioniert.

hintergrund 1 pixel hoch und XYZ pixel breit.
 
Danke für Deine Hinweise mores :)

Blinde GIFs als Spacer - habe ich früher auch gemacht, genauso den Murks mit Tabellen. Und <div><div><div>blablub</div></div></div> fällt da meiner Meinung auch mit drunter, deswegen möchte ich das nicht ;)

Ich muss da nochmal ran...

2nd
 
an den anfang eines jeden css gehört folgendes:

* { padding:0; margin:0; }

damit kann man ausschließen, durch irgendwelche browser-interpretationen layout-fehler zu bekommen, jedes element hat voreingestellt 0 abstände (überschreibt z.b. browserabhängige abstände für p, h1, usw.).

anschließend gibts du deinen drei divs (header, content, footer) mit padding (nicht margin!) gewünschte abstände nach oben und unten. dank padding werden diese summiert und fallen nicht zusammen.

gewünschte abstände für h1 und p lassen sich dann über das element selbst einstellen, das layout wird dadurch nicht zerstört.

z.b. h1 { margin-bottom:10px; }

gruß baumeister
 
zu meiner Lösung: dieses minmale padding gehört für das Elternelement des Tags angewendet, der die Lücke reisst.

zB.
Code: 
<body>
<h1>blubb</h1>
<p>blibb</p>
</body>
(angenommen, die Lücke wäre eben zwischen <h1> und <p> oder über <h1>)
--> body{ margin:0; /*muss ned sein*/ padding:.01em 0; /*0 vor Punkten muss man nich schreiben*/ }

sollte eigentlich klappen und hat mir schon manchmal ein Layout gerettet, auch wenn ich dann trotzdem oft genug noch einen weiteren div einsetzen muss, wenn der IE muckt. kann man nix machen.
 
pichfl schrieb:
zu meiner Lösung: dieses minmale padding gehört für das Elternelement des Tags angewendet, der die Lücke reisst.
Zum Vergrößern anklicken....

sorry, aber deine lösung ist nichts anderes als eine unelegante art zu sagen: mach 0 abstand. da kann man gleich padding:0 notieren, das ist dasselbe.

der abstand zwischen h1 und p ist auf keinen fall für die div-abstände verantwortlich. die konstruktion von 2nd ist gut, er muss nur darauf achten, dem letzten element in den divs kein größeres margin zu geben, als das div an der stelle padding hat.

baumeister
 
Danke für Deine ausführliche Erklärung baumeister, aber die Lösung funktioniert leider nicht.

Mit der Variante von pichfl habe ich es jetzt hinbekommen.

Hmm, schlauer bin ich nun auch nicht. Generell scheint es so zu sein, dass über dem ersten Tag mit einem margin-top und unter dem letzten Tag mit einem margin-bottom ein Riss zum vorherigen und nächsten DIV entsteht. Das sieht so hier aus:

Mein Ausgangsproblem - ist wohl so und steht in den Spezifikationen

Mit einem padding: 0.1em 0; löst man das Problem:

Ohne Risse - Dank an pichfl

Die Lösung vom baumeister funktioniert leider nicht, obwohl die smarter wäre. Oder ich habe was falsch gemacht :kopfkratz:

Noch mit Rissen trotz baumeister Tuning :(


Vielleicht kann von Euch sich nochmal das Markup der 3. Variante ansehen, das CSS Zeug ist in der HTML enthalten.

@pichfl: Du hast beim ersten Anlauf padding: 0.01em 0; gepostet, deswegen ging es bei mir nicht und ich habe es nicht gesehen. Mit padding: 0.1em 0; wird es was (wie bei Deinem 2. Posting) :)


Danke,

2nd
 
So, muss korrigieren:

Baumeisters Variante geht doch. Allerdings muss man in den DIVs den Innenabstand mittels padding auf Werte > 0 einstellen. Ich habe in der Variante 3 oben padding: 0px; gesetzt, was ja auch sinnfrei ist, da durch * {padding: 0px} bereits alles auf 0 steht.

Hier in dem File mit padding: 1px für die DIVs geht es:

Funktionierend mit Baumeister Tuning :)

Allerdings bleibt abschliessend festzustellen, dass man mit padding: 0.1em 0; auf der sicheren Seite ist, jedenfalls aus gestalterischer Sicht, da 1px bei einem pixelgenauem Layout schon zuviel sein kann.


2nd
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten