css Navigation verschiebt sich bei hover

[markus]

Hi!

Ich möchte eine Navigationsbar am linken rand meine Site haben.
Die Links befinden sich in einerm <ul><li>link</li></ul> gerüst, dieses ganze gerüst in einem div-container also
<div>
 <ul>
  <li><a>link1</a></li>
  <li><a>link2</a><li>
 </ul>
</div>

Das ganze habe ich mir in css schön formatiert und sieht auch so aus, wie ich es gern haben möchte. Unter anderem sollen die Links einen Abstand von 5pixeln zum Container-Div haben.

Bei einem hover der Links werden diese fetter, dadurch vergrößtern sich die ganzen Container. Das ganze passiert nur einmal, beim ersten drüberfahren der Links.

Wie kann ich das Verhalten abstellen?

Getestet wurde das ganze bislang nur unter dem IE7, andere Browser wurden noch nicht getestst, werde das heute abend bzw. morgen nachholen.

Achso, eine weitere Frage haett ich noch, die Navigationsleiste ist per float:left in einem umschließenden Container eingebunden. Wie kann ich sicherstellen, das die Navigationsleiste nie höher ist wie der sie umschließende Container?

Die erste Frage zu beantwortet wäre allerdings wichtiger ^^

vielen Danke im vorraus für die Mühen

gruß markus

Die relevanten Codezeilen sind:

css:

#content_container{
 background-color: #FFFFFF;
 border: 1px solid #000000;
 padding: 20px;
}

#navi{
 float:left;
 width:170px;
 margin-left:0px;
 border: 1px solid #000000;
 padding: 0px 0px 0px 5px;
 text-align: left;
 margin-top: 0px;
 margin-right: 30px;
 margin-bottom: 0px;
}

ul#navigation{
 display: block;
 padding:0px;
 margin: 0px;
}

ul#navigation li{
 list-style-type: none;
 padding-top: 2px;
 padding-bottom: 3px;
 margin: 0px;
}

ul#navigation a {
 color: #000000;
 text-decoration: none;

}
ul#navigation a:link {

}
ul#navigation a:visited {

}
ul#navigation a:hover {
 color: #CC0000;
 font-weight: bolder;
 text-decoration: underline;

}
ul#navigation a:active {

}

#naviheader{
 font-size: large;
 color: #000000;
 background-color: #FFCC00;
 border-top-width: 1px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-bottom-style: solid;
 border-top-color: #000000;
 border-right-color: #000000;
 border-bottom-color: #000000;
 border-left-color: #000000;
 line-height: 1.5em;
 vertical-align: middle;
 padding-left: 5px;
 font-weight: bolder;
 border-top-style: none;
 border-right-style: none;
 border-left-style: none;
 margin-left: -5px;
}

#content{
}

html:

<div id="content_container">

<div id="navi">
     <div id="naviheader">Navigation</div>
    <ul id="navigation">
   <li><a href="#">Startseite</a></li>
   <li><a href="#">Das Untrnehmen</a></li>
   <li><a href="#">Leistungen</a></li>
      <li><a href="#">Preise</a></li>
         <li><a href="#">Wussten Sie schon?</a></li>
         <li><a href="#">Anfahrt</a></li>
         <li><a href="#">Impressum</a></li>
     </ul>

</div>

<div id="content">Raum für den Inhalt von id "content"</div>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
   <p>&nbsp;</p>
</div>

[Gernot Back]

Hallo markus,

Das ganze habe ich mir in css schön formatiert und sieht auch so aus, wie ich es gern haben möchte. Unter anderem sollen die Links einen Abstand von 5pixeln zum Container-Div haben.

Bei einem hover der Links werden diese fetter, dadurch vergrößtern sich die ganzen Container. Das ganze passiert nur einmal, beim ersten drüberfahren der Links.

Wie kann ich das Verhalten abstellen?

Getestet wurde das ganze bislang nur unter dem IE7, andere Browser wurden noch nicht getestst, werde das heute abend bzw. morgen nachholen.

Bei den anderen Browsern wird es unter den gegebenen Umständen nicht anders sein. Du solltest dir also überlegen, ob du deinen LI-Elementen nicht jeweils eine feste Breite mit overflow:hidden zuweisen willst und die A-Elemente darin ohne Padding zentriert ausrichten möchtest.

Achso, eine weitere Frage haett ich noch, die Navigationsleiste ist per float:left in einem umschließenden Container eingebunden. Wie kann ich sicherstellen, das die Navigationsleiste nie höher ist wie der sie umschließende Container?

Ebenfalls mit overflow:hidden

Gruß Gernot

[markus]

Danke für die Antwort! Ich habe das jetzt anderst gelöst, die Navigationsleiste habe ich mit position:fixed auf eine feste position gebracht, am layout verändert sich nichts mehr.

das zweite problem habe ich so gelöst, das ich den container, der neben der navigation in dem umschließenden container enthalten ist einfach per margin-left:xx; einen festen abstand zur linken kante gegeben habe

gruß markus