nicht angemeldet
Hallo Gernot,
naja, mir würde zu dem Thema auch wieder der erzwungene Blocksatz einfallen, den man auf LI-Elemente mit display:inline anwenden könnte,
die Idee klingt gut, ist es aber leider nicht. Bei Blocksatz teilt der
Browser den überschüssigen Leerraum durch die Anzahl der Leerzeichen
in der Textzeile auf, d.h. die Abstände rechts sind dann immer gleich
groß, was so nicht gewollt ist.
Wieauchimmer, ich für meinen Teil komme zu der Meinung, dass es nicht
möglich ist, das von mir gewünschte Menü ohne Einsatz von Tabellen zu
realisieren. Wer es hinbekommt, der kann gern hier die Lösung ver-
öffentlichen. Unten noch der vereinfachte Quelltext zu meinem
Problem, aufgrund :last-child nur im Firefox einwandfrei.
Also, wer kann diese Optik auch mit einer Listennavigation erzeugen?
Viele Grüße,
Stefan
***
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="language" content="de">
<title>Beispiel</title>
<style type="text/css">
a {
background: inherit;
color: inherit;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
}
body {
background: #FFF;
color: #424242;
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
}
table {
background: #EEE;
border-collapse: collapse;
height: 43px;
width: 553px;
}
td {
border-left: 1px solid #424242;
padding-bottom: 3px;
padding-left: 7px;
vertical-align: bottom;
}
td:last-child { width: 10px; }
</style>
</head>
<body>
<table>
<tr>
<td><a href="#">Lage</a></td>
<td><a href="#">Stadthäuser Typ B</a></td>
<td><a href="#">Stadthäuser Typ A</a></td>
<td><a href="#">Wohnungen</a></td>
<td><a href="#">Kontakt</a></td>
<td><a href="#">Impressum</a></td>
</tr>
</table>
<ul>
<li><a href="#">Lage</a></li>
<li><a href="#">Stadthäuser Typ B</a></li>
<li><a href="#">Stadthäuser Typ A</a></li>
<li><a href="#">Wohnungen</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</body>
</html>
Gernot Back