Autor |
Nachricht |
Tormentor667
Threadersteller
Dabei seit: 20.09.2006
Ort: Lauterstein
Alter: 39
Geschlecht:
|
Verfasst Do 30.01.2014 14:05
Titel [CSS] Spaltenbreite von x Spalten in der Summe immer 100% |
|
|
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
Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht:
|
Verfasst Do 30.01.2014 14:39
Titel
|
|
|
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
Zuletzt bearbeitet von SimonDerDude am Do 30.01.2014 14:47, insgesamt 2-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
Morgo
Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht:
|
|
|
|
|
top
Moderator
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
Verfasst Do 30.01.2014 16:58
Titel
|
|
|
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
Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht:
|
Verfasst Do 30.01.2014 17:13
Titel
|
|
|
top hat geschrieben: | ... wenn die Inhalte/Worte gleich lang sind ... |
so so.
Das sind Anforderungen die unbekannt sind und bedacht werden müssen wenn sie zutreffen.
(vielleicht werden auch nur Icons o. ä. platziert)
Aber bitteschön.
Zuletzt bearbeitet von SimonDerDude am Do 30.01.2014 17:18, insgesamt 2-mal bearbeitet
|
|
|
|
|
Morgo
Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht:
|
Verfasst Do 30.01.2014 17:29
Titel
|
|
|
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
Moderator
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
Verfasst Do 30.01.2014 18:33
Titel
|
|
|
SimonDerDude hat geschrieben: | ...
Das sind Anforderungen die unbekannt sind und bedacht werden müssen wenn sie zutreffen.
(vielleicht werden auch nur Icons o. ä. platziert)
... |
Guckst du hier:
Tormentor667 hat geschrieben: | ... die Summe der Breite ist immer 100% und verteilt sich gleichmäßig auf die Breite der einzelnen Tabköpfe (in dem Fall "Konzeption", "Design", ... |
War auch keine Kritik sondern nur die Frage ob sich das auch noch einfach lösen lässt.
Danke für die beiden Lösungen. Auch wenn ich es selbst gerade nicht brauche. Kommt sicherlich irgendwann mal wieder vor, dass man genau das braucht.
|
|
|
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Do 30.01.2014 18:50
Titel
|
|
|
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)
Zuletzt bearbeitet von pantonine am Do 30.01.2014 18:51, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
Formular: Summe berechnen
acrobat9 pro - PDF Formular Berechnung Menge Summe Excel?
Spaltenbreite in () bei Dreamweaver
Suche Javascript oder CSS für Spaltenbreite
css > spalten ...
css > spalten > mittig ...
|
|