Hallo Leute,
Hab mir mal ein CSS Dropdown gebastelt... Nun habe ich aber folgendes Problem: Aus mir unerklärlichen Gründen habe ich unterhalb meiner Navi Grafiken einen überflüssigen Abstand (zur verbesserten Ansicht habe ich diesen grün eingefärbt). Ich weiss auch welcher Teil des Codes dafür verantwortlich ist, verstehe allerdings NICHT wieso der Abstand passiert, denn mein Padding, Margin etc ist ja auf 0px gesetzt. Das einzige was ich mir noch vorstellen könnte ist dass es mit dem...
#menu ul{width:auto;float:left;margin:0px;padding:0px;ba ckground:#12ff00;list-style:none;}
.clear{
clear:both;height:10px;}
...zu tun haben könnte, allerdings verändert sich rein gar nichts wenn ich die 10px verändere, egal ob ich sie kleiner, grösser mache, oder gar lösche, der Abstand bleibt...
Hier der Screenshot:
Und hier der gesammte Code (ignoriert die Parameter, ich war faul und hab das File auf dem Desktop liegen lassen :P):
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>CSS Dropdown Test</title>
<style type="text/css">
body{font-family:arial;}
#container{width:500px;margin:0 px;font-size:10pt;background:transparent;}
#menu{position:absolute;margin-top:0px;}
#menu ul .item{display:none;}
#menu ul:hover .item{display:block;background:#000000;padding:0px;margin:0px;}
#menu ul:hover .item a{color:#999999;font-size:8pt;text-decoration:none;}
#menu ul:hover .item a:hover{color:#ffffff;}
#menu ul{width:auto;float:left;margin:0px;padding:0px;background:#12ff00;list-style:none;}
.clear{clear:both;height:10px;}
</style>
</head>
<body>
<div id="menu">
<ul id="item1">
<li class="top"><img src="Eigene Arbeiten/Bassride_Web/Web/images/layout_02.png" alt="home" /></li>
<center>
<li class="item"><a href="#">Testmenü 1</a></li>
<li class="item"><a href="#">Testmenü 2</a></li>
<li class="item"><a href="#">Testmenü 3</a></li>
</center>
</ul>
<ul id="item2">
<li class="top"><img src="Eigene Arbeiten/Bassride_Web/Web/images/layout_03.png" alt="home" /></li>
<center>
<li class="item"><a href="#">Testmenü 1</a></li>
<li class="item"><a href="#">Testmenü 2</a></li>
<li class="item"><a href="#">Testmenü 3</a></li>
</center>
</ul>
<ul id="item3">
<li class="top"><img src="Eigene Arbeiten/Bassride_Web/Web/images/layout_04.png" alt="home" /></li>
<center>
<li class="item"><a href="#">Testmenü 1</a></li>
<li class="item"><a href="#">Testmenü 2</a></li>
<li class="item"><a href="#">Testmenü 3</a></li>
</center>
</ul>
<ul id="item4">
<li class="top"><img src="Eigene Arbeiten/Bassride_Web/Web/images/layout_05.png" alt="home" /></li>
<center>
<li class="item"><a href="#">Testmenü 1</a></li>
<li class="item"><a href="#">Testmenü 2</a></li>
<li class="item"><a href="#">Testmenü 3</a></li>
</center>
</ul>
</div>
<p> </p>
<p>blablablablablabla usw usw usw</p>
<p>blablalbasdiuashdaisuhd</p>
</body>
</html>
Wäre echt froh wenn mich jemand aufklären könnte warum dies passiert... Und wenn möglich hätte ich noch eine Frage.
Die Navi sollte zuoberst auf einer "div"-gesättigten Seite angebracht werden ("div"-gesättigt weil direkt aus Photoshop exportiert). Wird es mir die unteren divs, bzw mein Layout, nach unten verschieben wenn das dropdown sich nun expandiert oder wird das einfach darüber gelegt wie bei normalem Text auch?
Ich danke euch schon mal im Vorraus für die hilfreichen Antworten,
Freundliche Grüsse Philippe