Hallo habe folgende Navigation gebastelt, allerdings springt diese immer mit hoch und runter, wenn ich über die Links fahre. Eigentlich sollte sie ganz oben in der Mitte fixiert sein und nur die einzelnen Balken ausfahren. Mir ist wichtig, dass es mit text-align center gelöst wird und nicht mit fixed breite und margin:0 auto ... weil es so flexibler und anpassungsfähiger ist.
MFG
hier der html-code:
<!doctype html>
<html>
<head>
<link href="nav.css" type="text/css" rel="stylesheet" />
<meta charset="utf-8">
</head>
<body>
<nav>
<ul>
<a id="nav1" href="index.html"><li><span>Nav1</span></li></a>
<a id="nav2" href="index.html"><li><span>Nav2</span></li></a>
<a id="nav3" href="index.html"><li><span>Nav3</span></li></a>
<a id="nav4" href="index.html"><li><span>Nav4</span></li></a>
<a id="nav5" href="index.html"><li><span>Nav5</span></li></a>
<a id="nav6" href="index.html"><li><span>Nav6</span></li></a>
<a id="nav7" href="index.html"><li><span>Nav7</span></li></a>
</ul>
</nav>
</body>
</html>
hier CSS:
body {
margin-top: 0px;
margin-bottom: 0px;
}
nav{
margin-top:20px;
background-color: white;
position: fixed;
width: 100%;
}
nav ul {
margin-top: 0px;
margin-bottom: 0px;
text-align: center;
}
nav ul li {
border-top: 5px solid grey;
font-family: helvetica;
float: left;
list-style-type: none;
text-decoration: none;
padding: 0px 30px;
height: 0px;
}
a {
color: grey;
padding-top: 0px;
display:inline-block;
}
a li{
margin-left: 15px;
-webkit-transition:all .2s ease-out;
-moz-transition:all .2s ease-out;
-ms-transition:all .2s ease-out;
-o-transition:all .2s ease-out;
transition:all .2s ease-out;
}
a:hover li{
-webkit-transform:translate(0px,10px);
-moz-transform:translate(0px,10px);
-ms-transform:translate(0px,10px);
-o-transform:translate(0px,10px);
transform:translate(0px,10px);
}
#nav1:hover li{
border-top: 20px solid #48008A;
color: #48008A;
}
#nav2:hover li{
border-top: 20px solid #009AFF;
color: #009AFF;
}
#nav3:hover li{
border-top: 20px solid #00FF00;
color: #00FF00;
}
#nav4:hover li{
border-top: 20px solid #FFFF00;
color: #FFFF00;
}
#nav5:hover li{
border-top: 20px solid #FF6600;
color: #FF6600;
}
#nav6:hover li{
border-top: 20px solid #DE0000;
color: #DE0000;
}
#nav7:hover li{
border-top: 20px solid #7FFF00;
color: #7FFF00;
}