Superfish zentrieren

[DatGruen]

Hallo,

ich bräuchte mal etwas Hilfe, ich versuche grade das Superfish Menü zentriert auszurichten aber irgendwie klappt das nicht.

Als Vorlage zum Nachbauen habe ich mir dies hier rausgesucht:

http://www.cssplay.co.uk/menus/centered.html

Und habe die Datei: superfish-base.css so angepasst

/* ESSENTIAL STYLES */
.sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sf-menu li {
    float: left;
    position: relative;
    right: 50%;
}

.sf-menu ul {
	float:left;
    position: absolute;
    display: none;
    top: 100%;
    left: 50%;
    left: 0;
    z-index: 999;
    margin: 0 auto;
    padding: 0;
}
.sf-menu > li {
    float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
    display: block;
}

.sf-menu a {
    display: block;
    position: relative;
}
.sf-menu ul ul {
    top: 0;
    left: 100%;
}

Dies führt aber nicht zum gewünschten Erfolg, das Menü ist nicht mittig ausgerichtet, sondern rutsch links über den Monitorrand "raus".

Aktiviert im CSS Framework habe ich: Layout-Builder, Responsives Layout und CSS-Reset

Einen Link kann ich noch nicht verteilen da die Seite aktuelle nur lokal installiert ist.

superfish.jpg

Schon mal lieben Dank für die Hilfe :-)

[Yangdoo]

Hi,

Du musst das float:left beim ul und beim li gegen ein display:inline-block tauschen, dann sollte es gehen.

Grüße Marco

[DatGruen]

Hi Marco,

danke für deine Hilfe, dass hat leider nicht geklappt. Ich habe jetzt dem Template "nav_superfish_horizontal.html5" noch eine ID zugewiesen danach hat es hingehauen.

Gruß

[svenskalec]

Hi Marco,

danke für deine Hilfe, dass hat leider nicht geklappt. Ich habe jetzt dem Template "nav_superfish_horizontal.html5" noch eine ID zugewiesen danach hat es hingehauen.

Gruß

Könntest du hier etwas näher drauf eingehen wie du das zugewiesen hast bitte. ich baue gerade auf Responsiv um und stehe vor dem gleichen Problem.

[Bennie]

Zentrierung bei unbekannter Breite kannst Du auch erreichen indem Du dem umschließenden Element (bei Dir wohl .sf-menu ul)

display:table;
margin: auto

gibst.
Inwieweit das in allen Browsern funktioniert weiß ich allerdings nicht. Responsiveness ist vermutlich bei so einem Menü egal, da Du es bei kleineren Auflösungen eh durch ein mobiles Menü ersetzt ,nehm ich an.

[svenskalec]

Super hat funktioniert. Allerdings habe ich das Nav element mit diesem Coder gesehen müssen nicht das ul.

Vielen Dank