Gleichmässige horizontale Verteilung von div's

**ApoY2k** · 28.08.2011, 20:28

Wenn ich dich richtig verstehe, willst du dass die DIVs gerade so groß sind, dass alle die größtmögliche Größe haben und innerhalb des Eltern-Elements gleichverteilt sind?

Wenn ja, dann ist das mit CSS alleine nicht möglich. Du wirst mit JavaScript die Größe des DIVs auslesen und die Kinder einzeln anpassen.

Es kann auch gut sein, dass es in CSS3 dafür eine Lösung gibt, ich habe aber momentan keine parat.

**Kikunosuke** · 28.08.2011, 20:45

Genau. Nur das die Divs eine feste Grösse (60x60) haben. Dadurch das die Anzahl dieser Div's ändert kann ich keinen statischen Wert im Stylesheet setzten. Innerhalb des Elternelements (width:960px

sollten die Divs mit fixer Grösse gleichmässig verteilt sein.
Zumal ich bisher keine Lösung gefunden habe ohne JS habe ich mir auch schon Gedanken gemacht wie ich am besten das Problem lösen sollte.

Was denkt Ihr was als 'workaround' am besten passen würde?

Anbieten würde sich eine PHP Lösung Elternelement (960px – (Anzahl Locations x 60px)) und das margin dementsprechend im sytle='' unterbringen.

Variante 2 wäre wohl eine Berechnung mit JS.

Variante 3 dürfte die Tabellenlösung sein.

Wobei ich zugeben muss, überzeugt bin ich von keiner dieser Varianten.

**AmicaNoctis** · 29.08.2011, 00:58

Hallo,

PHP sollte sich nicht mit clientseitigem Layoutkram herumschlagen müssen. Tabellen zu Layoutzwecken zu missbrauchen, entspricht nicht ihrer Bestimmung und sollte vermieden werden. Wenn du jedoch keinen Plan von JS haben solltest, wäre eine Tabelle eine Alternative.

Meine Empfehlung: JS, aber so, dass User mit deaktiviertem JS trotzdem eine Fallback-Variante haben, die vielleicht nicht so schick, aber trotzdem benutzbar, übersichtlich und logisch ist.

Gruß,

Amica

**Kikunosuke** · 30.08.2011, 17:06

Hallo Amica

Ja das stimmt schon. Deshalb suche ich auch nach der besten Möglichkeit. ^_~

JS würde auch nicht ein Problem darstellen nur ich sehe es ja schon bei mir selbst. Ich surfe nach wie vor mit deaktiviertem JS.

Ich habe auch noch einen Tipp erhalten mit CSS und "display:table". Leider ist die Variante noch nicht kompatibel mit "genügend" Browsern. Aber ich bin noch dran. ^_^

gruss kiku

**Breezzer** · 03.09.2011, 12:27

dass php keine layoutaufgaben umsetzen sollte, finde ich auch. ebenso sollten tabellen nur für entsprechenden inhalt eingesetzt werden. in diesen beiden punkten stimme ich amica zu.

bevor jedoch für eine benötigte darstellung js eingesetzt wird und usern ohne "eine Fallback-Variante (...), die vielleicht nicht so schick, aber trotzdem benutzbar" ist angeboten wird, würde ich da trotzdem mal ein auge zudrücken und lieber php oder tabellen verwenden, wenn dadurch mehr leute die gleiche darstellung erhalten.
ich finde, wir haben als entwickler viel zu oft diesen bescheuerten "ist-das-valide"-gedanken, den ich gerade noch nachvollziehen kann. aber diese sorgen darum, ob eine art der umsetzung "cooler" ist als eine andere (hier z.b. eben js vs. php) haben nur wir - und kein einziger endverbraucher der seite, der im endeffekt über erfolg oder misserfolg eines projektes entscheidet. dem ottonormalverbraucher ist es eben wurst, ob das design durch css, js oder php beeinflusst wird, auf tabellen oder layern basiert, etc. das einzige was für ihn zählt ist die benutzerfreundlichkeit und das aussehen, also das, was eben nach php, js und html herauskommt.
also sollten wir entwickler uns auch mal daran orientieren

