Problem mit Rahmen

[oxo888oxo]

Hallo

Ich stehe hier grad mal wieder wie der Ochs vom Berg und finde einen Fehler nicht.

Schaut mal diese beiden Seiten:
http://spaceart.de/_xx_test_index.php
http://spaceart.de/_xx_test_index2.php

Bei der ersten verstehe ich nicht, warum der rechte und linke rote Rand nicht bis ganz nach oben bzw. unten an der schwarzen Rand heranreicht.

Der einige Unterschied im CSS ist:

Seite 1

  border-left: 1px solid red;  
  border-right: 1px solid red;

Seite 2:
border: 1px solid red;

Gruß
Ingo

[Matthias Apsel]

Om nah hoo pez nyeetz, oxo888oxo!

Der einige Unterschied im CSS ist:

Seite 1

border-left: 1px solid red;

border-right: 1px solid red;

>   
> Seite 2:  
> `  border: 1px solid red;`{:.language-css}  
  
Deshalb verhalten sich die beteiligten margins anders. Sie [fallen zusammen](http://wiki.selfhtml.org/wiki/Margin#zusammenfallende_Au.C3.9Fenabst.C3.A4nde).  
  
  
Matthias

-- 
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Pantoffel und Pantoffeltierchen](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=P#pantoffel).  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[oxo888oxo]

Deshalb verhalten sich die beteiligten margins anders. Sie fallen zusammen.

Das verstehe ich leider nicht.
Bzw. das mit dem Zusammenfallen verstehe ich schon, glaube ich.
Aber bei mir ist doch das obere und untere Margin jeweiuls 0.
Und 2 zusammenfallende 0s müssten doch auch wieder 0 ergeben.

[TSO]

Das verstehe ich leider nicht.
Bzw. das mit dem Zusammenfallen verstehe ich schon, glaube ich.
Aber bei mir ist doch das obere und untere Margin jeweiuls 0.
Und 2 zusammenfallende 0s müssten doch auch wieder 0 ergeben.

Es geht um die margins der Kindelemente.
Das erste Element in deinem div ist das H1 und das hat ein margin-top von 0.67em (o.ä., abhängig vom jeweiligen Browser-Stil). Beim unteren Abstand ist das letzte Element verantwortlich, also dein Absatz mit der ID #fusszeile.

[Kai]

Hola,

so funktioniert es wie gewollt, wenn du deinem #wrapper-2 noch eine padding spendierst.

#wrapper-2 {  
  width: 520px;  
  border-left: 1px solid red;  
  border-right: 1px solid red;  
  margin: 0 auto;  
  padding: 1px;  
}  

gruss kai

[Gunnar Bittersmann]

@@oxo888oxo:

nuqneH

Bei der ersten verstehe ich nicht, warum der rechte und linke rote Rand nicht bis ganz nach oben bzw. unten an der schwarzen Rand heranreicht.

Weil die Höhe des div sich nach dessen Inhalt richtet, wobei der Außenabstand (margin) der Elemente darin nicht mit einfließt. Das ändert sich, wenn das div oben bzw. unten Rahmen (border) hat; dann wird der Außenabstand der Elemente darin mit vom Rahmen mit eingeschlossen.

Wenn die roten Linien bis oben/unten gehen sollen, braucht das div oben/unten Rahmen:

div  
{  
  border-top: 1px solid transparent;  
  border-bottom: 1px solid transparent;  
  border-left: 1px solid red;  
  border-right: 1px solid red;  
}

oder kurz:

div  
{  
  border: 1px solid;  
  border-color: transparent red;  
}

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Wenn die roten Linien bis oben/unten gehen sollen, braucht das div oben/unten Rahmen:

div

{

  
Aber nicht alle div, sondern nur `#wrapper-2`{:.language-css}.  
  
Und [was at sagte](http://community.de.selfhtml.org/zitatesammlung/zitat1287).  
  
Qapla'

-- 
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

[oxo888oxo]

Hallo

OK super und vielen Dank Euch ellen wieder mal.
Ich werde das Konstrukt aber nun doch nochmal überdenken.
Das mit diesen ganzen Rahmen sollte ich vielleicht doch lieber lassen.

Ich habe da mal was vorbereitet :-)
Zeige ich in Kürze dann hier.

Gruß
Ingo