horizontale liste/ a:hover bold

[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

  
  
<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;

[Hunter 9999]

Wenn die du keine feste Breite haben willst heißt das das sich die Breite an den Inhalt anpasst.
Wie willst du dann Zentrieren?

Versuchs doch mal mit display:inline beim li

Mit freundlichen Grüßen

Hunter 9999

[krusty]

Wenn die du keine feste Breite haben willst heißt das das sich die Breite an den Inhalt anpasst.
Wie willst du dann Zentrieren?

naja, nicht ganz:

ich möcht ein li erzeugen, mit einer hintergrundfarbe, die größe soll abhängig sein vom beinhalteten wort. das a:hover soll als "bold" reagieren.
das bekannte problem ist dann ja immer, das sich die größe des li ändert.
das habe ich so gelöst, das unsichtbar, unterdem li, das selbe wort schon in bold steht. dieses definiert also die li breite.
das einzige problem ist, das in dem li das sichtbare wort, linksbündig ist.
warum auch immer reagiert es nicht auf text-align:center

Versuchs doch mal mit display:inline beim li

hat leider keine veränderung gebracht

jens

[Hunter 9999]

Du sagst dem Inhalt des span, dass es zentriert sein soll
das span ist genauso groß wie sein Inhalt
das span liegt standartmäßig links im li
versuche mal den inhalt von li zu zentrieren
damit wird auch das span zentriert und damit auch sein inhalt

genau das gleiche beim link (nicht bold)
der link ist genauso groß wie sein Inhalt
der link liegt standartmäßig links im li
versuche auch hierfür den inhalt von li zu zentrieren

Mit freundlichen Grüßen

Hunter 9999

[ChrisB]

Hi,

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?

Erklärung:

.normal {
position: absolute;

MfG ChrisB