also...lange rede, kurzer sinn: wenn es kein problem sein sollte, dass manche user dein vorhaben anders dargestellt bekommen, dann lass php oder tabellen außen vor. wenn aber die darstellung wichtig ist und auf möglichst vielen systemen gleich sein soll, dann scheiß drauf, dass tabellen out sind und php nicht für css missbraucht werden sollte.

meine meinung - wenn der kunde eine rosa webiste haben möchte, dann bekommt er sie. auch, wenn ich rosa abgrundtief hasse. der vergleich hinkt etwas, hat aber auch was wahres.

**wahsaga** · 03.09.2011, 12:50

@Breezzer: Mit dieser Sichtweise berücksichtigst du aber weder Barrierefreiheit (in diesem Fall vielleicht noch vernachlässigbar), noch den evtl. bestehenden Anspruch, automatisch alternative Layouts anzubieten, bspw. für die kleineren Bildschirme mobiler Geräte.

@Thema: Eine Alternative zu display:table stellt ggf. noch inline-block in Kombination mit text-align:justify dar. Das erfordert ein zusätzliches (leeres) Element am Schluss, das man „breit genug“ macht, dass es in die nächste Zeile gezwungen wird (andernfalls werden die vorhergehenden Elemente nicht über die komplette Zeile verteilt). Das kann auch ein Pseudo-Element sein, wenn man kein zusätzliches ins Markup packen will.
Beispiel: http://jsfiddle.net/Xhne2/
Die Höhe des umgebenden Elements müsste man noch beschränken bzw. verringern; dabei aber überlegen, wie man das macht, ohne dass die Inhalte ggf. unzugänglich werden.
(Ältere IE stellen das natürlich in der Variante mit Pseudoelement nicht korrekt dar, und für inline-block müsste man auch noch einen der bekannten Hacks verwenden. Darüber hinaus kennt der IE aber auch noch ein proprietäres text-align-last, mit dem man auch für die letzte Zeile eines „Textes“ explizit justified-Ausrichtung erzwingen kann - das wäre dann ggf. für ältere IE ein möglicher Workaround.)

**Breezzer** · 03.09.2011, 13:05

@wahsaga:
"automatisch alternative layouts anzubieten" fällt bei mir eben auch unter diese seltsame entwicklersichtweise. ich hatte schon zwei-drei mal den fall, dass ich für mobile seiten eine komplett frisches layout erstellen musste, weil durch js, css, etc. eben kein switch der ein und der selben seite für alle endgeräte möglich war. die darstellung musste einfach passen und war alá web2.0 nicht zufriedenstellend umzusetzen. gut, dass waren auch sehr spezielle fälle, aber darauf wollte ich mich oben ja auch schon beschränken. wenn Kikunosuke eine saubere und einheitliche darstellung dringend verlangt, dann muss eben der entwickler zurückstecken (und ggf. mehrarbeit leisten) und nicht das projekt.

ich bin ja selber entwickler und möchte ja auch am liebsten immer alles immer web2.0 und totaaaal cool und nerdig machen. aber es gibt fälle, in denen es nicht geht und Kikunosuke könnte so einer sein.

---------------------

da ich aber keine weiteren konstruktiven vorschläge habe als die bereits genannten, halte ich jetzt die klappe und verziehe mich ins ethikforum, falls es hier soetwas gibt... :-)

**wahsaga** · 03.09.2011, 13:16

Zitat von Breezzer Beitrag anzeigen

"automatisch alternative layouts anzubieten" fällt bei mir eben auch unter diese seltsame entwicklersichtweise.

Wohingegen deine für mich eher unter die berüchtigte „Designer-Sichtweise“ fällt - wenn das nicht überall exakt zu 100% so aussieht, wie ich das in meinem Photoshop gebastelt habe, bin ich beleidigt

**Kikunosuke** · 04.09.2011, 22:28

Hey wahsaga

Dein Beispiel mit text-align:justify; gefällt mir doch recht gut ich werde mich daran machen und das zu testen und allenfalls zu implementieren. Diese Variante dürfte auch für den Android, iOS und Screenreader gut lesbar sein.

Vielen Dank euch allen.

Gruss kiku

Gleichmässige horizontale Verteilung von div's