Menü mit Liste und float

[Jonas]

Hallo,

gibt es eine Möglichkeit folgendes Menü mit html/css zu gestalten ohne eine Tabelle zu benutzen?

Das Menü ist als Liste realisiert und soll horizontal mit fester breite sein.

vereinfacht sieht das etwa so aus:

<ul>
  <li>News</li>
  <li>langer Menüpunkt</li>
  <li>mittellanger</li>
</ul>

ul {
  width: 900px;
}
li {
  float: left;
}

Die einzelnen Menüpunkte sollen sich jedoch variabel über die gesamte Breite des Menüs aufteilen. Ausserdem sollen die Menüpunkte nicht alle die gleiche Breite haben, sondern je nach Länge des Links größer bzw. kleiner ausfallen.

Beispiel mit 3 Menüpunkten:

----------------------------------------------------
|   News   |   langer Menüpunkt  |   mittellanger  |
|--------------------------------------------------|

wenn nun ein Menüpunkt wegfällt, sollen sich die restlichen 2 auf die ganze Breite verteilen.. etwa so...

----------------------------------------------------
|        News      |        langer Menüpunkt       |
|--------------------------------------------------|

verstanden? gut...

Schöne Grüße
Jonas

[Beat]

Leider ist das nicht ohne weiteres machbar.
In dem Moment, wo du ein Element als Float bestimmst, ist die Breite des Contents massgeben. Wenn diese nicht künstlich beschränkt wird, dann wird genommen, was verfügbar ist. Ob dann der nächste Float noch auf die gleiche Zeile passt, ist dem Zufall überlassen (sprich auch den verschiedenen gerade verfügbaren Viewport-Grössen.)

Ich schlage aber folgenden Hack vor:

<div id=menu>
 <ul>
  <li>Dies</li>
  <li>Das</li>
 </ul>
</div>

und das CSS

#menu {display:table;}
#menu ul {display:table-row;}
#menu li {display:table-cell;}

Weitere Korrekturen sind notwendig.

mfg Beat

[Jonas]

Danke für die schnelle Hilfe..
habs hinbekommen

glg

[Ingo Turski]

Hi,

Leider ist das nicht ohne weiteres machbar.

korrekt.

In dem Moment, wo du ein Element als Float bestimmst, ist die Breite des Contents massgeben. Wenn diese nicht künstlich beschränkt wird, dann wird genommen, was verfügbar ist.

Falsch. Die Breite orientiert sich, wenn nicht explizit angegeben, am Inhalt des Elements. Das ist in CSS 2.1 so hinzu gekommen.

#menu {display:table;}

was natürlich der leider noch meistgenutzte Browser nicht versteht und somit untauglich in der Praxis ist.

freundliche Grüße
Ingo

[Jonas]

So ja, leider funktioniert das mit den display: table ja nicht im Internet Explorer und ist für mich daher nutzlos

Leider ist das nicht ohne weiteres machbar.
korrekt.

was heisst den nun "nicht ohne weiteres" ??

Grüße
Jonas

[Inita_]

hoi,

du kannst es mit padding left/right machen, dann sind li mit verschiedenen grosse/lange:

<ul>
  <li>News</li>
  <li>langer Menüpunkt</li>
  <li id="laenger">mittellanger</li>
</ul>

ul{
  width:900px}
li{
  float:left;
  padding:0 10px}
li#lenger{
  width:70px}

doch, ich denke aber, werden aber nicht alle deine li genau ul width:900px nehmen, in dem fall, kannst du letztem li eine extra klasse/id geben mit width sowie es passt 900px.

Gruss,
Inita

[at]

Hallo.

<ul>
  <li>News</li>

Okay, die <a href="foo">-Elemente denken wir uns der Einfachheit halber mal dazu.

<li>langer Menüpunkt</li>

Verwende statt des Leerzeichens ein  .

<li>mittellanger</li>

<li class="ueberfluessig"><a href="foo">unwichtiges&nbsp;Verweisziel</a></li>

</ul>

ul {
  width: 900px;

text-align: justify;  
height: 1em; /* sollte dem Wert von line-height entsprechen */  
overflow: hidden;

}
li {

display: inline;

}

li.ueberfluessig  
{  
letter-spacing: 900px; /* Der Einfachheit halber der gleiche Wert wie für die Breite. Im Prinzip aber nur ein ziemlich großer, damit es garantiert zu einem Zeilenumbruch kommt */  
}

Etwas unhandlich, mit vielen Einschränkungen zu verwenden, aber vielleicht dennoch brauchbar.
MfG, at