nicht angemeldet
Hallo,
bin b gerade dabei alle tabellen von einer meiner neuen alten seiten zu eleminieren. hab aber ein problem und googel hilft mir nicht weiter.
also
<table width="100%" border="1px">
<tr>
<td>eins</td>
<td>zwei</td>
<td>drei</td>
<td>vier</td>
<td>fünf</td>
<td>sechs</td>
<td>sieben</td>
</tr>
</table>
will ich ersetzen, und die styles so machen,... also sich wie die tabelle oben verhält.
Die richtige[TM] Lösung wäre wohl:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Navigation in TD-Elementen vs. UL/LI</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
ul {display:table; list-style-type:none; margin:0; padding:0; width:100%; border:2px outset gray;}
li {display:table-cell; border:2px inset gray;}
-->
</style>
</head>
<body>
<table width="100%" border="1px">
<tr>
<td>eins</td>
<td>zwei</td>
<td>drei</td>
<td>vier</td>
<td>fünf</td>
<td>sechs</td>
<td>sieben</td>
</tr>
</table>
<hr>
<ul>
<li>eins</li>
<li>zwei</li>
<li>drei</li>
<li>vier</li>
<li>fünf</li>
<li>sechs</li>
<li>sieben</li>
</ul>
</body>
</html>
Natürlich kann der IE das nicht. Vorteil der UL/LI-Struktur wäre aber, dass sie auch ohne CSS eine Auflistung erkennen lassen würde.
Allerdings, sollen wirklich die Menüpunkte alle unterschiedlich breit werden, wie bei der Tabelle ohne Breitenangabe für die TDs? Die Tabelle vermittelt zwar, aber macht per default ja nicht alle TDs gleich breit, sondern richtet sich nach dem Inhalt der Zellen. Soll weiterhin die Breite der Menüpunkte wirklich schmaler werden, wenn man die Breite des Viewports verkleinert? Oder sollen sie eventuell irgendwann in eine neue Zeile umbrechen? Oder soll man irgendwann horizontal scrollen müssen? All dies spräche für LIs mit float:left und einer _fixen_ Breite (in ex bzw. in px, wenn Rahmen in px ins Spiel kommen) und ggf. für eine fixe Breite des ULs (in ex bzw. in px).
viele Grüße
Axel
MudGuard