Links gleichmässig über Breite verteilen

[Layna]

Hallo.
Ich würde gerne in folgendem HTML-Gerüst:

<div id="nav">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
...
</div>

die Links gleichmäßig auf die #nav verteilen und die breite Komplett ausnutzen.
#nav hat eine feste Breite, die Links passen locker in eine Zeile.
Gibt es da einen CSS-Trick den ich dafür anwenden kann?

Danke schonmal,
    Layna

[Matze]

Hallo,

Ich würde gerne in folgendem HTML-Gerüst:

<div id="nav">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
...
</div>

die Links gleichmäßig auf die #nav verteilen und die breite Komplett ausnutzen.
#nav hat eine feste Breite, die Links passen locker in eine Zeile.
Gibt es da einen CSS-Trick den ich dafür anwenden kann?

#nav a { display:block; width:33%; }
sollte 3 Links gleichmässig verteilt darstellen.
Bei mehr Links 100% / Anzahl der Links.

Grüße, Matze

[Layna]

Hallo,

Ich würde gerne in folgendem HTML-Gerüst:

<div id="nav">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
...
</div>

die Links gleichmäßig auf die #nav verteilen und die breite Komplett ausnutzen.
#nav hat eine feste Breite, die Links passen locker in eine Zeile.
Gibt es da einen CSS-Trick den ich dafür anwenden kann?

#nav a { display:block; width:33%; }
sollte 3 Links gleichmässig verteilt darstellen.
Bei mehr Links 100% / Anzahl der Links.

Grüße, Matze

Ok, ich bin schonmal näher an dem was ich suche, danke erstmal dafür :).
Ich habe den Ansatz etwas angepasst, indem ich <span>-tags um die Links habe. Die brauche ich leider weil die Links einen Hintergrundeffekt habe, der nur so breit sein soll wie auch die Schrift -> den Link breiter machen führte also zu Schwierigkeiten.
Leider habe ich jetzt 2 Effekte:

1. Der letzte Link schließt leider nicht Bündig mir dem rechten Ende von div#nav ab, was ich noch sehr schön fände.
2. Einer der Links hat einen ziemlich langen Text, der sich jetzt über 2 Zeilen verteilt, was ich auch lieber vermeiden würde.

Leider tritt beides sowohl mit als auch ohne span-tag auf.

Bin ich etwa am Ende der Möglichkeiten von CSS angekommen?

Ciao,
    Layna

[ottogal]

Hallo Lanya,

1. Der letzte Link schließt leider nicht Bündig mir dem rechten Ende von div#nav ab, was ich noch sehr schön fände.

Versuch es halt mal mit Prozentwerten für die Breiten, die sich nicht auf genau 100% addieren.

2. Einer der Links hat einen ziemlich langen Text, der sich jetzt über 2 Zeilen verteilt, was ich auch lieber vermeiden würde.

Die Breiten müssen ja nicht gleich sein. Wenn z.B. deine Links mit
    kurz   mittel   ziemlichlang
beschriftet sind, tuns vielleicht die Breiten
    15%    30%      50%

• oder irgendwie so...

Gruß
ottogal

[Layna]

Hallo Lanya,

1. Der letzte Link schließt leider nicht Bündig mir dem rechten Ende von div#nav ab, was ich noch sehr schön fände.

Versuch es halt mal mit Prozentwerten für die Breiten, die sich nicht auf genau 100% addieren.

2. Einer der Links hat einen ziemlich langen Text, der sich jetzt über 2 Zeilen verteilt, was ich auch lieber vermeiden würde.

Die Breiten müssen ja nicht gleich sein. Wenn z.B. deine Links mit
    kurz   mittel   ziemlichlang
beschriftet sind, tuns vielleicht die Breiten
    15%    30%      50%

• oder irgendwie so...

Gruß
ottogal

*kommt so immerhin schonmal näher an ihr idealbild des ganzen*
Juchuu, ich habe die grenzen von CSS gefunden ;).
Aber danke für die vielen kleinen Wegweiser was ich noch tun kann :).

Ciao,
    Layna

[Harlequin]

Yerf!

*kommt so immerhin schonmal näher an ihr idealbild des ganzen*
Juchuu, ich habe die grenzen von CSS gefunden ;).

Jein. Man könnte ausnutzen, dass du ein Verhalten ähnlich dem von Tabellenzellen wünschst. diplay:table-cell existiert in CSS. Der Einsatz scheitert aber an den Gernzen des IE...

(Man könnte auch mit Blocksatz hantieren, ist aber ein recht unschöner Hack...)

Gruß,

Harlequin

[ChrisB]

Hi,

bitte zitiere vernuenftig, und nicht einfach alles.

Ich habe den Ansatz etwas angepasst, indem ich <span>-tags um die Links habe. Die brauche ich leider weil die Links einen Hintergrundeffekt habe, der nur so breit sein soll wie auch die Schrift -> den Link breiter machen führte also zu Schwierigkeiten.

Haettest du das ganze gleich vernuenftig als Liste ausgezeichnet, koenntest du den ListItems die Breite geben, und darin die nach wie vor nur so breit wie erforderlich dargestellten Links mit dem Hintergrundeffekt versehen.

MfG ChrisB

[EKKi]

Mahlzeit,

<div id="nav">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
...
</div>

#nav a { display:block; width:33%; }

Vielleicht hilft auch
#nav a { margin: auto; }
?

MfG,
EKKi