horizontale liste

[krusty]

hallo!

ich habe ein leidiges problem.
ich habe eine horizontale liste als navigation. die listen punkte habe ein
padding-left/right von 5 px, eine backgroundfarne und sollen als a:hover in font-weight: bold gehen.
das problem ist natürlich, das alle folgenden listenpunkte abhängig sind von ihren vorgänger und sich somit anfangs verschoben haben. ich habe das so gelöst, mit klassen, das unter jeden listenpunkt, das selbe wort unsichtbar in bold steht (via z-index und position), die paddings sich somit darauf beziehen und die größe des li definieren. bei a:hover bold verschiebt sich nun nichts mehr. vielleicht sollte ich noch dazu sagen, das im beispiel die li alle die selbe wortlänge haben, letztendlich aber nicht, und daher keine feste breite infrage kommt. das ist schonmal toll!
das blöde ist nur, das ich den text im li nicht mehr zentrieren kann.
hat jemand ne idee oder vielleicht auch eine erklärung?

dass wäre toll.

vielen dank vorab!
jens

Code: Alles auswählen

                  <li><a href="#" class="normal" id="nav2_01">TESTTEST01</a><span class="bold">TESTTEST01</span></li>
                  <li><a href="#" class="normal" id="nav2_02">TESTTEST</a><span class="bold">TESTTEST02</span></li>
                  <li><a href="#" class="normal" id="nav2_03">TESTTEST03</a><span class="bold">TESTTEST03</span></li>


#huelle #header #nav2 {
clear:both;
height: 16px;
text-align: center;
}

#huelle #header #nav2 ul {
list-style-type: none;
}

#huelle #header #nav2 ul li {
background-color: #000;
height: 16px;
color: #FFF;
font-size:11px;
margin-right: 5px;
float: left;
}

.bold {
font-weight: bold;
visibility: hidden;
height: 16px;
font-size:11px;
margin-right: 5px;
color: #F00;
padding-right: 15px;
padding-left: 15px;
text-align: center;

}
.normal {
position: absolute;
text-align: center;
padding-right: 15px;
padding-left: 15px;

[Azra]

Versuch das Menu hier einfach mal anzupassen.

HTML

Code: Alles auswählen

<div class="menu">
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
   </ul>
<br style="clear:left">
</div>

CSS

Code: Alles auswählen

.menu{
   width: 100%;
   background-color: #333;
}
.menu ul{
       margin: 0; padding: 0;
       float: left;
}
   
.menu ul li{
       display: inline;
}
   
.menu ul li a{
       float: left; text-decoration: none;
       color: white;
       padding: 10.5px 11px;
       background-color: #333;
}
   
.menu ul li a:visited{
       color: white;
}
   
.menu ul li a:hover, .menu ul li .current{
       color: #fff;
       background-color:#0b75b2;
}

[krusty]

hallo,
dein menü hat leider auch das bekannte problem, das die li von einander abhängig sind, und sich bei bold demnach verschieben....


trotzdem danke