Hallo Leute,
habe vor eine Navigation zu erstellen. Das ganze will ich über eine Liste mit ol und li tags sowie links und hover effekt zu verwirklichen.
Das ganze wird dann mit CSS wie folgt formatiert:
So das klappt auch alles. Wenn ich mit der Maus über die Menüfelder gehe kommt in allen Browsern der Mouseovereffekt. Was aber nicht klappt ist das vertical-align:middle; Ich habe es auch schon mit einem padding-top des a-tags probiert. Dabei verschiebt sich aber beim hover das Feld nach unten und überblendet damit den unteren Button. Was mache ich falsch?
habe vor eine Navigation zu erstellen. Das ganze will ich über eine Liste mit ol und li tags sowie links und hover effekt zu verwirklichen.
HTML:
<div id="navi">
<ol>
<li><a href='testseite1.htm'>Testseite 1</a></li>
<li><a href='testseite2.htm'>Testseite 2</a></li>
<li><a href='testseite3.htm'>Testseite 3</a></li>
</ol>
</div>
CSS:
<style>
#navi ol
{
margin:0px;
padding:0px;
background:#D5EDB3;
border-top:1px solid white;
border-left:1px solid white;
border-right:1px solid white;
list-style:none inside;
}
#navi ol li
{
margin:0px;
padding:0px;
height:40px;
border-bottom:white solid 2px;
text-align:center;
}
#navi ol li a:hover
{
background:#5C743D;
text-decoration:underline;
color:white;
}
#navi ol li a,a:link,a:active,a:visited
{
display:block;
margin:0px;
padding:0px;
vertical-align:middle;
color:darkgreen;
text-decoration:none;
font-size:14px;
height:40px;
}
</style>
Zuletzt bearbeitet von einem Moderator: