horizontale liste/ a:hover bold

[krusty]

zur sicherheit nochmal im profi-forum...



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;

[sejuma]

Das sieht ziemlich umständlich aus, oder ich verstehe das Problem nicht.
Um Text zu zentrieren, benötigt das umfassende Element eine bestimmte Breite. Dafür kannst du dann auf Padding verzichten.

Ich würde es so lösen:

Code: Alles auswählen

li {
height: 16px;
color: #FFF;
font-size:11px;
margin-right: 5px;
float: left;
width: 150px;
text-align: center;
border: 1px solid red;
}

a:link, a:visited {
display: block;
}

a:hover {
font-weight: bold;
margin-right: 5px;
color: #F00;
text-align: center;
}

Code: Alles auswählen

<ul>
<li><a href="#"  id="nav2_01">TESTTEST01</a></li>
<li><a href="#"  id="nav2_02">TESTTEST</a></li>
<li><a href="#" id="nav2_03">TESTTEST03</a></li>
</ul>

Natürlich springt der Text etwas durch das bold beim Hovern.
Somit würde ich bold entweder generell oder gar nicht verwenden.