nicht angemeldet
Hi Chris!
AAALSO....
Habe viel gelesen und viel probiert und eine Lösung! :-)
- und dachte, ich schreibe das hier noch schnell auf.
immer eine gute Idee ...
Habe zwei Probleme bei Deiner Lösung, Gunther, gefunden:
__Zuerst mal hab ich eine wahrscheinlich noch wichtigere Begründung gefunden, warum es "display:table;" gibt als diejenige, dass so die Formatierung aus dem Elementfluss herausgehalten wird.
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=Hier steht:
"[...] Gedacht sind sie aber eher für die tabellarische Darstellung von XML-Daten. Denn XML kennt kein Handling, um Daten als tabellarisch auszuzeichnen. "Also nach meinem Verständnis sollte es auch hier demnach um tabellarische Daten gehen, nur eben, dass XML mit den Daten umgehen kann.
Das ist_ein_Grund, aber mit Sicherheit nicht_der_Grund.
Ich bin mir zeimlich sicher, dass die Macher bei Floats bestimmt auch nicht daran gedacht haben, dass es jahrelang quasi als das Mittel für mehrspaltige Layouts verwendet wird ...!
Bis heute bietet CSS keine wirklich geeigneten Mittel, um "vernünftig" Layouts gestalten zu können, die dem Anspruch nach einer Source für "Alle" gerecht werden.
IMHO haftet den Display Table Eigenschaften aber zu Unrecht ein eher negativer Ruf an. Das mag vielleicht daher rühren, dass sie aus einer Zeit stammen, wo es viel Überzeugungsarbeit zu leisten galt, Autoren davon zu überzeugen, keine (HTML)Tabellen für das Layout zu missbrauchen. Leider sind aber auch viele dabei übers Ziel hinausgeschossen, und haben die Verwendung von Layout Tables gleich mit verdammt.
Und aufgrund fehlender Implementierung in den damals relevanten IE Versionen haben sie auch keinen Einzug in die Layoutgestaltung gefunden, da man dann gleich bei den Float-Varianten bleiben konnte.
__Zum anderen hatte ich bei deiner Lösung ein Problem mit den Abständen. Wie man in deinem Code sieht, hattest du das Problem auch schon: nämlich, dass "margin" nicht funktioniert und man stattdessen die Tabelleneigenschaften (in diesem Falle "border-spacing") nutzen muss (logisch eigentlich).
Nur gibt es für "border-spacing" keine Möglichkeit, die Abstände der vier Seiten separat anzugeben. Genau das möchte ich aber: Abstände zwischen den Boxen, aber nicht nach links (das Container-div hat hier in diesem thread zur Anschauung einen Rahmen, nicht jedoch in meinem Projekt... ;-) )
Nein, das ist kein Problem, sondern nur die Frage nach jeweils einem zusätzlichen Element innerhalb der als display:table-cell ausgezeichneten Elemente. Da ich mich in meinem Beispiel der Übersichtlichkeit halber auf das Wesentliche konzentriert habe, habe ich das weggelassen und stattdessen nur demonstriert, dass man Abstände_auch_per border-spacing erreichen kann, wenn auch mit der von dir genannten Einschränkung.
Und natürlich gibt es noch eine ganze Reihe weiterer Einschränkungen, bzw. "Nebenwirkungen" bei den Display Table Eigenschaften, aber andererseits bieten sie eben auch Möglichkeiten, die ansonsten per CSS alleine nicht realisierbar sind. Und die Häufigkeit der Fragen nach genau solchen Fällen hier im Forum zeigt doch deutlich, wie groß hier der "Bedarf" zu sein scheint.
Solange es keine "passenderen" Alternativen gibt, sehe ich die Display Table Eigenschaften als brauchbare "Krücke" für bestimmte Verwendungszwecke an.
Also habe ich mich doch um die Flexbox gekümmert. Und nach viel Lesen und Probieren die bzw. eine Lösung gefunden.
Ja, Flexbox ist quasi display:table ohne die Einschränkungen/ Nebenwirkungen (z.B. Stichwort 'source order') davon ...! ;-)
Allerdings weiß ja keiner, wie lange es dauern wird, falls es überhaupt jemals dazu kommt, bis man das wirklich in der Praxis verwenden kann. Und ich könnte schon fast darauf wetten, dass MS es bestimmt schafft, uns mit dem IE 10 wieder neue Steine in den Weg zu legen.
Es freut mich jedenfalls, dass dein Interesse geweckt ist, und du dich intensiv mit der Materie beschäftigst, denn genau das ist ja das angestrebte Ziel ... :-)
Weiterhin viel Spaß & Erfolg!
Gruß Gunther