Es funzt! Danke!
Auch wenn ich zugeben muss, dass ich display:block nicht verstanden habe, obwohl ich es bei http://de.selfhtml.org nachgelesen habe. Das soll jetzt aber keine Aufforderung zu Nachhilfe in HTML sein.
Nochmals Danke
Claus
Beiträge von ClausG
-
-
Zitat von caveman
Ich kann nicht so recht nachvollziehen, was Du gegen die ul-Variante der Navigation hast. Auch diese müßtest Du ja nicht mit einer festen Breite versehen.
Für das, was ich möchte, schon: http://de.selfhtml.org/css/layouts/me…htm#hintergrund diente mir dabei als Vorlage. Ich habe keine anderen Weg gefunden.
Zitat von cavemanTabellenlayouts sind pfui.
Ja, ich habe es versucht. Aber es gibt dort noch einige Schwächen, die wohl erst künftige Generationen von Browsern und Spezifikationen lösen werden. Ich möchte jetzt aber darüber keine Grundsatzdiskussion führen.
Zitat von caveman
Aber generell würde auch die Tabellenvariante gehen, wenn Du in td#Navigation einfach das padding vergrößerst (z.b. padding: 10px 40px 10px 10px;)Okay, ja so geht's. Verschwendet dann natürlich im IE wieder unnötig Platz.
Ist das nicht ein Fehler im FF? Eigentlich müsste die Border doch um ul.Menue li, also um den Text laufen, oder?
denka22765
Also wie im 1.0.7. DankeClaus
-
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:
HTML
Alles anzeigen<!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>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
