Rahmen um Content-Bereich

tortieblue · July 10, 2014 at 8:27 PM

Hallo,

ich versuche schon bei mehreren Styles, einen Rahmen der an allen Stellen pefekt zusammenpasst, zu erstellen. Es gelingt mir nur dann, wenn ich die Breite des jeweiligen Bereiches (z.B. main) um ein paar Pixel verkleinere oder vergrößere. Das ist aber irgendwie total unprofessionell und sieht auch in anderen Browsern als Firefox dann verschoben aus.

Nun hab ichs mal versucht, nur folgenden Code zu benutzen, und erziele dabei folgendes Ergebnis (siehe Screenshot):

Quote

/* Content */

#main {
border-left: 3px solid #ff0000;
border-right: 3px solid #ff0000;
}

#pageHeader {
border-left: 3px solid #100f0e !important;
border-right: 3px solid #100f0e !important;

}

.navigationFooter {
border-left: 3px solid #100f0e !important;
border-right: 3px solid #100f0e !important;
border-bottom: 3px solid #100f0e !important;

}

Display More

Bitte ganz lieb um Hilfe!

Lg

cls-design · July 10, 2014 at 9:21 PM

Hallo

Das liegt daran das unterschiedliche Box-Modelle verwendet werden. Bei #main wird border-box anstatt content-box verwendet was dann letztendlich einer unterschiedlichen Breite resultiert da anders addiert wird.

Wenn du dem Rest ebenfalls border-box zuweist, sollte es passen:

CSS

#pageHeader {
box-sizing: border-box;
}

usw… ~~Ob Vendor-Prefix och nötig sind weiss ich nicht, musst du selbst recherchieren~~ box-sizing reicht.

tortieblue · July 10, 2014 at 11:18 PM

Dankeschön!! Hat funktioniert!

Participate now!