Dag CP'ers,
ik ben bezig aan mijn eigen spel en ben op een probleem gestoten met mijn layout.
Ik heb een horizontaal menu maar zodra ik de laatse <li> tag verwijder, die overbodig is, verdwijnt de foto van de navigatie bar :s
Ik heb de layout niet zelf gemaakt, en die <li> tag was een voorbeeld.
Hier is een stukje van de code:
PHP
<!-- navigation -->
<div class="navigation">
<div id="menu">
<ul>
<div id="Algemeen" style="float:left;">
<li><a href="#">Algemeen</a></li>
<div class="panel" height="150" id="1">
<div class="s-m-t"></div><div class="s-m-c" style="height:40px;">
<ul>
<li><a href="index.php">Index</a></li>
<li><a href="index.php">Index</a></li>
<div class="s-m-f">
<li><a href="index.php">Index</a></li></div>
</ul></div>
</div></div>
<div id="Misdaden" style="float:left;">
<li><a href="#">Misdaden</a></li>
<div class="panel" height="150" id="2">
<div class="s-m-t"></div><div class="s-m-c" style="height:40px;">
<ul>
<li><a href="index.php">Index</a></li>
<li><a href="index.php">Index</a></li>
<div class="s-m-f">
<li><a href="index.php">Index</a></li></div>
</ul></div>
</div></div>
<div id="Stad" style="float:left;">
<li><a href="#">De Stad</a></li>
<div class="panel" height="150" id="3">
<div class="s-m-t"></div><div class="s-m-c" style="height:40px;">
<ul>
<li><a href="index.php">Index</a></li>
<li><a href="index.php">Index</a></li>
<div class="s-m-f">
<li><a href="index.php">Index</a></li></div>
</ul></div>
</div></div>
<div id="Eigen" style="float:left;">
<li><a href="#" style="margin-top:10px; line-height:95%;">Mijn Eigendommen</a></li>
<div class="panel" height="150" id="4">
<div class="s-m-t"></div><div class="s-m-c" style="height:40px;">
<ul>
<li><a href="index.php">Index</a></li>
<li><a href="index.php">Index</a></li>
<div class="s-m-f">
<li><a href="index.php">Index</a></li></div>
</ul></div>
</div></div>
<div id="Fam" style="float:left;">
<li><a href="#">Familie</a></li>
<div class="panel" height="150" id="5">
<div class="s-m-t"></div><div class="s-m-c" style="height:40px;">
<ul>
<li><a href="index.php">Index</a></li>
<li><a href="index.php">Index</a></li>
<div class="s-m-f">
<li><a href="index.php">Index</a></li></div>
</ul></div>
</div></div>
<div id="Comm" style="float:left;">
<li><a href="#">Communicatie</a></li>
<div class="panel" height="150" id="7">
<div class="s-m-t"></div><div class="s-m-c" style="height:40px;">
<ul>
<li><a href="index.php">Index</a></li>
<li><a href="index.php">Index</a></li>
<div class="s-m-f">
<li><a href="index.php">Index</a></li></div>
</ul></div>
</div></div>
<div id="Extra" style="float:left;">
<li><a href="#">Extra</a></li>
<div class="panel" height="150" id="6">
<div class="s-m-t"></div><div class="s-m-c" style="height:40px;">
<ul>
<li><a href="index.php">Index</a></li>
<li><a href="index.php">Index</a></li>
<div class="s-m-f">
<li><a href="index.php">Index</a></li></div>
</ul></div>
</div></div>
<li><a href="index.php"></a></li>
</ul>
</div>
<!-- end navigation -->
En hier de css:
PHP
/* navigation */
.navigation {
background-image: url(../images/nav.png);
background-repeat: no-repeat;
width:1000px;
height:51px;
margin:auto;
font-family:Trebuchet MS;
}
.navigation ul {
margin:0;
padding:0;
list-style:none;
text-align:center;
}
.navigation ul li {
margin:0;
padding:0;
display:inline-block;
margin-bottom:-16px;
}
.navigation ul li a {
display:block;
height:41px;
width:83px;
float:center;
font-size:12px;
line-height:20px;
color:#7d7474;
margin:13px 25px;
}
.navigation ul li a:hover {
color:#ffffff;
}
.navibar ul li a.active {
color:#ffffff;
}Hier zijn foto's:
-met de <li> -tag
http://www.imgdumper.nl/upload…a7ba1be-Menu_error_ml.jpg
-zonder de tag http://www.imgdumper.nl/upload…f564f6b-Menu_error_zl.jpg
Kan iemand mij helpen???
Willem
