Navigation auf Seitenbreite

[Pierre]

Hallo

Vielleicht sitzt hier jemand, der mir bei einer kniffligen Aufgabe helfen kann.

Hier mal das Müsterchen:
Navi-Test

Und hier die Website, wo das hinkommen soll:
Musterseite

Ich möchte gerne, dass die Menueinträge immer auf Bildschrimbreite getrieben werden, also wie auf der Musterseite mit dem Logo nach rechts mitlaufen. Dabei sollen aber die Abstände nicht gleichmässig auf alle li Elemente verteilt werden, sondern ZWISCHEN den Einträgen stehen. Die minimale Seitenbreite ist auf 1024px definiert, also nach unten darf es dann nicht weiter zusammenlaufen. Ich habe das ansatzweise mit dem margin-right % gemacht, nur funzt das natürlich nicht auf die ganze Breite, zeigt wenigstens aber, wie's gehen sollte ;-)

Komme da einfach nicht mehr weiter und freue mich über hilfreiche Tipps.

Pierre

[Beat]

Hier mal das Müsterchen:
Navi-Test
Und hier die Website, wo das hinkommen soll:
Musterseite

Ich möchte gerne, dass die Menueinträge immer auf Bildschrimbreite getrieben werden, also wie auf der Musterseite mit dem Logo nach rechts mitlaufen.

Soll das heissen, dass die Einträge umgebrochen werden dürfen, wenn der Bildschirm zu schmal ist?

Dabei sollen aber die Abstände nicht gleichmässig auf alle li Elemente verteilt werden, sondern ZWISCHEN den Einträgen stehen.

Willst du sagen: Dabei sollen nicht alle li Elemente gleich breit sein?
Sondern die Abstände sollen zwischen den li Elementen verteilt werden?

Die minimale Seitenbreite ist auf 1024px definiert, also nach unten darf es dann nicht weiter zusammenlaufen.

Warum wirbst du für biegsames Blech, aber nicht für geschmeidiges Webdesign?

Ich habe das ansatzweise mit dem margin-right % gemacht, nur funzt das natürlich nicht auf die ganze Breite, zeigt wenigstens aber, wie's gehen sollte ;-)

Ein Tipp:

<ul style="display:block; text-align:justify">  
<li style="display:inline-block;">Hier ein Link</li>  
</ul>  

inline-block akzeptiert Blockeigenschaften wie width, hight etc...

mfg Beat

[PIerre]

Hallo Beat

Soll das heissen, dass die Einträge umgebrochen werden dürfen, wenn der Bildschirm zu schmal ist?

Nein, umbrechen dürfen sie nicht... tun sie aber auch nicht, weil die minimale Breite auf 1024 festgelegt ist.

Willst du sagen: Dabei sollen nicht alle li Elemente gleich breit sein?
Sondern die Abstände sollen zwischen den li Elementen verteilt werden?

genau so!

Warum wirbst du für biegsames Blech, aber nicht für geschmeidiges Webdesign?

Na ja, so geschmeidig ist das jetzt auch nicht ;-)

Ein Tipp:

<ul style="display:block; text-align:justify">

<li style="display:inline-block;">Hier ein Link</li>
</ul>

> inline-block akzeptiert Blockeigenschaften wie width, hight etc...  
>   
  
Fantastischer Ansatz... hab da mal was gedröselt, was zumindest in FF funzt und das ist schon mal ok. Habe allerdings noch nichts gescheiteres rausbekommen, als ein weiteres li-Element am Ende anzuhängen und dies via css zu unterdrücken. (Wie ich das im CMS dann noch an die Navigation ranhänge weiss ich noch nicht, aber auch das wird sich noch irgendwie zeigen.) Das Problem ist, dass justify nur funktioniert, wenn man nicht in einer Ausgangszeile ist. Das heisst der Text muss umbrechen, sonst wird er linksbündig platziert, wie das natürlich bei einem normalen Blocksatz auch der Fall ist. Alle Zeilen ausser der letzten werden auf Breite getrieben, die letzte Linksbündig. Bei nur einer Zeile wird auch kein Blocksatz erstellt. Ausser es gäbe ein Kommando, wo man das erzwingen könnte.  
  
Vielleicht kann man den Code noch optimieren... aber ist schon mal ganz nahe an dem was gewünscht ist.  
  
Hatte auch mit :after versucht nur über CSS das überflüssige li Element zu unterdrücken, hab ich aber auch nicht geschafft...  
  
  
  
  

[Gunnar Bittersmann]

@@PIerre:

nuqneH

Fantastischer Ansatz... hab da mal was gedröselt, was zumindest in FF funzt und das ist schon mal ok. Habe allerdings noch nichts gescheiteres rausbekommen, als ein weiteres li-Element am Ende anzuhängen und dies via css zu unterdrücken.

Gescheit wäre es, kein zusätzliches li-Element im Markup anzuhängen, sondern unsichtbaren Text per CSS zu generieren.

Vergiss das dort über IE Gesagte; er ist in einem Punkt anderen Browsern voraus:

Noch gescheiter ist nämlich 'text-align-last: justify'. [CSS3-TEXT §6.2] Allerdings sind wohl alle Browser mit Ausnahme des IE nicht gescheit genug, das schon zu unterstützen.

IE ist damit völlig zufrieden:

ul  
{  
  list-style: none;  
  margin: 0;  
  padding: 0;  
  text-align-last: justify;  
  text-align: justify;  
}  
  
li  
{  
  display: inline;  
}

Qapla'