Grid mit Border Problem?

[HCA]

Hallo,

ich möchte gern ein Border um jedes meiner Gridelemente machen. Wenn ich nun ein grid7 und ein grid5 Block mit einem Border nehme, dann bricht der 5er Gridblock um.
Logisch, da die feste Breite nicht merh passt.

Frage nun: Wie bekomm ich einen Border trotzdem hin?

Hoffe man kann mir helfen.

Gruß HCA

[delirius]

Innerhalb des Grids ein div platzieren und diesem div die Linie zuweisen

[HCA]

Das habe ich mir auch schon gedacht. Leider muss man dafür die ganze ce_* Template anpassen.

Was haltet ihr von einer JavaScript Lösung? Diese fügt einen Div in das ce_* Div ein. So kann man sich die Bearbeitung der Templates sparen.

[delirius]

Ich weiss nicht welches Grid-System du verwendest, aber man sollte Layout und Design trennen. Beim Seitenlayout von Contao gibt es dafür die Klasse .inside, evtl. hat das Grid-System auch so etwas.

JavaScript halte ich nicht für so eine gute Lösung, wäre aber möglich. Ich würde eher die Templates anpassen.

[Spooky]

Alternativ könntest du auch

*[class*='grid'] {
    -moz-box-sizing:border-box;
         box-sizing:border-box;
} 

verwenden, wenn IE6 & IE7 egal sind.

[HCA]

Alternativ könntest du auch

*[class*='grid'] {
    -moz-box-sizing:border-box;
         box-sizing:border-box;
} 

verwenden, wenn IE6 & IE7 egal sind.

IE 6/7 ist egal. Werde es noch um -webkit erweitern und dann sollten die neuen Browser abgedeckt sein.

Diese Variante ist deutlich die bessere.

Danke

[Spooky]

-webkit-box-sizing brauchst du für die aktuellsten Versionen aller webkit Browser gar nicht mehr (siehe http://caniuse.com/css3-boxsizing ), aber schadet natürlich auch nicht.