Zur Navigation

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>

22.06.2005 13:37

2 Jörg

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

22.06.2005 14:04

3 wrtlprnft

Das geht aber auch ohne inline-block:
#mainnavi li {
display:block;
float:right;
padding: 0px 3px 3px 0px;
width:5em;
}

22.06.2005 15:16

4 Jörg

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

22.06.2005 15:40 | geändert: 22.06.2005 15:43

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>

23.06.2005 16:17

6 Jörg

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

23.06.2005 17:21

Beitrag schreiben (als Gast)





[BBCode-Hilfe]