inline-block problem

[malwasanderes]

Hallo :)
Ich arbeite zurzeit an einer ausklappbaren Navigationsleiste die ausschlieslich aus html und css (von js, php etc. habe ich leider recht wenig ahnung) Bis jetzt klappt das auch ganz gut, aber jetzt tritt leider ein problem auf:
In der ausklappbaren navigation werden die einzelnen links als inline-block (display:inline-block;) dargestellt. Dadurch entsteht über und unter dem link leider eine sehr große lücke.
Für alle die die erklärung nicht verstanden haben ist auch noch ein bild dabei.
Es wäre sehr nett wenn mir jemand helfen könnte!

LG malwasanderes

 

[malwasanderes]

Hier noch ein auszug aus dem Quelltext:

ul.dropdown {
width: 100px;
list-style: none;
padding: 0px 0px 0px 0px;
margin: 0px;
}

li ul.dropdown {
position: absolute;
top: 26px;
left: 0px;
display: none;
text-align: left;
list-style: none;
z-index: 151;
}
LI:hover UL.dropdown, LI.over UL.dropdown {
display:inline-block;
}
ul.dropdown {
background:url(dropdownbg.png);
list-style: none;
display:inline-block;
}
ul.dropdown a:link {
background:url(dropdownbg.png);
list-style: none;
color:#ffffff;
font-size:14px;
text-decoration:none;
font-family:tahoma;
display:inline-block;
width:100px;
text-align:left;
}
ul.dropdown a:visited {
background:url(dropdownbg.png);
list-style: none;
color:#ffffff;
font-size:14px;
text-decoration:none;
font-family:tahoma;
display:inline-block;
width:100px;
text-align:left;
margin:0px;
padding:0px;
border:0px;
}
ul.dropdown a:hover {
background:url(dropdownbg.png);
list-style: none;
color:#ffffff;
font-size:14px;
text-decoration:none;
font-family:tahoma;
display:inline-block;
width:100px;
text-align:center;
}
ul.dropdown a:active {
background:url(dropdownbg.png);
list-style: none;
color:#ffffff;
font-size:14px;
text-decoration:none;
font-family:tahoma;
display:inline-block;
width:100px;
text-align:right;
}









<div id="navi">

<li id="lia"><a href="index.html" id="navii">home</a>
<ul class="dropdown">
<p id="dropdownlink"><li><a href="">&raquo; link1</a></li></p>
<p id="dropdownlink"><li><a href="">&raquo; link2</a></li></p>
<p id="dropdownlink"><li><a href="">&raquo; link3</a></li></p>
</ul>
</li>

<li id="lib"><a href="index.html" id="navii">home</a>
<ul class="dropdown">
<p id="dropdownlink"><li><a href="">&raquo; link1</a></li></p>
<p id="dropdownlink"><li><a href="">&raquo; link2</a></li></p>
<p id="dropdownlink"><li><a href="">&raquo; link3</a></li></p>
</ul>
</li>

<li id="lic"><a href="index.html" id="navii">home</a>
<ul class="dropdown">
<p id="dropdownlink"><li><a href="">&raquo; link1</a></li></p>
<p id="dropdownlink"><li><a href="">&raquo; link2</a></li></p>
<p id="dropdownlink"><li><a href="">&raquo; link3</a></li></p>
</ul>
</li>

<li id="lid"><a href="index.html" id="navii">home</a>
<ul class="dropdown">
<p id="dropdownlink"><li><a href="">&raquo; link1</a></li></p>
<p id="dropdownlink"><li><a href="">&raquo; link2</a></li></p>
<p id="dropdownlink"><li><a href="">&raquo; link3</a></li></p>
</ul>
</li>

<li id="lie"><a href="index.html" id="navii">home</a>
<ul class="dropdown">
<p id="dropdownlink"><li><a href="">&raquo; link1</a></li></p>
<p id="dropdownlink"><li><a href="">&raquo; link2</a></li></p>
<p id="dropdownlink"><li><a href="">&raquo; link3</a></li></p>
</ul>
</li>

</div>


die überflüssigen class bzw. ids einfach ignorieren

 

[Loon3y]

Hallo ersteinmal.

Ein id-selektor ist einmalig im Dokument. D.h. du kannst ihn nur einmal verwenden. Ebenso ist es nicht "erlaubt" innerhalb einer ungeordnete Liste (<ul>) um die Listenpunkte (<li>) einen Paragraph (<p>) zu setzen.

Ich vermute das der Abstand von margin oder padding kommen kann. Hast du einen "CSS-Reset" gemacht um diese Werte zurückzusetzen? Hat dein Dokument einen standardkonformen Modus (gültiger Doctype) ?

Ich ver
mute stark das es an den <p> in Zusammenhang mit nen margin liegt.

Gruß
Loon3y

 

[struppi]

Ergänzend dazu, möchtest du vielleicht deinen HTML Code korrigieren, die Fehler findest du hiermit: The W3C Markup Validation Service

 

[malwasanderes]

Hm...erstmal hallo. Tut mir leid das ich nicht schneller geantwortet habe, aber ich war im Urlaub.
Danke für die Antworten. Wenn es nicht mit dem inline-block zu tun hat, sondern mit dem p tag, wie genau kann ich das beheben?

@Loon3y:
Hat dein Dokument einen standardkonformen Modus (gültiger Doctype) ?
---
Ja, der ist bei meinem Editor von Anfang an da. :)

Hast du einen "CSS-Reset" gemacht um diese Werte zurückzusetzen?
---
Nein, hatte ich noch nicht, aber das hilft leider auch nicht.

@struppi:
Okay das werde ich mal probieren.