vertical-align:middle bei Link

[Quest_83]

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.

<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>

Das ganze wird dann mit CSS wie folgt formatiert:

<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>

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?

 

[Quest_83]

OK. Hatte gerade die Zündende Idee. Habe ein :hover auf das li-tag hinzugefügt und den Text des a-tags mit padding positioniert. Wenn einer noch ne andere Idee hat immer her damit.

 

[SpiceLab]

Ersetze vertical-align:middle durch line-height:40px. Der Wert für line-height orientiert sich dabei an height.

Die letzten Selektoren sind übrigens unvollständig und die darin enthaltenen Pseudoklassen in der falschen Reihenfolge notiert.

Korrekt:

#navi ol li a,#navi ol li a:link,#navi ol li a:visited,#navi ol li a:active {...}

Wenn du aber mit vertical-align:middle arbeiten möchtest, wären die kommentierten Modifikationen der <li>- u. <a>-Elemente erforderlich:

#navi ol li
{
  display:table; /* Element verhält sich wie Tabelle */
  width:100%; /* Breitenregelung */
  margin:0;
  padding:0;
  height:40px;
  border-bottom:white solid 2px;
  text-align:center
}
#navi ol li a
{
  display:table-cell; /* Element verhält sich wie Tabellenzelle */
  vertical-align:middle;
  font-size:14px;
  height:40px
}
#navi ol li a,#navi ol li a:link,#navi ol li a:visited,#navi ol li a:active
{
  color:darkgreen;
  text-decoration:none
}
#navi ol li a:hover
{
  background:#5C743D;
  color:white;
  text-decoration:underline 
}

Und verwende bitte zukünftig die Code-Tags zur Quellcode-Präsentation - siehe http://www.tutorials.de/help/bb-codes#codetag

Edit: Ein Moderator hat da zwischenzeitlich Hand angelegt.