DIV zentrieren? (Superfish)

[nordi]

Hallo Leute,

ich raste hier gleich aus Bin schon den ganzen Tag dabei eine Navigationsleiste zu zentrieren und hab mittlerweile schon so viel im Code "rumgefuscht", dass mittlerweile irgendwie nichts mehr wirkt?! Ich benutze das JQUERY/CSS Menü Superfish. Eigentlich ein ganz schönes Dropdown-Menu, finde ich. Dies habe ich in meine Seite eingebaut und an das Layout angepasst. Das Menu soll zentriert in eine Tabelle eingepasst werden, doch leider "klebt" es am linken Tabellenrand und ich weiß nicht wieso. Habe schon gegooglet, wie man DIVs zentrieren kann und hab alles mögliche ausprobiert, aber leider zu keinem Ergebnis gekommen. Wäre super, wenn ihr da mal drübergucken könntet:

Also hier der Link, wie es momentan ausschaut: Link

Hie der HTML-Code:

 <td class="navi"><div class="navigationsleiste">
		<ul class="sf-menu">
				<li ><a href="#">NEWS</a></li>
				<li ><a href="#">EEA</a>
                <ul>
						<li><a href="#">Team</a></li>
						<li><a href="#">Geschichte</a></li>
                        <li><a href="#">Ziele</a></li>
				  </ul></li>
				<li ><a href="#">LEISTUNGEN</a></li>
				<li ><a href="#">TÄTIGKEITSFELDER</a>
                <ul>
						<li><a href="#">eLearning</a></li>
						<li><a href="#">Beratung</a></li>
				  </ul>
                </li>
				<li ><a href="#">REFERENZEN</a>
					<ul>
						<li><a href="#">Beratung</a></li>
						<li><a href="#">Allgemein</a></li>
					</ul>
				</li>
				<li ><a href="#">KONTAKT</a></li>
				<li ><a href="#">IMPRESSUM</a></li>
			</ul></div></td>

CSS-Code (Ziemlich falsche, denk ich)

div.navigationsleiste {
 position: absolute;
 left: 50%;
 margin-left: -400px;
 width: 800px;;
 margin:auto;
}

Es kann auch sein, dass man das Menu in der superfish.css irgendwie anpassen kann. Falls dafür der Quellcode gewünscht ist, füge ich ihn gerne noch ein. Vielen Dank für die Hilfe!

 

[Maik]

Hi,

nach der width-Regel hast du ein Semikolon zuviel stehen.

• Centering Float Left Menus

mfg Maik

 

[nordi]

Hi, danke erstmal für die schnelle Antwort. Habe das zweite Semikolon entfernt und schwupps springt der Kram nacht rechts rüber !? Habe dann deinen Link angeguckt und dann mein CSS ein wenig angepasst. Weiß aber um ehrlich zu sein, nicht wirklich, was ich davon üernehmen soll. Habe jetzt meinen DIV "navigationsleiste" so geschrieben:

div.navigationsleiste {
 width:800px;
 padding:0; 
 margin:0 auto;
}

Aber tut sich nicht viel.

 

[Maik]

margin:auto nützt dir hier herzlich wenig, wenn das DIV so breit wie die umschliessende Tabelle ist ;-)

Der "Knackpunkt" sind die enthaltenden float-Regeln im Menü-Stylesheet.

Und da die Gesamtbreite deines Menüs nicht bekannt ist, um hier margin:auto nutzen zu können, kommt für dich der CSS-Code des zweiten Beispiels "a centered floated left menu (unknown width)" in Frage, den du dem Seitenquelltext unter #menu2 entnehmen kannst.

mfg Maik

 

[nordi]

Hey, ja hab das auch nach dem Post bemerkt, sorry! Also da Ding ist jetzt zentriert, aber nun klappen die Untermenus nicht mehr runter?! Zum verzweifeln, dieses ****-Menu :

Habe diese Werte in der superfish.css verändert:

.sf-menu {
	padding:0;
	margin:0 auto;
	position:relative;
	left:50%;
	float:left;
	text-align: left;
}
.sf-menu a {
	width:auto;
	display:block;
	border-left:	1px solid #fff;
	border-top:		1px solid #fff;
	padding: 		.75em .75em;
	text-decoration:none;
	color: #c1481d;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#333;
}
.sf-menu li {
 background:#FFF;
 float:left;
 position:relative;
 right:50%;
}

 

[Maik]

Dann wird's hier wohl nix bei unbekannter Menübreite mit dem horizontalen Zentrieren.

mfg Maik

 

[nordi]

also ist das eine Sache Unmöglichkeit das Ding da oben zu zentrieren, oder wie soll ich das verstehen?

 

[Maik]

Dass die Zentrierung grundsätzlich funktioniert, hast du doch selbst gesehen und hier vermeldet

Nur ist diese erforderliche Technik für ein floatendes Menü mit unbekannter Breite wohl nicht mit einem Dropdown-Menü kompatibel.

mfg Maik

 

[nordi]

Also ich hab noch etwas rumgespielt und das Menü fährt jetzt doch runter. Aber nicht genau unter den Obermenüpunkten? Das sollte man doch mit CSS beheben können, da die Positionierung darüber läuft, oder? Welche Werte stimmen denn da nicht, kannst du das auf Anhieb sehen?

 

[Maik]

Das ist in Stu Nicholls' Original-Beispiel auch der Fall, wenn ich es zu einem Dropdown-Menü ausbaue.

Ich schätze, da wirst du dich von der horizontalen Zentrierung verabschieden müssen, solange das Menü keine feste Breite besitzt, denn mit dem ersten Lösungsansatz für ein floatendes Menü mit bekannter Breite "a centered floated left menu (known width)" gibt's keine derartigen Verschiebungen.

mfg Maik