✔ Problem mit Dropdown-Menü

Danke, aber das ändert nichts am Aussehen und an den Abständen. AUch wenn ich height: auto beim li Element (:hover) setze, passiert nichts.
Wie schon oben gesagt haben nu Bilder diesen komischen Abstand im Menü, normale Texte funktionieren. Nur Leider kommen in das Menü Bilder und keine Texte.
Gibt es sonst noch eine Lösungsmöglichkeit?
 
Dass sich der zu große Abstand durch die Höhenangabe height:50px ergibt, haben wir gestern festgehalten. Also muß diese für die Submenülinks geändert werden, aber nicht in der li:hover-Pseudoklasse, sondern wie von mir gezeigt.

Dass sich dadurch bei dir nichts ändert, kann ich nicht nachvollziehen bzw. nicht glauben. Einen Unterschied zwischen Text- und Grafiklinks kann ich bei mir auch nicht nicht feststellen.

Einen anderen Lösungsweg, als eben die Höhe zu ändern, sehe ich hier nicht, damit sich die Abstände zwischen den Sublinks verringern.

mfg Maik
 
Mit der Höhenangabe von 20px (height: auto hat keinerlei Auswirkungen auf dem Abstand, obowhl die Größe der Submenüpunkte allerdings flexibel sein sollte) wird der Abstand der Submenüpunkte verringert, ein Abstand nach oben besteht allerdings noch. Die Regeln die ich gemacht habe sind
Code: 
#navigation ul li:hover ul li {
	background-image: none;
	float:none;	
	height: 20px;;
}
#navigation ul li ul li a {
    height: 20px;
    display:block;
}
Auch mit
Code: 
#navigation ul li:hover ul li a {
    height: 20px;
    display:block;
}
das Selbe. Als Beweis, dass es bei mir wirklich das problem nicht wirklich behebt hier ein Screenshot
 

Anhänge

  • screen.jpg
    screen.jpg
    17,5 KB · Aufrufe: 21
Tut mir leid, ich hab keine Ahnung, was da bei dir anders läuft, und hab alles gesagt, was es dazu zu sagen gibt.

mfg Maik
 
Funktioniert die Navigation bei dir mit den Bildern und den CSS Regeln richtig? Falls ja schicke bitte noch deine CSS Regeln, möglichweise hab ich was bei meinen falsch. Auch wenn ich alle CSS Rregeln aus der style.css entferne außer die der #naviagtion ändert sich nichts. Also kann es nicht an den anderen Regeln im .css liegen.
Code: 
#navigation {
	position: fixed;
	top: 0;
	right: 200px;
}
#navigation ul li {
	width: 143px;
	background: url('../images/navigation_back.png') no-repeat left bottom;
	float:left;
	list-style-type: none;
	margin-right: 10px;
}
#navigation ul li img {
    margin-top: 5px;
}
#navigation ul li a {
	height: 50px;
	display:block;
}
#navigation ul li ul {
	display: none;
}
#navigation li:hover ul {
	width: 142px;
	display: block;
	margin-left: 1px;
	background-color: #f8820d;
}
#navigation ul li:hover ul li {
	background-image: none;
	float:none;	
	height: 20px;;
}
#navigation ul li:hover ul li a {
    height: 20px;
    display:block;
}
 
So sieht's mit deinem aktuellen CSS-Code bei mir aus:

ddm.jpg

Deine gestern hochgeladene Grafik "nav_methods.png" besitzt hierbei das Format 46x12px.

Hast du zwischendurch auch mal deinen Browsercache geleert?

Achja, hier hast du ein Semikolon zuviel notiert, was aber nicht die Ursache für das Problem ist:
CSS: 
#navigation ul li:hover ul li {
	...
	height: 20px;;
}

mfg Maik
 
Also ich teste das Ganze im FF3 und nebenbei im IE8. Bei beiden siehts gleich aus.
Ich habe das Ganze nochmal mit leeren Dateien getestet, welche genau so aussahen
Code: 
@charset "utf-8";

