Zum Inhalt springen

Vertik. Menü: Höhe eines Elements abhängig von der Anzahl

Erstellt am 11. April 2007 · 3 Antworten · letzte Antwort am 11. April 2007

Tags: HTML & CSS, Frage

Nuendo ·

Gute Tag,

folgendes Problem: Man stelle sich einen DIV-Container mit 200px Höhe vor. In diesen Container sollen Menüpunkte untereinander gelistet werden (wird im CMS realisiert). Die Höhe dieser Elemente soll abhängig von der Anzahl der Elemente sein und immer den gesamten Container ausfüllen.

Bsp: 200px Containerhöhe, 2 Menüpunkte: jeder Button soll 100px hoch sein. Bei 4 Buttons 50px etc.

----------------
| Button 1
|
----------------
| Button 2
|
----------------

oder eben z.B.

----------------
| Button 1
----------------
| Button 2
----------------
| Button 3
----------------

Mein Plan war eine Tabelle, die bekommt 100% (und dehnt sich somit immer auf die 200px des umschließenden DIV aus und generiere da meine TD rein, die dann automatisch die zur verfügung stehende Höhe einnehmen.

Geht sowas auch per CSS, evtl mit List-Elementen? Wie müssten die Attribute aussehen?

Vielen Dank!

just2b ·

Hallo,

das hat ja mal nicht soviel mit TYPO3 zu tun, dh einfach im Editor deiner Wahl statisch bauen und dann in TS nachbauen.
Ich würde beim li die prozentuale Höhe angeben versuchen

georg

Nuendo ·

Hi Georg,

vielen Dank für deine Antwort. Ich probiere es schon sehr lange (wie du geschrieben hast auch erst mal ohne TS), aber ich bekomm es einfach nicht hin. Die x Elemente nehmen einfach nicht die komplette Höhe ein. Hast du ggfs. eine Idee bzw. Hilfestellung für mich? Habe auf deiner Seite gesehen, dass du dich intensiv mit LI-Menüs befasst.

Auch der Rest deiner Seit ist übrigens sehr beeindruckend, die NY-Fotostrecke ist bedrückend realistisch.

m.​att ·

Die Tabellen Variante müsste doch funktionieren ... ?
Ich habe Dir hier mal meinen kleinen test reingepostet:

<table height="200px" width="100px" bgcolor="#ff0000" cellpadding="0px" cellspacing="0">

<tr><td bgcolor="#aaffaa">Button1</td></tr>
<tr><td bgcolor="#aaaaff">Button 2</td></tr>
<tr><td bgcolor="#aa00aa">Button 3</td></tr>
<tr><td bgcolor="#00aaaa"> Button 4</td></tr>

</table>

( funktionalität vor schönheit ;-) )

Viele Grüße
Matze