CSS: Abstände

Computer: Software & Programmierung HTML & CSS
#1

Nun habe ich die Seite schon so ziemlich fertig gestellt und nur noch ein kleines optisches Problem.

Ich habe verschiedene DIVS, die untereinander angeordnet sind mit margin: 0px auto. Für die in den DIVs eingebetteten Absätze und Überschriften habe ich aber jeweils Abstände nach oben und unten. Ich hätte erwartet, dass die Abstände vom Rand des umgebenden DIVs ab gelten, aber irgendwie nimmt mein Mozilla den Abstand ab dem nächsten Element im darüber-/darunterliegenden DIV.
Prinzipiell sieht’s also so aus:

 Überschrift 
 Ganz viel Text. 
 
 Noch ein bisschen was 

div {margin: 0px; padding: 0px;}
div#a {margin: 0px auto; width: 500px;}
div#b {margin: 0px auto; width: 500px; background-color: red;}
div#c {margin: 0px auto; width: 500px;}
img {margin: 0px;}
p, h1 {margin: 10px;}

Anhand der Hintergrundfarbe sehe ich, dass letzlich zwischen den DIVs die Abstände sind.

Wie krieg ich das hin?

Bis denne
Schnoof

#2

div {margin: 0px; padding: 0px;}
div#a {margin: 0px auto; width: 500px;}
div#b {margin: 0px auto; width: 500px; background-color: red;}
div#c {margin: 0px auto; width: 500px;}
img {margin: 0px;}
p, h1 {margin: 10px;}
Anhand der Hintergrundfarbe sehe ich, dass letzlich zwischen
den DIVs die Abstände sind.

Das kommt vom margin von p und h1, das mit dem margin der enthaltenden Elemente zusammenfällt. Das müsste hier beschrieben sein wenn ich das richtig verstehe:
http://www.w3.org/TR/CSS21/box.html#collapsed-through

#3

Das kommt vom margin von p und h1, das mit dem margin der
enthaltenden Elemente zusammenfällt. Das müsste hier
beschrieben sein wenn ich das richtig verstehe:
http://www.w3.org/TR/CSS21/box.html#collapsed-through

Ich hoffe, ich habe es verstanden. Ich habe zumindest eine Lösung gefunden, die im Mozilla und im IE vernünftig aussieht.

Jetzt habe ich noch ein optisches Problem. Ich habe eine kleine Grafik, die links und rechts an den Rändern der DIVs entlanglaufen soll. Bei den DIVs mit fester Höhe ist das kein Thema, aber bei dem InhaltsDIV mit variabler Höhe klappt das nicht, da zeigt er zwar im Mozilla in den oberen Ecken die Grafik an, aber er ignoriert die Angabe height: 100%. Im IE lässt er die Grafik runterlaufen, aber lässt links und rechts davon einen kleinen Rand, obwohl margin auf 0px gesetzt wurde.

Warum ist das so? Und was kann ich dagegen tun?

Danke und bis denne
Schnoof

#4

Jetzt habe ich noch ein optisches Problem. Ich habe eine
kleine Grafik, die links und rechts an den Rändern der DIVs
entlanglaufen soll. Bei den DIVs mit fester Höhe ist das kein
Thema, aber bei dem InhaltsDIV mit variabler Höhe klappt das
nicht, da zeigt er zwar im Mozilla in den oberen Ecken die
Grafik an, aber er ignoriert die Angabe height: 100%. Im IE
lässt er die Grafik runterlaufen, aber lässt links und rechts
davon einen kleinen Rand, obwohl margin auf 0px gesetzt wurde.

Wie hast du den Hintergrund angegeben? Wenn das Bild fest in einer vorgegebenen Breite des Blockelements dimensioniert ist, sollte das in etwa aussehen:

background: url('bild.png') top left repeat-y;

Dann sollte das Hintergrundbild press am äußeren Rand vom Padding runterlaufen. Es kann natürlich wieder sein, dass der IE was besonderes sein will und das Hintergrundbild am inneren Rand vom Padding (also an der eigentlichen Inhalts-Box) ausrichtet, dann müsstest du den Hintergrund in das enthaltende Element stecken, um das auszugleichen oder sonst irgendeinen hässlichen Hack basteln.

Nach allem was ich jetzt auf die Schnelle gefunden habe sollte IE das halbwegs richtig machen, allerdings wird der Hintergrund angeblich an der äußeren Kante des Rahmens festgemacht, was aber keine große Rolle spielen sollte, wenn du keinen Rahmen verwendest.

Du solltest auf jeden Fall auch darauf achten, dass du einen korrekten DOCTYPE (nach Möglichkeit irgendeinen strict) einstellst, ansonsten hat IE noch seltsamere Vorstellungen von Maßangaben als das ohnehin schon der Fall ist. Als Faustregel gilt: wenn du positive Werte sowohl für padding als auch für margin hast und IE zeigt das an was du willst, dann machst du was falsch :wink:

#5

Jetzt habe ich noch ein optisches Problem. Ich habe eine
kleine Grafik, die links und rechts an den Rändern der DIVs
entlanglaufen soll. Bei den DIVs mit fester Höhe ist das kein
Thema, aber bei dem InhaltsDIV mit variabler Höhe klappt das
nicht, da zeigt er zwar im Mozilla in den oberen Ecken die
Grafik an, aber er ignoriert die Angabe height: 100%. Im IE
lässt er die Grafik runterlaufen, aber lässt links und rechts
davon einen kleinen Rand, obwohl margin auf 0px gesetzt wurde.

