Moin,
bei der folgenden kleinen Seite handelt es sich um einen Versuch ein Webseite ohne Frames und Javascript zu bauen, deren Navigationsbereich und Inhalt duch Hintergrundfarbe optisch getrennt sind und deren Navigationsbuttons eine kleine Grafik links vom Text haben, die sich beim Überfahren mit der Maus ändert (hover-Effekt).
Nach einigen Versuchen habe ich dann einen Lösung gefunden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
<style type="text/css">
td#Navigation { background-color: silver;
border: 1px solid black;
margin: 0; padding: 10pt 10pt;
text-align: left; }
ul.Menue { font-size: 15pt;
border: 1px solid green;
margin: 10px 0; padding: 3px 0; }
ul.Menue li { border: 1px solid blue; list-style: none;
margin: 0; padding: 6px 0px; }
li.MenuItem a { color: black;
padding: 6px 0px 6px 32px;
background: url(Test1.gif) no-repeat; }
li.MenuItem a:hover { background: url(Test2.gif) no-repeat; }
</style>
</head><body>
<table width="100%"><tbody><tr><td id="Navigation">
<ul class="Menue">
<li class="MenuItem"><a href="Thema1.htm">Thema 1</a></li>
<li class="MenuItem"><a href="Thema2.htm">Thema 2</a></li>
</ul>
</td><td>
Lorem ipsum dolor ...
</td></tbody></table>
</body> </html>
Alles anzeigen
Test1.gif und Test2.gif sind zwei beliebige verschiedene 32x32 Pixel-Grafiken.
Zu sehen gibt es das Ganze zur Zeit unter http://www.feuerwehr-holtsee.de/Test/Test.html.
Unter Opera und IE6 ist alles prima, also wie erwartet. Nur im Firefox (1.0.7) ragen die Navigationseinträge in den Inhaltsbereich.
Ersetze ich die Tabelle und die beiden Spalten durch ein ul und div, wobei die ul#Navigation den Style float:left bekommt, dann stimmt die Breite der Navigation auch im FF. Mich stört aber an dieser Lösung, dass man die Breite der Navigation explizit angeben muss, wenn man o. a. farbliche Trennung zwischen Navigation und Inhalt behalten möchte.
Ist das nun ein Fehler im FF oder mache ich was falsch? Wie sieht es in der Versions 1.5 aus?
Claus