Problem mit (Superfish) Navigation

[Dennis123]

Hallo,

ich beschäftige mich nun seit geraumer Zeit mit der Superfish Navigation und habe die horizontale zwei Ebenen Navigation (http://users.tpg.com.au/j_birch/plugins/superfish/#sample4) recht stark an meine Wünsche angepasst. Nun bin ich an einem Punkt angelangt wo so weit alles passt, nur eine Sache bekomme ich einfach nicht hin.

Eine Vorschau der Navi gibt's hier: http://www.rasor.de/test/

Mein Vorhaben: Die Punkte in der zweiten Ebene sollen zentriert erscheinen. Probiert habe ich schon einiges bis sehr viel. Eher sehr viel, aber nichts klappt. Ich hoffe hier kann mir jemand weiterhelfen. :)

Damit das Helfen einfacher fällt habe ich hier noch die Pojektdateien der Navigation, damit man dadrin leichter ausprobieren kann: http://www.rasor.de/test/test.zip

Viele Grüße,
Dennis

[suit]

Mein Vorhaben: Die Punkte in der zweiten Ebene sollen zentriert erscheinen. Probiert habe ich schon einiges bis sehr viel. Eher sehr viel, aber nichts klappt. Ich hoffe hier kann mir jemand weiterhelfen. :)

Beschäftige dich mit den Grundlagen von CSS - inline-block und text-align sind ein Ansatz.

Übrigens: eine Navigation wie du sie zu bauen versuchst ist nur schwer bedienbar.

[Felix Riesterer]

Lieber Dennis123,

mir scheint, dass folgende CSS-Regel in Zeile 69 Deines Stylesheets dafür verantwortlich ist:

.sf-navbar ul li {  
    float: left;  
    width: auto;  
}

Mit dem float wird alles nach links gerutscht. Vielleicht kannst Du ja stattdessen display:inline verwenden? Dem übergeordneten <ul>-Element (hier .sf-navbar ul müsstest Du dann ein text-align:center verpassen.

Ausprobiert habe ich das jetzt aber nicht!

Liebe Grüße,

Felix Riesterer.

[Dennis123]

Mit dem float wird alles nach links gerutscht. Vielleicht kannst Du ja stattdessen display:inline verwenden? Dem übergeordneten <ul>-Element (hier .sf-navbar ul müsstest Du dann ein text-align:center verpassen.

Funktioniert leider nicht.

[suit]

Funktioniert leider nicht.

Wenn du vorher den ungültigen Code korrigierst schon - ein li-Element darf keien a-Elemente als Kinder haben.

[suit]

Funktioniert leider nicht.

Wenn du vorher den ungültigen Code korrigierst schon - ein li-Element darf keien a-Elemente als Kinder haben.

Korrektur: ein ul-Element darf keine a-Elemente als Kinder haben :) ein li-Element natürlich schon.

Die a-Elemente dürfen natürlich ebenfalls (wie die li-Elemente) nicht floaten - dann funktionierts einwandfrei.

Aus Layoutgründen- und Bedienbarkeitsgründen würde ich aber dennoch inline-block einem simplen inline vorziehen.

[Seitenbesucher]

Hi Dennis123,

Eine Vorschau der Navi gibt's hier: http://www.rasor.de/test/

erstens würde ich geschäftlich genutzte Testwebsites niemals öffentlich machen, sondern immer nur in anonymisierter Form auf dem eigenen Server.

Zweitens hat suit völlig Recht, diese Art der Navigation ist sehr schlecht bedienbar. Kaum bist du mit der Maus aus der zweiten Menüzeile ein Pixelchen herausgerutscht, ist sie auch schon wieder verschwunden.

Drittens baust du jetzt hoffentlich ein übersichtlicheres Menü als das bisherige.

Viel Erfolg!

Der Seitenbesucher