flexible Zellenbreite

[molily]

Hallo Markus,

<table cellspacing=0 cellpadding=5 border=1 width="100%">
<tr>
 <td width="1%" nowrap><a href="xxx">Menupunkt 1</a></td>
 <td width="1%" nowrap><a href="xxx">Menupunkt 2</a></td>
 <td width="1%" nowrap><a href="xxx">Menupunkt 3</a></td>
 <td width="1%" nowrap><a href="xxx">Menupunkt 4</a></td>
 <td width="1%" nowrap><a href="xxx">Menupunkt 5</a></td>
 <td width="1%" nowrap><a href="xxx">Menupunkt 6</a></td>
 <td width="99%"> </td>
</tr>

Leider hat diese Tabelle width=100%, sie soll aber wie erwähnt eine _feste_ Breite haben.
Geht also schon im Ansatz nicht.

Wieso? Der Ansatz ist meines Erachtens passend, wieso gibst du nicht einfach anstatt width="100%" die feste Breite an? Wie ich dich verstehe, dürfte das den Anspruch erfüllen, dass die Menüpunkt-Zellen so klein wie möglich/nötig sind.

Abgesehen davon verstehe ich nicht, wozu die leere Zelle da ist. Wenn du eine Layouttabelle hast, welche alle Inhalte umfasst und die Menüleiste eine Zeile von dieser Tabelle ist, kannst du ebenso gut mit verschachtelten Tabellen arbeiten - die Tabelle in der Zelle ist dadurch nur so groß, wie sie soll, der Raum nach rechts darüber hinaus ist der Hintergrund der Containerzelle, welcher deine letzte leere Zelle ersetzt. Die innere Tabelle braucht folglich gar keine feste Breite, nur die äußere.

Schrittweise kannst du nun auf CSS umsteigen, beispielsweise kannst du zuerst die Containertabelle ersetzen, sofern es die Haupt-Layouttabelle ist, musst du dieses Prozedere natürlich den anderen Zellen gleichtun.

<div id="murks">
<table>
<tr>
<td>...<a href="...">Menüpunkt Eins</a></td>
...
</tr>
</table>
...eventuell andere Zeilen/Bereiche...
</div>

Das div hat eine feste Breite (zumindest in em) und ist größer als die Tabelle darin.

Eine andere Möglichkeit wäre eine CSS-formatierte Liste. Das Markup sähe wie folgt aus:

<ul>
<li class="first"><a href="murks">Menüpunkt 1</a></li>
<li><a href="murks">Menüpunkt 2</a></li>
<li><a href="murks">Menüpunkt 3</a></li>
<li><a href="murks">Menüpunkt 4</a></li>
<li><a href="murks">Menüpunkt 5</a></li>
</ul>

Die grundlegenden Style-Regeln dazu (beispielhaft!):

ul {margin:0; padding:0; list-style-type:none; background-color:#ccc; /*max-*/width:45em; height:1.6em; /* height wichtig, denn im Gecko vergrößern die li-Elemente wegen dem float nicht den Container, das ul-Element wäre folglich null Pixel hoch, was sichtbar wird, wenn ul border:1px solid red; erhält. */}
li {float:left; margin:0; padding:0; border-style:solid; border-color:black; border-width:1px 1px 1px 0;}
li.first {border-width:1px;}
a {display:block; margin:0; padding:0 0.5em; line-height:1.5em;}
a:link {text-decoration:none;}
a:hover {text-decoration:none; background-color:#fcc;}
...

Die gängigen neuen Browser sollten das unterstützen.

Grüße,
Mathias