[mondrian]

Hallo Exit,

die flexible Verteilung des freien Raums ist per CSS erstmal nicht so gut möglich wie
mit Tabellen.
Du könntest hier m.E. sehr gut bei einer Tabelle bleiben, denn was du da hast ist
zumindest eine Liste (aus "HTML-semantischer" Sicht), und eine Tabelle kommt der
Liste schon sehr nahe.

Ansonsten ist erstmal eine Liste richtig, die dann horizontal angezeigt werden muss.
Danach kann dann aber für moderne Browser die Tabelle nachgebildet werden
(per CSS), hab mal was geschrieben und das schaut m.E. so schonmal ganz gut aus,
jedenfalls erstmal mit Firefox 2.0, ob es dann wirklich mit unterschiedlichen Texten
sauber hinhaut muß nochmal geschaut werden:

Edit:

hab mal den Code verändert, sieht jetzt besser aus:

<?xml version="1.0" encoding="ISO-8859-15" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta content="text/html; charset=iso-8859-15" http-equiv="Content-Type" />
<title>test</title>
<style type="text/css">
body{background-color:black;}
ul.nav{color:silver;font-family:Arial, sans-serif;font-weight:bold;font-size:.8em;line-height:1.6em; width:600px;
 border-top:1px solid silver; border-bottom:1px solid silver;margin:auto;list-style-type:none;padding:0; }
ul.nav li {margin:0;padding:0;display:inline;}
ul.nav li a{color:silver;}   ul.nav li a:hover{color:white}

/* Tabelle nachbilden: */

ul.nav { display:table;}
ul.nav li { display:table-cell; margin:0;padding:0;text-align:center;width:50px;}

/* links, rechts gleicher Abschluss */

ul.nav li:last-child {text-align:right;padding-right:2em; text-align:right;}
ul.nav li:first-child {text-align:left; padding-left:2em; }

</style>
<!--[if IE gt 5]><style>
body{text-align:center} /* ie6 */
ul.nav li {display:block;float:left;} /* ie7 */
#nava li, #navb li {width:19%}
#navc li { width:15.5%}
#navd li { width:97%; text-align:left;padding-left:2em;}
</style><![endif]-->
</head>
<body>
<p><br /><br /></p>

<ul class="nav" id="nava">
<li>  <a>Organisation</a></li>
<li>  <a>Ort</a></li>
<li> <a>Aussteller</a></li>
<li> <a>Anmeldungen</a></li>
<li>  <a>Videos</a></li>
</ul>

<p><br /><br /></p>

<ul class="nav" id="navb">
<li> <a> Termin</a></li>
<li> <a> Ort</a></li>
<li> <a> Programm </a></li>
<li> <a> Aussteller </a></li>
<li> <a> Nachlese </a></li>
</ul>

<p><br /><br /></p>

<ul class="nav" id="navc">
<li> <a> Termin</a></li>
<li> <a> Ort</a></li>
<li> <a> Programm </a></li>
<li> <a> Aussteller </a></li>
<li> <a> Bilder </a></li>
<li> <a> Teilnehmer </a></li>
</ul>

<p><br /><br /></p>

<ul class="nav" id="navd">
<li> <a>Verkauf von Bilder/Video CD/DVDs </a></li>
</ul>

</body>
</html>

Schau es dir mal an, Feinarbeit ist ja noch möglich, also Abstände usw..

Sind verschiedene Ansätze, einaml Tabellennachbildung, dann Unterscheidung
der Seiten für den IE.

Geht auch per verschiedener id im Body-Tag (und immer noch einer stylesheet-Datei)
statt der unterchiedlichen IDs bei UL.