# DIV zentrieren? (Superfish)



## nordi (18. Februar 2010)

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 (18. Februar 2010)

Hi,

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


Centering Float Left Menus

mfg Maik


----------



## nordi (18. Februar 2010)

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 (18. Februar 2010)

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 (18. Februar 2010)

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 (18. Februar 2010)

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

mfg Maik


----------



## nordi (18. Februar 2010)

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


----------



## Maik (18. Februar 2010)

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 (18. Februar 2010)

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 (18. Februar 2010)

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


----------



## nordi (19. Februar 2010)

wie kann ich denn dem Menü eine feste Breite geben? Wenn das geht, dann sollte der Rest ja kein Problem mehr sein, oder?


----------



## Jantz (19. Februar 2010)

Kannste nicht anstatt mit float einfach mit display:inline; arbeiten?


----------



## Maik (19. Februar 2010)

nordi hat gesagt.:


> wie kann ich denn dem Menü eine feste Breite geben? Wenn das geht, dann sollte der Rest ja kein Problem mehr sein, oder?


Indem du den 7 Menüpunkten eine entsprechende Breite zuweist.

Beispielsweise so:

```
<td class="navi"><div class="navigationsleiste">
                <ul class="sf-menu">
                    <li><a href="#" id="news">NEWS</a></li>
                    <li><a href="#" id="eea">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="#" id="leistungen">LEISTUNGEN</a></li>
                    <li><a href="#" id="taetigkeit">TÃ„TIGKEITSFELDER</a>
                        <ul>
                            <li><a href="#">eLearning</a></li>
                            <li><a href="#">Beratung</a></li>
                        </ul>
                    </li>
                    <li><a href="#" id="referenzen">REFERENZEN</a>
                        <ul>
                            <li><a href="#">Beratung</a></li>
                            <li><a href="#">Allgemein</a></li>
                        </ul>
                    </li>
                    <li><a href="#" id="kontakt">KONTAKT</a></li>
                    <li><a href="#" id="impressum">IMPRESSUM</a></li>
                </ul>
        </div>
    </td>
```


```
.sf-menu {
        padding:0;
        width:747px;
        margin:0 auto;
        position:relative;
        text-align: left;
}
.sf-menu a {
        display:block;
        border-left:        1px solid #fff;
        border-top:                1px solid #fff;
        padding:                 .75em 0;
        text-decoration:none;
        color: #c1481d;
        text-align:center;
}
.sf-menu #news { width:70px; }
.sf-menu #eea { width:60px; }
.sf-menu #leistungen { width:120px; }
.sf-menu #taetigkeit { width:170px; }
.sf-menu #referenzen { width:120px; }
.sf-menu #kontakt { width:90px; }
.sf-menu #impressum { width:110px; }

...

.sf-menu li {
 background:#FFF;
 float:left;
}
```

mfg Maik


----------

