Navigation mit Liste, Problem bei hover und Fettschrift

1 Gast (Gast)

Hi,

da ich hier so schnell konstruktive Anmerkungen bekommen habe frage ich einfach nochmal, ich bin bestimmt nicht der erste, der sich dieser Problematik stellt:

Ich möchte eine horizontale Navigation bauen. Eine Liste bietet sich dafür an. Im Prinzip möchte ich auf Javascript und den Einsatz von Grafiken möglichst verzichten. Die einzelnen Menüpunkte sollen mit einem Pipe zeichen separiert werden (|). Sobald man drüber hovert soll die Schrift fett werden und die Farbe ändern. Soweit kein Problem, doch ich denke ihr wisst schon wo es hakt...
Richtig sobald ein Menüpunkt fett wird, verschieben sich alle weiteren Menüpunkte...
Es gibt doch sicherlich eine simple und elegante Lösung dieses Problem zu umgehen ohne mit Tabellen, Grafiken und Javascript rumflicken zu müssen, oder?

<html> 
<style>
#mainnavi {
float: right;
font-size: 11px;
letter-spacing: 0.4em;
list-style: none;
margin-top: 40px;
padding: 0px;
}
ul {
list-style: none;
}
#current {
border: 1px solid red;
}
#mainnavi li {
display: inline;
padding: 0px 3px 3px 0px;
}
#mainnavi li a {
padding: 0px 3px 3px 0px;
text-decoration: none;
color: #372011;
}
#mainnavi li a:hover {
text-decoration: none;
color: red;
font-weight: bold;
}
</style>
<body>
<div id="header">
        <ul id="mainnavi">
            <li><a href="ziel/index.htm">Navi1</a></li>
            <li><a href="angebot/index.htm">Navi2</a></li>
            <li><a href="phasen/index.htm">Navi3</a></li>
            <li><a href="partner/index.htm">Navi4</a></li>
            <li><a href="kontakt/index.htm">Navi5</a></li>
        </ul>
</div>
</body>
</html>

2 Jörg Kruse

Ja, den Wackeleffekt kenne ich auch ;)

Ein Lösungsansatz wäre vielleicht eine feste Breite für #mainnavi li, die durch ein zusätzliches display:inline-block ermöglicht wird:

#mainnavi li {
display:inline-block;
width:70px;
float:left;
padding: 0px 3px 3px 0px;
}

display:inline-block ist allerdings erst in CSS 2.1 enhalten, das noch nicht verabschiedet ist. Die Lösung funktioniert scheint's aber bereits in Opera 8, Firefox 1.0.4 und IE 6

3 wrtlprnft

Das geht aber auch ohne inline-block:

#mainnavi li {
display:block;
float:right;
padding: 0px 3px 3px 0px;
width:5em;
}

4 Jörg Kruse

Ja, da hatte ich zu kompliziert und nicht zu Ende gedacht :) das spezifische an display:inline-block ist ja, dass es auch ohne float:left und float:right nebeneinander postioniert, aber das funktioniert wohl noch nicht browserübergreifend (Opera 8 scheint das bereits zu können?). Von daher kann man dann auch gleich display:block nehmen

5 Gast (Gast)

Falls es interessiert, ich habe jetzt ein Menü ohne Fett Effekt sondern mit Kasten gemacht. Passt eh besser zum Projekt.

<html> 
<style>
#mainnavi {
width: 389px;
position: absolute;
bottom: 0px;
right: 0px;
font-size: 10px;
letter-spacing: 1px;
font-weight: bold;
list-style: none;
padding: 0px;
margin: 0px;
}
#mainnavi ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#current {
padding: .2em .3em;
color: #d7d2cf;
}
#mainnavi li {
display: inline;
}
#mainnavi li a {
padding: .2em .3em;
text-decoration: none;
color: #372011;
}
#mainnavi li a:hover {
color: white;
background-color: #372011;
}
</style>
<body>
<div id="header">
       <ul id="mainnavi">
           <li><a href="ziel/index.htm">Navi1</a></li>
           <li><a href="angebot/index.htm">Navi2</a></li>
           <li><a href="phasen/index.htm">Navi3</a></li>
           <li><a href="partner/index.htm">Navi4</a></li>
           <li><a href="kontakt/index.htm">Navi5</a></li>
       </ul>
</div>
</body>
</html>

6 Jörg Kruse

So kann man das Problem natürlich auch lösen ;)

nach oben

Navigation mit Liste, Problem bei hover und Fettschrift

Beitrag schreiben (als Gast)