Hallo
ich versuche eine Navigation zu basteln, bei der die Links unten in den Hintergrund 'übergehen'. Etwa so:
[Blockierte Grafik: http://s7.directupload.net/images/120731/6neoagrk.png]
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