n Div's in eine Zeile
 

Guten Tag,

ich haben mich eben angemeldet, da ich in nächster Zeit sehr wahrscheinlich ein paar Fragen bzgl. CSS haben werde.

Ich versuche seit ein paar Stunden folgendes umzusetzen:

Ich möchte gern n Div's (die Anzahl der Div's ist bei jedem Aufruf unterschiedlich) in einer Zeile eines Div's mit der Länge 100% anzeigen lassen. Diese n Div's sollen die 100% der gegebenen Länge ausnutzen und alle die gleiche Länge haben.

Wenn ich die Anzahl der Div's wüsste, würde ich z.B. bei 3 Div's mit "width: 33%" arbeiten, das geht in diesem Fall nicht. Wie kann ich das umsetzen?

Hier ein Beispiel:

Hier werden die 100% des Div's nicht ausgenutzt, was ich jedoch gern umsetzen würde.
Über eine Gedankenhilfe würde ich mich sehr freuen.

Danke und Gruß
Mustangore

Probiers mal mit php. Irgendwann musst du doch rausbekommen, wie viele div's anzuzeigen sind und dann kannste die Breiten berechnen (100/anzahlDivs) und dieses Ergebnis (auf 2 Nachkommastellen runden) bekommen die einzelnen div's als Breite.
Oder soll das einfach ne statische HTML-Seite sein?

Ich könnte das mit PHP lösen, aber ich setze PHP nur ungern in mein Design ein. Eine Trennung vom Skript zum Design sieht einfach schöner und übersichtlicher aus.

Gibt es sonst keine Möglichkeit, die Div's wie oben beschrieben anzuzeigen?

Danke und Gruß
Mustangore

Dank IE < 8 nicht, denn der kennt keine Tabellen-Eigenschaften.

Was soll denn das Ganze letztlich werden?

Ich möchte diese Baumstruktur implementieren. Hier mal ein Screenshot:

http://jelsch.com/Unbenannt.png

Die Anzahl der Knoten die sich im roten Viereck befinden kann beliebig sein.
Ich weiß wie ich das mit PHP umsetzen könnte. Ich versuche jetzt erstmal das Design zu erstellen und habe diesen einen Wunsch, kein PHP in mein Design einzubauen.

Gibt es keine Möglichkeit, die Div's über 100% in n gleich lange Elemente zu "teilen" unabhängig von n?

Ohne PHP wird es für IE < 8 nicht gehen. Du musst per PHP aber eh nichts weiter tun, als die Anzahl der divs zu ermitteln und daraus den Wert für ihre width-Deklaration zu errechnen. Notfalls schreibst Du ihn in ein Style-Element im Head, dann ist Deine eigentliche CSS-Datei immer noch komplett unabhängig von PHP.

Und Du kannst dieses Style-Element sogar noch in einen Conditional Comment schreiben, dann liest ihn er nur der IE < 8, während alle anderen Browser eine Lösung durch die bereits erwähnten Tabellen-Eigenschaften bekommen.

Dachte es wäre einfacher, eventuell eine Eigenschaft die ich noch nicht kenne oder ein Trick der das Problem ohne PHP umgeht.

Aber eine Frage habe ich noch: Was meinst du mit Tabelleneigenschaften?
Meinst du damit, dass es am besten mit Tabellen zu realisieren wäre, oder hat CSS Eigenschaften, die ähnlich zu Tabellen in HTML sind? Ich versteh leider nicht was du meinst.

Vielen Dank für deine Hilfe.

Gruß
Mustangore

Tabelleneigenschaften im CSS sind sowas wie display:table; oder display:table-row; usw.
Google mal nach CSS-Tabelle oder Tabelle mit CSS erstellen :)

Dankeschön! =)
Ihr habt mir sehr geholfen.

Du und der IE < 8 ;)

Die bereits erwähnten Eigenschaften setzt man nach folgendem Prinzip ein: Ein div bekommt display: table;, darin liegt ein weiteres div mit table-row, und darin liegen dann nebeneinander die ganzen divs mit unbekannter Anzahl, und bekommen logischerweise display: table-cell. Dann verhält sich diese Konstruktion wie eine Tabelle, obwohl es natürlich keine ist.