Hallo

ich versuche eine Navigation zu basteln, bei der die Links unten in den Hintergrund 'übergehen'. Etwa so:



Zusätzliche Anforderung ist, dass es möglichs Barrierfrei werden soll - ins besondere Skalierbar. Die Lösung die ich aktiv hab sieht leider in jedem Browser leicht anders aus und ist nur bedingt skalierbar.

Code:
<head>
  <style type="text/css">
    body {
      background: #000;
      font-family: "Trebuchet MS", Verdana, Arial;
    }
    
    a {
      text-decoration: none;
    }
  
    #navigation {
      background: #a1a1a1;
      font-size: 1em;
      height: 1.2em;
      overflow: hidden;
    }
    
    ul {
      display: inline;
    }

    #navigation li {
      list-style: none;
      display: inline;
      margin: 0;
      vertical-align: bottom;
      padding: 0 5px;
    }

    #navigation li a {
      position: relative;
      bottom: -0.27em;
      color: #000;
    }
    
    #navigation li.active {
      border-left: 1px solid red;
      background: black;
    }
    
    #navigation li.active a {
      color: red;
    }
  </style>
</head>
<body>
<div id="navigation">
<ul class="clearfix">
  <li class="active"><a href="">Link1</a></li>
  <li><a href="">Link2</a></li>
  <li><a href="">Link3</a></li>
  <li><a href="">Link4</a></li>
</ul>
</div>
</body>
Kennt jemand eine bessere Lösung als der Hack mit "position: relativ; bottom: -0.27em"? Oder vielleicht ein Tip zum Optimieren?
Vielen Dank!
Saduras
Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!