[Webcoder]

Hallo Community

oft helfe ich, aber diesmal möchte ich noch etwas lernen.

Ich habe eine Seite mit einem horizontalem Drop-Down Menü gebastelt. Dabei habe ich versucht CSS 3 Eigenschaften einzusetzen, z. B. Media-Querys um position:fixed; aufzuheben, wenn die Seite für das Menü zu schmal wird.


Meine Frage:
Die Seite wird unter Mac OS X im Safari, Chrome und iCab richtig angezeigt. Im Firefox und Opera verschieben sich die Untermenüs, kann mir jemand sagen warum und wie ich sie auch dort genau unter den Hauptpunkten positionieren kann?


Bitte denkt daran, das ist nur eine Testseite die vorläufig nicht in den Echtbetrieb geht. Mir ist durchaus bewusst, dass ältere Browser und speziell der IE damit wohl in naher Zukunft noch Probleme haben.

Ich bin für jeden Tipp bezüglich der Umsetzung oder der Fehlerbehebung dankbar.

... (Bitte beachtet, dass es sich um eine Testseite handelt, die irgendwann wieder vom Netz geht!)


Lieben Gruß
Webcoder

[plastiko]

Ich meine display:inline; ist hier nicht zum containing block geeignet. Du könntest #navi li float:left; oder display:inline-block; geben. Vielleicht entsprechen dann auch die vertikalen padding deinen Wünschen.

Ansonsten:
left: 0; für #navi li ul

[Webcoder]

Hi plastiko

Zitat von plastiko

Ich meine display:inline; ist hier nicht zum containing block geeignet. Du könntest #navi li float:left; oder display:inline-block; geben. Vielleicht entsprechen dann auch die vertikalen padding deinen Wünschen.

Ansonsten:
left: 0; für #navi li ul

Danke für die Antwort, auf das left:0; hätte ich auch kommen müssen.

Beim containing hast du sicher Recht und ich werde es am Wochenende sicher noch mal mit display:inline-block; und float:left; versuchen. Jedoch sahen die ersten Versuche damit nicht gerade viel versprechend aus.

Gruß
Webcoder

[Webcoder]

Ich noch mal

Habe soeben eine neue Version des Menüs gebastelt, diesmal mit display:inline-block;. Des Weiteren habe ich Farbverläufe hinzugefügt und die Schatten ein wenig verfeinert.

...


Da ich nur auf Mac OS X arbeite, wäre es nett wenn einer mal Screenshots vom IE 9 und 8 dazu posten könnte. Oder zumindest eine Beschreibung der groben Fehler in den Browsern.


Danke und Gruß
Webcoder

[hubspe]

Moin,
im Grunde reicht float:left;.
Bei display:inline-block sollte man bedenken, dass der IE7 da mit display:inline; und zoom:1 per Cond.Comment einen Workaround braucht, weil er mit inline-block nix anfangen kann. inline-block gibt ihm nur HasLayout.

Ich hab mal ein Tut zu ner Dropdown geschrieben, was nur mit float funktioniert.
Vielleicht hilft dir das.

edit. im IE8 gibts Probleme mit der Transparenz, im IE7 ists total zerlegt und unbrauchbar.
Schau dir das Tut an, dann klappts sogar mit dem IE6 (obwohl man den ja nicht mehr berücksichtigen muss)

[Webcoder]

Hi hubspe

da das Ganze nur experimentell läuft, kann ich selbst den IE 7 außer acht lassen.

Dein Tutorial kannte ich bereits und habe es schon einmal durchgelesen gehabt. Was mich jedoch an der "float" Variante stört, sind die Breitenangaben für die einzelnen Listenpunkte.

Sowohl bei der "inline" als auch bei der "inline-block" Variante kann ich auf eine feste Breite verzichten. Dies kommt der Flexibilität und mir doch sehr entgegen. Trotzdem hast du Recht und ich werde später noch eine "float" Variante ausprobieren.

[Webcoder]

Hallo noch mal..

habe jetzt die "float" Variante umgesetzt, finde jedoch die unregelmäßigen Abstände zwischen den einzelnen Menüpunkten nicht wirklich schön.

...

[Thielo]

Dann nimm doch einfach die Breitenangaben raus..

[Webcoder]

@Thielo
Da war ich mal wieder ein wenig ...

Hatte jetzt gedacht, wenn ich keine Breite angebe, gehen die Listenelemente über die gesamte Breite. Aber frag bitte nicht wie ich darauf gekommen bin.


Wie heißt es so schön: "Manchmal sieht man den Baum vor lauter Wäldern nicht!", oder so ähnlich.