✔ Box Modell Fehler

[julchen]

Hallo,
gibt es mittlerweile eine Möglichkeit den Box Modell Fehler zu umgehen, ohne dass ich jedesmal von der Gesamtbreite einer Box die padding, margin und border Werte die innhalb liegen subtrahieren muss. Wie ihr selber wisst, ist das ja ziemlich nervig?

Gruss
Julchen

 

[Maik]

Moin,

du hast die Möglichkeit, die drei genannten Eigenschaften an Nachfahrenelemente der Box zu übergeben - ansonsten bleibt im Box-Modell alles wie gewohnt, was mich noch nie genervt hat

mfg Maik

 

[julchen]

Hallo Maik,
wie kann ich das verstehen?

Bis jetzt habe ich beim erstellen eines Box Modells z. B. bei 3 nebeneinander liegenden Boxen, welche das Grundgerüst erzeugen sollen, 3 Div Klassen erzeugt mit jeweils einer bestimmten Breite

Gesamtbreite der Box: 925px

1 Box: 200 mit Abstand von 10px zu rechten
2 Box: 500 mit Abstand von 10px zur rechten
3 Box:225 abzüglich der 20px margin, als 205px Breite

Gruss
Julchen

 

[Maik]

Und wo ist hier das Problem bzw. der im Topic genannte Fehler?

mfg Maik

 

[julchen]

Hallo Maik,
grundsätzlich ist das kein Problem. Ich dachte nur, dass es mittlerweile einfacher geht ohne das ich margin, padding oder border abziehen muss. Wenn ich mal im nachhineine einer Box einen padding von 10px gebe oder eine Rand von 1px dann muss ich halt nicht dran denken, dass ich 20px fürs padding und 2px für den Rand abziehen muss von einer Box nachträglich. Wenn ich die Box dann noch mit Bilder bestückt habe die genau auf die vorherige Breite ausgelegt waren, dann wären die Bilder ja jetzt zu groß für die Box, weil ich nachträglich das padding geändert hab. Entweder muss ich dann eine andere Box kleiner machen oder ich hab Pech und muss die Grafiken alle neu machen.

Ich weiss, dass du jetzt sicher sagen wirst, dass man sich halt im Vorfeld genau Gedanken machen muss aber manchmal funkt einem ein Kunde auch dazwischen.

Gruss
Julchen

 

[Maik]

Es gibt da keine andere Methode, als die beiden genannten. Entweder Berechnung gemäß dem Box-Modell, oder die Formatierung in einzelne Elemente (Eltern-/Kindelement) unterteilen.

mfg Maik

 

[julchen]

Hallo,
was meinst du mit Formatierung unterteilen?

Gruss
Julchen

 

[Maik]

Nicht gelesen?

du hast die Möglichkeit, die drei genannten Eigenschaften an Nachfahrenelemente der Box zu übergeben - ansonsten bleibt im Box-Modell alles wie gewohnt, was mich noch nie genervt hat

mfg Maik

 

[Maik]

Gesamtbreite der Box: 925px

1 Box: 200 mit Abstand von 10px zu rechten
2 Box: 500 mit Abstand von 10px zur rechten
3 Box:225 abzüglich der 20px margin, als 205px Breite

Die Unterteilung würde hier dann so vonstatten gehen:

<div id="wrapperBox">
    <div id="box1">
        <div class="childBox"></div>
    </div>
    <div id="box2">
        <div class="childBox"></div>
    </div>
    <div id="box3"></div>
</div>

#wrapperBox {
width:925px;
}
#box1 {
width:210px;
float:left;
}
#box2 {
width:510px;
float:left;
}
#box3 {
width:205px;
float:right;
}
.childBox {
margin-right:10px;
}

Somit bräuchte die Breite der drei Spaltenblöcke (#box1 - #box3) nicht mehr angepasst werden, wenn zukünftig der rechte Außenabstand der inneren Box (.childBox) geändert wird.

mfg Maik

 

[julchen]

Ja, hab ich mir auch so gedacht und mache es auch so. Danke für die Bestätigung. Allerdings bekomme ich dadurch natürlich mehr div Verschachtelungen. Das Problem bei den Children Boxen bleibt jedoch gleich. Setze ich dort eine feste Breite an, bin ich mit dem Inhalt bei Grafiken gebunden, falls ich das padding mal ändern möchte.

Also gibt es derzeit noch keine andere Möglichkeit. Ich dachte ich frage einfach mal nach.

Danke und Gruss
Julchen