* {
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	background-color: #fff;
}

#navigation {
	position: fixed;
	top: 0;
	right: 200px;
}
#navigation ul li {
	width: 143px;
	background: url('../images/navigation_back.png') no-repeat left bottom;
	float:left;
	list-style-type: none;
	margin-right: 10px;
}
#navigation ul li img {
    margin-top: 5px;
}
#navigation ul li a {
	height: 50px;
	display:block;
}
#navigation ul li ul {
	display: none;
}
#navigation li:hover ul {
	width: 142px;
	display: block;
	margin-left: 1px;
	background-color: #f8820d;
}
#navigation ul li:hover ul li {
	background-image: none;
	float:none;	
	height: 20px;
}
#navigation ul li:hover ul li a {
    height: 20px;
    display:block;
}
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Info</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navigation">
  <ul>
    <li>
      <ul>
        <li><a href=""><img src="http://www.tutorials.de/forum/images/methods.png" /></a></li>
        <li><a href=""><img src="http://www.tutorials.de/forum/images/methods.png" /></a></li>
      </ul>
      <a href="whatandhow.html"><img src="http://www.tutorials.de/forum/images/nav_whatandhow.png" /></a> </li>
    <li><a href="leadership.html"><img src="http://www.tutorials.de/forum/images/nav_leadership.png" /></a></li>
    <li><a href="clients.html"><img src="http://www.tutorials.de/forum/images/nav_clients.png" /></a></li>
  </ul>
</div>
</body>
</html>
und bei mir siehts erneut so aus, wie auf meinen Screenshot ein paar Posts vorher. Also die Subnavipunkte hängen in dem Hauptpunkt der Navigation, sind aber zusammen.
Bevor ich nun aufgebe, weil ich wirklich keine Ahung habe, warum das so ist bei mir, könntest du bitte deine html und css Datei schicken, damit ich schauen kann, ob es bei deinem vielleicht funktioniert. Möglichweise gibt es einen Fehler in der html Datei, keine Ahung.
Danke
 
Tut mir leid, auch in diesen beiden Browser-Versionen erziele ich meinen angehängten Schnappschuß.

mfg Maik
 
Ok entschuldigung für das lange hin und her, am Ende lag es doch am Bild. In dem Bilderordner befinden sich methods.png und nav_methods.png.
Nachdem ich meinen Coce von oben nocheinmal durchgeschaut habe ist mir aufgefallen, dass ich das falsche Bild genommen habe. "methods.png" ist die Selbe Schrift mit der selben Größe, allerdings mit einem Abstand nach oben, da dies an anderer Stelle benutzt wird.
Nun ja es funktioniert jetzt. Nochmals danke und entschuldigung, nächstes Mal werde ich nicht nur das .css anschauen und für den Fehler schuldig machen.

Grüße
 
Superdok hat gesagt.:
Ok entschuldigung für das lange hin und her, am Ende lag es doch am Bild. In dem Bilderordner befinden sich methods.png und nav_methods.png.
Nachdem ich meinen Coce von oben nocheinmal durchgeschaut habe ist mir aufgefallen, dass ich das falsche Bild genommen habe.
Zum Vergrößern anklicken....
Kein Problem, sowas darf dann auch schon mal passieren ;)

Die Diskrepanz zwischen deinem eingangs gezeigten HTML-Code und der hochgeladenen Grafikdatei "nav_methods.png" hatte ich hier zum lokalen Testen entsprechend ausgeglichen ;-)

Code: 
<div id="navigation">
  <ul>
    <li>
      <ul>
        <li><a href=""><img src="images/nav_methods.png" /></a></li>
        <li><a href=""><img src="images/nav_methods.png" /></a></li>
      </ul>
      <a href="whatandhow.html"><img src="images/nav_whatandhow.png" /></a> </li>
    <li><a href="leadership.html"><img src="images/nav_leadership.png" /></a></li>
    <li><a href="clients.html"><img src="images/nav_clients.png" /></a></li>
  </ul>
</div>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück