Navigation mit ul und zu breite Anzeige der Texte

  • 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:

    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

  • 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.
    Das wäre auf jeden Fall der elegantere Weg. Tabellenlayouts sind pfui.

    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;)

  • caveman

    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 caveman

    Tabellenlayouts 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. Danke

    Claus

  • Wenn ich's anhand der CSS-Definitionen (padding-Angaben) recht interpretiere, sollen sich die Links wie Blockelemente verhalten. Dann müsstest du das auch entsprechend angeben.
    Versehe mal den Selektor "li.MenuItem a" noch mit einem "display: block;", dann dürftest du das erwünschte Ergebnis erhalten.