Thema: Superfish zentrieren in Go Vista lite Template

Hallo Ihr helfenden Köpfe,

ich habe ein Problem mit der Positionierung meines Superfish-Menüs im Go Vista lite Template.
Es funktioniert eigentlich alles bestens, bis auf die Tatsache das ich es nach ettlichen Stunden ausprobieren aller mir möglich erscheinenden Varianten und ausgiebieger Suche hier im Forum und im www, nicht hinbekomme das Menü auf Position "USER 3" unterhalb des Headers mittig zu zentrieren.

Hat vlt. jemand einen Tipp für mich? Evtl. sogar eine Lösung?

Habt vielen Dank für Eure Mühen

Gruß Steve

Ein Link zur Seite wäre sehr hilfreich

Leider gibt es diesen Link noch nicht, da die Seite noch nicht online gehen darf. Manche Sportvereine sind da etwas engstirnig.
Vielleicht hast Du trotzdem einen Tipp für mich ????

Also das Menü hängt links am Rand statt mittig unter dem header?

Soll es die ganze Breite unter dem header einnehmen?
Wenn ja: "width: 100%" angeben
Wenn nein: "float: center" versuchen

Danke Gnaarz für die schnelle Antwort und die Mühe di Du Dir mit mir machst.
Ich habe Deine Tipps befolgt, aber anscheinend nicht richtig interpretiert.

Wo genau muss ich eines der beiden einfügen? In der template.css oder in der superfish.css?

Vielleicht kannst Du das mit diesen Daten etwas genauer beschreiben:

template.css (Ausschnitt)

ul#mainlevel-nav {
text-align: center;
margin:0px;
padding:0;
height:33px;
}

ul#mainlevel-nav li {
list-style: none;
display:inline;
height:33px;
width:119px;
}

ul#mainlevel-nav li a {
font-size:11px;
color:white;
font-weight:normal;
text-align:center;
background:url(../images/buttontop_normal.jpg) no-repeat;
line-height:33px;
height:33px;
width:119px;
display: block;
float:left;
}
ul#mainlevel-nav li a:hover {
color:white;
font-size:11px;
font-weight:normal;
text-align:center;
background:url(../images/buttontop_over.jpg) no-repeat;
line-height:33px;
height:33px;
width:119px;
display: block;
float:left;


superfish.css (komplett mit meinen Hilfstexten)


/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin: 0; /* Abstand der Navi-Felder vom linken Rand - ORIG 0 */
padding: 0;
list-style: none;
}
.sf-menu {
line-height: 0.6; /* Höhe der Navi-Felder - ORIG 1.0 */
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) - ORIG 10em */
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left; /* Laufrichtung der Anzeige - ORIG left */
position: relative; /* Anzeigeposition der Untermenüs - ORIG relative */
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 2.5em; /* match top ul list item height */
z-index: 120;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}

/*** DEMO SKIN ***/
.sf-menu {
float: left;
margin-bottom: 1em;
}
.sf-menu a {
border-left: 1px solid none; /* Farbe u. Stärke des linken Rahmens der Navi-Felder - nur LINKS - ORIG #fff */
border-top: 1px solid none; /* Farbe u. Stärke des oberen Rahmens der Navi-Felder - nur LINKS - ORIG #CFDEFF */
padding: .75em 1em; /* Abstand des Textes vom Rahmens der Navi-Felder - .75em 1em */
text-decoration:none; /* Funktion und Aussehen der Texte der Navi-Felder - ORIG none */
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #ffffff; /* Schriftfarbe der Navi-Felder - nur LINKS - ORIG #13a */
}

.sf-menu li {
background: #none; /* Hintergrundfarbe der Navi-Felder - ORIG #BDD2FF */
}
.sf-menu li li {
background: #024488; /* Hintergrundfarbe der Navi-Felder 2.Ebene - ORIG #AABDE6 */
}
.sf-menu li li li {
background: #024488; /* Hintergrundfarbe der Navi-Felder 3 + 4 Ebene - ORIG #9AAEDB */
}

.sf-menu li:first-child, .sf-menu li.first-child {
}

.sf-menu li:last-child, .sf-menu li.last-child {
}

.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #024488; /* Hintergrundfarbe der Navi-Felder beim überfahren mit der Maus - ORIG #CFDEFF */
outline: 0;
}

.sf-menu li .separator {
font-weight:bold; /* Texteigenschaften der Navi-Felder - nur SEPERATOR - ORIG NICHT VORHANDEN */
color: #ffffff; /* Textfarbe der Navi-Felder - nur SEPERATOR - ORIG NICHT VORHANDEN */
display: block;
border-left: 1px solid #none; /* Farbe u. Stärke des linken Rahmens der Navi-Felder - nur SEPERATOR - ORIG 1px solid #fff */
border-top: 1px solid #none; /* Farbe u. Stärke des oberen Rahmens der Navi-Felder - nur SEPERATOR - ORIG 1px solid #CFDEFF */
padding: .75em 1em; /* Abstand des Textes vom Rahmens der Navi-Felder - .75em 1em */
text-decoration:none; /* Funktion und Aussehen der Texte der Navi-Felder - ORIG none */
}

/*** arrows **/
.sf-menu a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position: absolute;
display: block;
right: .75em;
top: 1.05em; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: .8em;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
background: url('../images/shadow.png') no-repeat bottom right;
padding: 0 8px 9px 0;
-moz-border-radius-bottomleft: 17px;
-moz-border-radius-topright: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
background: #024488; /* - ORIG transparent */
}

.sf-menu .active {
background: #024488; /* - ORIG #ccc */
}

.sf-menu #current {
background: #024488; /* - ORIG #aaa */
}

.superfish_clear {
clear: both !important;
height: 1px !important;
overflow: hidden !important;
font-size: 1px !important;
margin: 0 !important;
padding: 0 !important;
}


------------------------------

Gruß Steve

Also zur Menü-Breite:

Stelle in den Modul-Einstellungen deines Superfish-Moduls in den Parametern unter: CUSTOM MENU WIDTH (BETA), den Radio-Button "Enable" auf Yes. Und dann Width auf 100%.

Nun sollte das Menü über die volle Breite der Seite auftauchen.

Danke Gnaarz, der Tipp war sehr hilfreich.
Das habe ich echt übersehen.

Jetzt ist es so, wie ich es mir vorgestellt habe.