✔ Dropline-Menu; Dropline über das komplette Design

[waswiewo]

Hi,

ich probiere schon seit einiger Zeit an meinem Dropline (?) -Menu herum...

Ich würde es gerne centriert haben.

Zur Zeit sieht es bei mir so aus: klick

Und so wie hier auf dem Bild möchte ich es gerne haben: klick

Wenn ich "left: -irgendeinezahl;" angebe übernimmt er das bei den anderen ja auch. Gibt es ein Befehl, der es bei allen 3 Buttons gleich darstellt?

Mfg waswiewo

 

[Maik]

Hi,

da die Breite der Menüpunkte bekannt ist, ergibt sich für das <ul>-Element eine Gesamtbreite, die in der width-Eigenschaft definiert wird, und schon lässt es sich in seinem Anzeigebereich mittels margin:0 auto horizontal zentrieren.

Sollte mal die Breite nicht bekannt sein, hat Stu Nicholls für diesen Fall eine Lösung entwickelt: Centering Float Left Menus -> "a centered floated left menu (unknown width)".

Im Seitenquelltext des Beispiels bezieht sich dieses CSS auf das zweite Menü mit der ID menu2, das keine feste (bekannte) Breite besitzt.

mfg Maik

 

[waswiewo]

Hi,

also die Gesamtbreite des <ul>'s ist 954Pixel groß. Jedes der drei <li'> demnach 318 Pixel.

Das <ul>-Element hat bereits die Breite 954px bekommen. Bei dem <li> hab ich jetzt margin: 0px; eingegeben, aber es ändert ishc nichts =)

Hier mal der Css-Code zu dem Teil:

#dropline, #dropline ul {
	margin: 0px;
	list-style-type: none;
	padding: 0px;
	z-index: 1;
	width: 954px;
	text-align: center;
}

#dropline li {
	width: 318px;
	float: left;
	position: relative;
}

#dropline li ul {
	display: none;
}

#dropline li:hover ul {
	margin: 0px;
	display: block;
	position: absolute;
	top: 61px;
	float: left;
	background: #fff;
	border: 1px solid #000;
	width: 911px;
	height: 175px;
	z-index: 1;
	padding: 32px 0 0 43px;
	color: #000;
	font-size: 14px;
	font-weight: normal;
	text-transform: none;
}

mfg

 

[Maik]

Wenn du das Dropline-Menü genauso breit definierst, wie sein Elternelement #subnavi, kann seine horizontale Zentrierung in dessen Anzeigebereich auch nicht funktionieren. Hierfür muß das Menü schon schmäler sein, damit die margin:0 auto-Regel überhaupt zum Zuge kommen kann.

Ich hab's hier mal fix in Firebug nachgestellt:

#dropline {
width:798px;
}

#dropline li {
float:left;
margin:0 15px;
position:relative;
width:236px;
}

mfg Maik

 

[waswiewo]

Hi,
soweit habe ich das verstanden =)

Aber um das Centrieren des Menus ging es mir garnicht =)

Ich will lediglich, dass das #dropline li:hover ul in der Mitte ist. Bis jetzt orientiert es sich immer an dem einzelnen li. Ich weiß, dass ich die Angabe z.B. "left: -200px;" machen kann, aber bei den ersten li muss es ja nicht so weit zurück, wei bei dem dritten. Oder muss ich für jedes einzelne li eine Klasse vergeben und für jedes seperat die Angaben machen?

Vielen Dank bis dahin schonmal

mfg

EDIT: hab jetzt für jedes ul eine Klasse bestimmt und dann die Negativ-Werte einzeln angegeben, nun geht es so wie ich es haben will danke!

 

[Maik]

Aber um das Centrieren des Menus ging es mir garnicht =)

Ich will lediglich, dass das #dropline li:hover ul in der Mitte ist. Bis jetzt orientiert es sich immer an dem einzelnen li.

Sorry, das ging aus deinem ersten Post nicht so deutlich hervor.

Weil du die <li>-Elemente mit position:relative formatiert hast, verhalten sich die absoluten Positionsangaben ihrer Nachfolgeelemente (Untermenüs) relativ, und beziehen sich so auf dieses Mutterelement.

Folglich wird an ihrer Stelle das Großmutterelement <ul> der ersten / obersten Menüebene relativ positioniert, und so ist im CSS auch nur ein Deklarationsblock für die Untermenüs vonnöten:

#dropline { position:relative; }

#dropline li {
        float: left;
        margin: 0px;
        padding: 0px 18px 0px 18px;
        /*position: relative;*/ /* auskommentiert */
        width: 236px;
}

#dropline li:hover ul { /* ohne Klassennamen */
        margin: 0px;
        display: block;
        position: absolute;
        top: 61px;
        left: 0; /* Startposition von links */
        background: #fff;
        border: 1px solid #000;
        width: 911px;
        height: 45px;
        z-index: 1;
        padding: 32px 0 0 43px;
}

mfg Maik