Liste mit Links springen beim hovern

[simoptim]

Hallo bin neu hier und habe noch nicht vor allzulanger Zeit mit css angefangen.

Ich hoffe ihr könnt mir hier gleich mal bei meinem ersten Problem helfen. :)

Also, ich habe eine Liste gestaltet als Menü. Die Menüpunkte sollen nebeneinander dargestellt werden.
Beim darüber fahren soll der jeweilige Text-Link in FETT geschrieben werden.
Soweit alles kein Problem.
Jetzt ist es nur so, dass sich beim darüberfahren alle Links rechts davon von dem markierten Link etwas verschieben. Also die Box des "li" verändert sich.

Woran liegt das?

 <div id="menue_balken">
        
        <div id="navibereich">
            <ul>
            <li id="nav01"><span>home</span></li>
            <li id="nav02" ><a href="ueberuns.html" title="Wir stellen uns Vor">überuns</a></li>
            <li id="nav03"><a href="referenzen.html" title="Abgesclossene Arbeiten">referenzen</a></li>
            <li id="nav04"><a href="kontakt.html" title="Kontaktieren Sie uns">kontakt</a></li>
            <li id="nav05"><a href="impressum.html" title="Impressum einsehen">impressum</a></li>
            </ul>
        </div>
        
     
        
    </div>

#navibereich {
    
    text-align: center;
  padding: 0px; 
  text-decoration: none; 
  padding:6px 1px 6px 1px;
}
    #navibereich ul {
      margin-bottom: 0; 
    }
    #navibereich li {
      display: inline; 
      list-style-type: none; 
      margin: 0; 
      border: 1px solid #000;
      
    }
    #navibereich a,
    #navibereich span {
      color: black; 
      padding: 0px 20px 0px 20px; 
    }
    #navibereich a:hover,
    #navibereich a:focus {
        font-weight: bold; 
        color: white; 
        padding:6px 1px 6px 1px;
        
        

      
    }
    #startseite #navi01 span,
    #galerieseite #navi02 span, 
    #kontaktseite #navi03 span
    #kontaktseite #navi03 span
    #kontaktseite #navi03 span{
      color: white; 
          
    }

grüße

 

[_Thor_]

Das liegt daran, dass die Schrift, wenn sie fett dargestellt wird, mehr Platz benötigt. Vermeiden kannst du es, indem du den Listenelementen eine feste Breite gibst.

Die beiden <div> um deine Liste sind so, wie sie da stehen, absolut überflüssig, da sie nichts gruppieren.

 

[simoptim]

danke für den schnellen hinweis
:)
muss dann das aber mit float positionieren und nicht mit display: inline;
oder?


-----------

überflüssig?

also den div container menue balken habe ich mit diesen werten im css versehen:

#menue_balken {
  position: relative; 
  background-color: #d5dfff; 
  background-image: url(bilder/bg_menue.jpg); 
  background-repeat: repeat-x; 
  color: black; 
  padding: 0px;
  height: 60px;
}

und der navibereich div container wird mit diesem hier deklariert:

#navibereich {
    
    text-align: center;
  padding: 0px; 
  text-decoration: none; 
  padding:6px 1px 6px 1px;
}

trotzdem überflüssig?

 

[_Thor_]

Ja, dann musst du mit float arbeiten, da Inlien-Elemente nur so breit sind, wie sie sein müssen.

Du kannst die Formatierungen auch gleich der Liste und den Listenelementen geben, dafür brauchst du kein div.