Wie hast du den Hintergrund angegeben? Wenn das Bild fest in
einer vorgegebenen Breite des Blockelements dimensioniert ist,
sollte das in etwa aussehen:

background: url(‚bild.png‘) top left repeat-y;

Ich habe gar keinen Hintergrund angegeben, da die Grafik nur 2px breit ist und sowohl links als auch rechts verlaufen soll. Zwei Hintergrundbilder sind ja nicht möglich und eigentlich ja auch unsinnig. Prinzipiell sieht’s also so aus:

img.lb {float: left; margin: 0px; width: 2px; height: 100%; border-style: none;}

und dann noch äquivalent für rechts. Kann man für den Rahmen eigentlich eine Grafik angeben (werd gleich mal selbst nachschauen)?

Du solltest auf jeden Fall auch darauf achten, dass du einen
korrekten DOCTYPE (nach Möglichkeit irgendeinen strict)
einstellst, ansonsten hat IE noch seltsamere Vorstellungen von
Maßangaben als das ohnehin schon der Fall ist. Als Faustregel
gilt: wenn du positive Werte sowohl für padding als auch für
margin hast und IE zeigt das an was du willst, dann machst du
was falsch :wink: Er zeigt’s ja eben nicht so an wie ich will. Im übrigen habe ich persönlich noch IE 5.1, der IE 6 verhält sich genau so wie der Mozilla bzw. Firefox. Doctype etc. habe ich nach SelfHTML gemacht, sollte als völlig i. O. sein, ist auch strict. Die Kurzreferenzen dieses Superwerks nutze ich immer als schnelles Nachschlagewerk.

Bis denne
Schnoof

#6

Ich habe gar keinen Hintergrund angegeben, da die Grafik nur
2px breit ist und sowohl links als auch rechts verlaufen soll.
Zwei Hintergrundbilder sind ja nicht möglich und eigentlich ja
auch unsinnig. Prinzipiell sieht’s also so aus:

img.lb {float: left; margin: 0px; width: 2px; height:
100%; border-style: none;}

und dann noch äquivalent für
rechts. Kann man für den Rahmen eigentlich eine Grafik angeben
(werd gleich mal selbst nachschauen)?

Das Problem mit den zwei Hintergrundbildern kenne ich leider, eine funktionierende Lösung kenne ich nicht. Theoretisch könnte man je ein Blockelement pro Rand einrichten und die dann „übereinander“ stapeln, aber wirklich schön ist das nicht. Hattest du nicht ursprünglich mal an einem Layout mit einer festen Breite von irgendwas um die 900px gearbeitet? Dann könntest du ja einfach ein entsprechendes Hintergrundbild mit „Loch“ in der Mitte einbauen.

Was das Verhalten der Höhenberechnung angeht, hat IE (diesmal fast leider) wieder unrecht. Laut CSS2.1-Spec gilt für prozentuale Höhenangaben: „If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value is interpreted like ‚auto‘.“ Im Falle eines floats ergibt sich die Höhe dann aus dem Inhalt.

Rahmenbilder kommen wohl erst mit CSS3, aber dann richtig:
http://www.w3.org/TR/2005/WD-css3-background-2005021…

#7

Das Problem mit den zwei Hintergrundbildern kenne ich leider,
eine funktionierende Lösung kenne ich nicht. Theoretisch
könnte man je ein Blockelement pro Rand einrichten und die
dann „übereinander“ stapeln, aber wirklich schön ist das
nicht. Hattest du nicht ursprünglich mal an einem Layout mit
einer festen Breite von irgendwas um die 900px gearbeitet?
Dann könntest du ja einfach ein entsprechendes Hintergrundbild
mit „Loch“ in der Mitte einbauen.

Das überlasse ich meinem Herzallerliebsten. Der ist für Grafiken verantwortlich. Ich denke, ohne diesen Rahmen würde es sogar besser aussehen. ;o)

Was das Verhalten der Höhenberechnung angeht, hat IE (diesmal
fast leider) wieder unrecht. Laut CSS2.1-Spec gilt für
prozentuale Höhenangaben: „If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the
value is interpreted like ‚auto‘.“ Im Falle eines floats
ergibt sich die Höhe dann aus dem Inhalt.

Naja, wenn der Inhalt den ganzen Bildschirm einnimmt, müsste die Höhe doch entsprechend sein? Oder ich verstehe das einfach nicht richtig. Jedenfalls verhalten sich Mozilla, Firefox und IE6 identisch und wiederholen dieses Bildchen nicht, ignorieren also die height-Angabe, nur mein guter alter IE 5.1 malt diesen Rand, wenn auch nicht ganz am Rand.

Rahmenbilder kommen wohl erst mit CSS3, aber dann richtig:
http://www.w3.org/TR/2005/WD-css3-background-2005021…

Das wird bestimmt toll, dann werden es einige sicher mit bunten Rahmen übertreiben. Aber an sich ist es fällig. :o)

Bis denne
Schnoof