Nieuw lid |
|
hallo,
ik ben al een poosje bezig met het optimaliseren van mijn site. nu aangekomen bij het menu. wat voorheen opgemaakt was met een tabel, wil ik nu overstappen op de list methode (<ul> <li>)
echter wil ik weer allerlei aanpassingen waardoor het niet wilt lukken.
mijn code, in het php bestand zijn als volgt;
<ul class="menu">
<li><a href="index.php?pagina=<?php echo $tBL1a; ?>"><?php echo $tBL1a; ?></a></li>
<li><a href="index.php?pagina=<?php echo $tBL1b; ?>"><?php echo $tBL1b; ?></a></li>
<li><a href="index.php?pagina=<?php echo $tBL1c; ?>"><?php echo $tBL1c; ?></a></li>
</ul>
<li><a href="index.php?pagina=<?php echo $tBL1a; ?>"> <?php echo $tBL1a; ?></a></li> <li><a href="index.php?pagina=<?php echo $tBL1b; ?>"> <?php echo $tBL1b; ?></a></li> <li><a href="index.php?pagina=<?php echo $tBL1c; ?>"> <?php echo $tBL1c; ?></a></li>
met de bijbehorende css
ul.menu{
padding: 0px;
margin: 0px;
}
.menu li{
padding-left: 18px;
margin: 0px;
width: 100%;
background-image:url(images/linkimg-off.png);
background-repeat: no-repeat;
display:block;
}
.menu li:hover{
background-color: #DDD;
display: block;
}
.menu li:hover{
background-image:url(images/linkimg-on.png);
background-repeat: no-repeat;
}
ul.menu a:link{
text-decoration:none;
color: #666;
display:block;
}
ul.menu a:hover{
text-decoration:none;
color: #000;
display:block;
}
ul.menu a:visited{
text-decoration:none;
color: #8A8A8A;
display:block;
}
ul.menu{ padding: 0px; margin: 0px; } .menu li{ padding-left: 18px; margin: 0px; width: 100%; background-image:url(images/linkimg-off.png); background-repeat: no-repeat; display:block; } .menu li:hover{ background-color: #DDD; display: block; } .menu li:hover{ background-image:url(images/linkimg-on.png); background-repeat: no-repeat; } ul.menu a:link{ text-decoration:none; color: #666; display:block; } ul.menu a:hover{ text-decoration:none; color: #000; display:block; } ul.menu a:visited{ text-decoration:none; color: #8A8A8A; display:block; }
nu wordt mijn navigatie menu, verticaal weergegeven, met een eigen afbeelding als list-img, die veranderd wanneer je met de muis over de tekst gaat.
in FF, en chrome werkt het natuurlijk perfect, maar IE laat weer eens van zich afweten, weet iemand hoe dat komt?
alvast bedankt
|