✔ CSS - Menü Problem mit relativen angaben

A

ascawath

Mitglied
Hallo lieber Expertin, Experte,

Ich habe versucht ein Menü mit css zu erstellen ( listen)
Das klappt auch soweit so gut, nur wenn ich das ganze jetzt mit relativen angaben versehen möchte, verschiebt sich das ganze und man kann nichts mehr erkennen:
hier ein link: http://newrockstation.dyndns.org/kstorchester/ul_test.php

css datei:
Code: 
#navMenu {
	margin: 0;
	padding:0;
}
#navMenu ul {
	margin:0;
	padding:0;
	line-height:18px;
}

#navMenu li {
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	position:relative;
	background-image: url(./bilder/Mn.png);
}

#navMenu ul li a {
	text-align:center;
	font-family: Comic Sans MS;
	text-decoration: none;
	height: 18px;
	max-width:189.91px;
	width: 19.7%;
	display: block;
	color: white;
	border: 1px solid white;
	text-shadow: 3px 3px 3px black;
}

#navMenu ul ul {
	position: absolute;
	visibility: hidden;
	top: 20.9px;
}

#navMenu ul li:hover ul {
	visibility:visible;
}

#navMenu li:hover {
	background-image: url(./bilder/Mh.png);
}

#navMenu ul li:hover ul li a:hover {
	background-image: url(./bilder/Mh.png);
	color: black;
}

#navMenu a:hover {
	color:black;
}

Und Quellcode von Ul_test.php
Code: 
<html>
<head>
<title>Ul-Test</title>
<link rel="stylesheet" href="menu-kopie.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="navMenuu">
<ul><!-- Anfang Menu -->
<li id="start">Start
</li>
</ul>
</div>
<div id="navMenu">
<ul>
<li><a href="#"> Test</a>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</li>
<li><a href="#"> Test</a>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</li>
<li><a href="#">Test</a>
</li>
<li><a href="#">Test</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Danke für deine/ eure Hilfe
 
Ist mit relativer Angabe die width:19.7%-Regel gemeint?

Wenn ja, deklariere sie und max-width:189.91px nicht für <a>, sondern für das <li>-Element.
 
Ja das meinte ich mit der relativen Angabe. Der Link geht erst ab heute Nachmittag, so gegen 16:00 ( läuft über Xampp. Ok werde ich ändern, ich melde mich dann nochmal.

Danke für deine schnelle Antwort.

LG Ascawath
 
Hallo,

Pixel sind diskrete Werte, hier z.B. Bildpunkte. Es gibt kein Gerät, das 189.91px darstellen kann und deshalb ist die Angabe von Pixelwerten auch nur als ganzzahlige Größe sinnvoll.
 
Danke, der Link funktioniert jetzt, habe das jetzt auch die width und max-width bei li eingetrangen, sieht aber bei den untermenüs komisch aus. menu.css
Code: 
#navMenu {
	margin: 0;
	padding:0;
}
#navMenu ul {
	margin:0;
	padding:0;
	line-height:18px;
}

#navMenu li{
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	position:relative;
	background-image: url(./bilder/Mn.png);
	max-width:189.91px;
	width: 19.7%;
}	
	
#navMenu ul li a {
	text-align:center;
	font-family: Comic Sans MS;
	text-decoration: none;
	height: 18px;
	display: block;
	color: white;
	border: 1px solid white;
	text-shadow: 3px 3px 3px black;
}

#navMenu ul ul {
	position: absolute;
	visibility: hidden;
	top: 20.9px;
}

#navMenu ul li:hover ul {
	visibility:visible;
}

#navMenu li:hover {
	background-image: url(./bilder/Mh.png);
}

#navMenu ul li:hover ul li a:hover {
	background-image: url(./bilder/Mh.png);
	color: black;
}

#navMenu a:hover {
	color:black;
}
 
Zuletzt bearbeitet:
ascawath hat gesagt.:
habe das jetzt auch die width und max-width bei li eingetrangen, sieht aber bei den untermenüs komisch aus.
Zum Vergrößern anklicken....

Und was hindert dich, für das <li> der Untermenüs eine gesonderte Breitenregelung aufzustellen?!

CSS: 
#navMenu li /* <li> der oberen Menüebene */
{
    ...
}
#navMenu ul ul li /* <li> der unteren Menüebene */
{
    ...
}
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück