XHTMLforum - Menü mit Breite 100% und Links ohne Tabelle?

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Menü mit Breite 100% und Links ohne Tabelle? (http://xhtmlforum.de/showthread.php?t=36970)

Menü mit Breite 100% und Links ohne Tabelle?

Hallo,

ich habe ein dynamisches horizontales Menü. Es können also immer Punkte dazukommen oder wegfallen.

START | PUNKT 1 | PUNKT 2 |

Jetzt stellt sich der Nutzer selber einen weiteren Menüpunkt ein (PUNKT 3), dann soll es so aussehen:

START | PUNKT 1 | PUNKT 2 | PUNKT 3 |

Die Darstellung des Menüs ist eigentlich kein Problem, doch sollen sich die Menüpuntke immer über 100% der Breite des Bildschimrs erstrecken.
Mit einer Tabelle ist das ja kein Problem, da sich die TD's immer anpassen.
Die Boxen sollen auch nicht alle gleich breit sein. Je nachdem wie breit das Wort eben ist. Jetzt steht das auf 60px, wenn ich die rausnehmen, dann sind die Menüpuntk aber alle untereinandern

Code:

<ul id="navigation">[*]Start[*]Punkt 1[*]Punkt 2[*]Tagebuch[*]Sonstiges[*]Kontakt[/list]

und das CSS dazu:

Code:

ul#navigation {

        border-bottom: 1px solid #000;

        color: #FFF;

        float: left;

        list-style: none;

        position: relative;

        width: 100%;

        margin:0;

}



ul#navigation li {

        border-right: 1px solid #000;

        color: #FFF;

        float: left;

        text-align: center;

        display: block;

        width: 60px;

}



ul#navigation a {

        width: 100%;

        color: #FFF;

        display: block;

        text-decoration: none;

        width: 100%;

}



ul#navigation a:hover {

        background.color: #e5e5e5;

        }



ul#navigation a:active {

        background.color: red;

        }

Hat jemand einen Tipp für mich?

Danke
Spardie

Hallo,

dort war ich schon. Ich habe aber kein Beispiel für ein Menü mit der Breite 100% gefunden. Die Menüpunkte haben immer eine feste Breite und sind dann nur verschieden formatiert.

Wenn ich nur 2 Menüpunkte habe, dann sollen diese jeweils mit 50% Breite erscheinen...

Danke
Spardie

IMHO ist dies eines der wenigen Fälle, wo man serverseitig generierte Inline-Styles verwenden kann/muss.

Code:

<li style="width: <%= 100 / $anzahlMenuepunkte %>%">Punkt X

(Das ist Pseudo-Code)

Eventuell noch die Division auf eine sinnvolle Nachkommazahl kürzen.

Robin

Ich hab' mir schon öfter gewünscht, man könnte in CSS Formeln angeben ...
Das wär' mal geil.

Gab es hier nicht mal einen Thread, was man sich bei CSS3 wünscht?
Die Suchfunktion rückte nichts raus.

Zitat:

Zitat von E|H

Ich hab' mir schon öfter gewünscht, man könnte in CSS Formeln angeben ...
Das wär' mal geil.

Allerdings: Sowas wie "#id1 {width:"width(#id2)"; } würde jedes Faux Columns Problem spielend lösen ;)

Du kannst doch dem ul eine Hintergrundfarbe geben (das ist autom. 100% breit), und die[*]'s mit display:inline; in eine Reihe holen. Jetzt noch ein bischen Padding/Margin und du kannst einige Li's in einer Reihe aufzählen.

Oder was falsch verstanden?

Zitat:

Zitat von E|H

kuckst du hier

Kenn' ich, ist aber nicht, was ich gesucht hab'.