✔ menu dropdown

[marco_ru]

hallo habe ein menu in meine homepage eingebaut doch wenn ich eine andere auflösung drauf mache wird es größer/kleiner dann habe ich es probiert mit width:20%; doch dann wird es ganz schmal woran liegt das? hier der code:

#nav{
	display:block;
	width:100%;
	position: absolute;
	list-style:none;
	margin:0 0 0 0;
	z-index:5;
	text-align: center;
	display:block;
}

#nav a{
	margin:0;
	float:left;	
}

#nav a, #subMenusContainer a{
	text-decoration:none;
	width:20%;
	display:block;
	background-color:#636363;
	color:#FFF;
	font-size:14px;
	line-height:40px;
}

#subMenusContainer a, #nav li li a{
	text-align:left;
}

#nav a:hover, #nav a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
	background-color:#393939;
	color:#FFF;
}

#subMenusContainer a:hover, 
#subMenusContainer a:focus, 
#nav a.mainMenuParentBtnFocused, 
#subMenusContainer a.subMenuParentBtnFocused,
#nav li a:hover,
#nav li a:focus{
	background-color:#393939;
	color:#FFF;
}

.smOW{ 
	display:none; 
	position: absolute; 
	overflow:hidden; 
	padding:0 2px;
	margin:0 0 0 -2px;
}

#nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol { 
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 40px;
}

#nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {
	background:#fff;	
	left:0;
}

#nav li { 
	display:block;
	list-style:none;
	position:relative;
	float:left;
}

#subMenusContainer li{
	list-style: none;
}

#subMenusContainer{	display:block; 	position:absolute;	top:0;	left:0;	width:100%;	height:0;	overflow:visible;	z-index:1000000000; }
#nav li li{	float:none; }
#nav li li a{position:relative; float:none;}
#nav li ul {position: absolute; width: 10em; margin-left: -1000em; margin-top:2.2em;}
#nav li ul ul { margin: -1em 0 0 -1000em; }
#nav li:hover ul ul {	margin-left: -1000em; }
#nav li:hover ul{	margin-left: 0; }
#nav li li:hover ul {	margin-left: 10em; margin-top:-2.5em;}
#nav li a:focus + ul {  margin-left: 0; margin-top:2.2em; }
#nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
#nav li li a:focus {left:0;  margin-left:1000em; width:10em;  margin-top:0;}
#nav li li li a:focus {left:0; margin-left: 2010em; width: 10em;  margin-top:-1em;}
#nav li:hover a:focus{ margin-left: 0; }
#nav li li:hover a:focus + ul { margin-left: 10em; }

 

[SpiceLab]

wenn ich eine andere auflösung drauf mache wird es größer/kleiner dann habe ich es probiert mit width:20%; doch dann wird es ganz schmal woran liegt das? hier der code:

...

1. [code=css] ... [/code] ist hier passender anstatt [code=php] ... [/code].
2. Sprichst du mit Auflösung tatsächlich von der Bildschirmauflösung, oder doch eher von der (skalierten) Browserfenstergröße?
3. Hast du ein Online-Beispiel gegen diesen Blindflug zur Hand?

 

[Momo95]

Wenn du einem Element die Breite "100%" gibst, ist es genau so breit wie das Element herum. In deinem Fall warscheinlich "body". Und dieser ist normalerweise so groß wie das Browserfenster (Viewport). Wenn dieses also größer wird, wird auch deine Navigation breiter.

Wenn du der Navigation die Breite "20%" gibst, ist sie auch nur 20% des herumliegenden Elemnt breit.

Wenn du also willst, dass die Navigation immer gleich breit ist, gib ihr eine absolute Breit. Z.B. "900px".

 

[marco_ru]

danke für dei antwort aber wenn ich es mit px mache klappt das nicht mit der Bildschirmauflösung also dann ist ein link drunter

 

[Markus Kolletzky]

Hallo marco_ru,

ich möchte dich bitten, in Zukunft die hier gängige Netiquette – vor allem den Punkt 15 – zu beachten; eine sinnvolle Zeichensetzung lässt dein Posting mit Sicherheit besser lesen und ist einer hilfreichen Antwort sicher dienlicher. Ganz nach dem Motto: Gibst du dir keine Mühe, geb ich mir auch keine.

In diesem Sinne,
Markus

 

[marco_ru]

Danke das du mich aufmerksam gemacht hast!
werde ich bei einem weiterem Eintrag beachten.

 

[SpiceLab]

danke für dei antwort aber wenn ich es mit px mache klappt das nicht mit der Bildschirmauflösung also dann ist ein link drunter

Dann ist hier die Menübreite gegenüber der Anzahl von Menüpunkten zu klein gewählt, was zum Umbruch der umfliessenden <li>-Tags führt.

Übrigens vielen Dank für das ignorieren meiner beiden eingangs nicht unerheblich gestellten Rückfragen - auf diesem Wege darfst du hier in der Community keine produktiven Hilfestellungen erwarten