• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

border-box funktioniert nicjt

ro ci

ro ci

Neues Mitglied
Hallo ihr lieben,

kann mir jemand erklären was an meinem code falsch ist? Ich wollte einen abstand (margin) zwischen .romance und .management von 5 px einbauen. und dann verschiebt sich aber die 2. box nach unten==> und das obwohl ich box-sizing: border-box habe!:

danke fuer eure hilfe:
html

{
background-color:#8FBC8F;
}
.body
{font-family: Tahoma, sans-serif;
font-size: 87%;
}

.container {
max-width: 940px;
margin-left: auto;
margin-right: auto;

background-color: #fff;
padding-left: 40px;
padding-right: 40px;
box-sizing: border-box;
}

header p {

margin: 0;
color: #8FBC8F;
}


.borderup-down {

border-top: 3px solid #8FBC8F;
border-bottom: 3px solid #8FBC8F;
}
.group:before,
.group:after {
content: " ";
display: table;
}
group:after {
clear: both;
}
.group {
zoom: 1;
}
.romance {
width: 50%;
float: left;
text-align: block;
background-color: lightgray;
margin-top: 5px;
margin-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
margin-right: 5px;
box-sizing: border-box;
}
.management {
width: 50%;
float: left;
text-align: block;
background-color: blueviolet;
margin-top: 5px;
margin-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;

}

footer {padding: 15px;
text-align: center;
}
 
Werbung:
Hallo

Ich sehe nur CSS-Angaben. Ein Link ist fast immer am besten.

Ich wollte einen abstand (margin)
Zum Vergrößern anklicken....

Das könnte aber schon das Problem beschreiben. Bei border-box werden nur padding und border abgezogen, margin wird wie gewöhnlich zur Breite hinzugerechnet.

Nachtrag:

Ich habe mir inzwischen das CSS etwas genauer anschauen können.

.romance hat mit border-box eine Breite von 50% + 5px.

.management hat mit border-box eine Breite von 50%.

Insgesamt also 100% + 5px . Damit passen sie nicht mehr nebeneinander.

Das kann entweder mit dem Berechnen mittels calc geändert werden. Also für .romance zum Beispiel

Code: 
width: calc(50% - 5px);

Die Leerzeichen vor und hinter dem Minus-Zeichen sind wichtig und müssen vorhanden sein.

Oder du verwendest CSS-Grid, wenn dir die Browserunterstützung ausreicht.

In bestimmten Konstellationen mit bestimmten Browsern wird die Anweisung border-box auch ignoriert, obwohl sie im CSS zugewiesen ist. Deshalb verzichte ich selbst komplett auf border-box. Das ist aber auch Geschmackssache.

Ich habe mal verschiedene Lösungsmöglichkeiten nebeneinander (umgangssprachlich, in der Ansicht natürlich untereinander) zusammengefasst, auch zum direkten Ausprobieren:

http://boratb.bplaced.net/index016.html

Gruss

MrMurphy
 
Zuletzt bearbeitet:
hi danke MrMurphy. das ist eine tolle hilfe. tatsächlich dachte ich margin wäre miteingerechnet.
wie ist der code fuer flexbox?gibts es ne möglichkeite die boxen jeweils 48% breit zu machen =96% total. und dann den margin jeweils 2% und 2 % hinzuzufügen? bzw. wie weiss ich wieviele pixel platz noch zwischen den zwei boxen sind?

ich bin anfänger aber super motiviert :) danke
 
Werbung:
eine frage noch:
<body>
<div class="container">
<header>
<div class="main-title">
<p>My ... .... </p>
</div>
</header>

ich habe im css.

.main-title verwendet um den titel in <p> zu designen. allerdings bleiebn weiterhin margins zu den beiden boxen romance und management dadrunter.
ich habe gemerkt dass ich nur die margin auf 0 zurücksetzen kann wenn ich das element header p targete (noch nicht einmal header)-. wie kann das sein? ich dachte es geht um spezifizieren und .main-title ist spezieller als header p.

Danke
 
Hallo

gibts es ne möglichkeite die boxen jeweils 48% breit zu machen =96% total. und dann den margin jeweils 2% und 2 % hinzuzufügen?
Zum Vergrößern anklicken....

Ja, ich habe mein Beispiel mal entsprechend erweitert und auch das notwendige CSS eingefügt.

Bei Flexbox und CSS-Grid gibt es häufig mehrere Möglichkeiten. Welche am sinnvollsten ist hängt von der gesamten Webseite ab. Vereinfachte Beispiele wie von mir sind deshalb nur ein erster Einblick in die vielfältigen Möglichkeiten.

Ein gewaltiger Vorteil von Flexbox und CSS-Grid ist, dass sie jeweils nur einen Container und dessen direkten Kindelemente betreffen.

wie weiss ich wieviele pixel platz noch zwischen den zwei boxen sind?
Zum Vergrößern anklicken....

Bei Prozentangaben überhaupt nicht. Das hängt zum Einen von der Fensterbreite und zum Anderen von der Verschachtelung und damit von der Größe der umgebenden Container ab. Um verschiedene Einheiten gezielt zu kombinieren wurde die Berechnung mit calc geschaffen.

ich dachte es geht um spezifizieren und .main-title ist spezieller als header p.
Zum Vergrößern anklicken....

Das verstehe ich jetzt nicht. Ein Online-Beispiel wäre hilfreich.

Anfänger neigen dazu die Spezifität zu wichtig zu nehmen. Bei selbst erstellten Seiten kann die ignoriert werden, wenn die HTML-Struktur klar, einfach und eindeutig ist. Praktisch spielt die Spezifität eigentlich nur bei schlecht erstellten Fremdseiten eine Rolle, in die man eigenes CSS einfügen will.

Wichtiger sind Vererbung (oder auch Nicht-Vererbung), Selektoren und bei deiner Beschreibung eventuell auch die Collapsing Margins. Das ist deinen mageren Angaben leider nicht zu entnehmen.

Gruss

MrMurphy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben