[Tormentor667]

Liebe Mediengestalter,

ich stehe momentan vor einem doofen Problem und zwar geht es um die Darstellung von Tabs. Ein gutes Beispiel findet man hierzu unter http://depompa-designs.de/index.php/services#tabs0231. Bei dem Template ist es so gelöst, dass egal welche Anzahl ich an Tabs habe, die Summe der Breite ist immer 100% und verteilt sich gleichmäßig auf die Breite der einzelnen Tabköpfe (in dem Fall "Konzeption", "Design", ...).

Die Frage ist jetzt generell: Wie kann ich das in CSS genau lösen?

Beispiel: Die Gesamte breite des Tab-Bereiches ist 100%, bei 2 Tabs möchte ich als, dass die Titelspalten jeweils automatisch 50% bekommen. Wenn es nachher 5 Tabs sind, möchte ich, dass die Titelspalten jeweils 20% Breite bekommen.

Vielen Dank schonmal für die Tipps und Ideen,
beste grüß,
Tormi

[SimonDerDude]

Den 'wrapper' auf display: table; width: 100%; stellen.
Kinderlemente auf display: table-cell; stellen.

Tabellen haben die Eigenschaft genau so viel Platz einzunehmen wie sie benötigen.
Tabellenspalten haben die Eigenschaft sich den verfügbaren Platz gleichmäßig aufzuteilen.

works great

[Morgo]

Hoffentlich bald mal so: http://jsfiddle.net/vLn57/

[top]

Beide Lösungen kommen aber auch nur fast an das Gewünschte ran.
Die gleiche Breite haben die Felder nur, wenn die Inhalte/Worte gleich lang sind. Sonst werden die Felder unterschiedlich breit dargestellt.

[SimonDerDude]

[Morgo]

Als Ergänzung mit gleichmäßigen Breiten: http://jsfiddle.net/vLn57/2/

... in dem Fall geht natürlich kein text-overflow und wenn das Wort ohne Leerzeichen länger wird, als das Flex-Child, wird die Box aufgedrückt.

[top]

[pantonine]

Da die Beispielsite ohne reichhaltige Scriptlandschaft eh nicht überlebt, kannst Du die Sache auch getrost in Javascript veranstalten. Hat den Vorteil, dass Du keine Tabellen nehmen musst und damit auch keine Probleme bekommst, wenn die Einträge breiter als der z. Verfügung stehende Platz werden.


(edit: Und, ja, ich kenne Media Queries)