a:hover-Problem bei horizontaler float-Navigation

[GordonZola]

hallo;
hab den ganzen tag gestöbert bin aber hinsichtlich meines derzeitigen problems nicht wirklich fündig geworden;

folgendes problem:
habe eine listen-navigation aufgebaut, die sich mittels float:left horizontal anordnet.

<div id="hauptnavigation">  
  <ul id="h_navi">  
   <li class="h_nav_textlink1"><a href="#" tabindex="1">Textlink1</a></li>  
   <li class="h_nav_textlink2"><a href="#" tabindex="2">Textlink2</a></li>  
   <li class="h_nav_textlink3"><a href="#" tabindex="3">Textlink3</a></li>  
   <li class="h_nav_textlink4"><a href="#" tabindex="4">Textlink4</a></li>  
   <li class="h_nav_textlink5"><a href="#" tabindex="5">Textlink5</a></li>  
   <li class="h_nav_textlink6"><a href="#" tabindex="6">Textlink6</a></li>  
  </ul>  
 </div>

das css dazu gestaltet sich wie folgt:

#hauptnavigation {  
 position: absolute;  
 top: 0px;  
 left: 0px;  
}  
  
#h_navi {  
 list-style-type: none;  
 width: 873px;/*die breite entspricht dem contentbereich und soll das umbrechen der navigation verhindern, wenn das browser-fenster zu klein sein sollte */  
  
}  
  
#h_navi li{  
 float: left;  
 width: auto;  
}  
  
#h_navi li a {  
 padding: 0 9px 0 9px;  
 font-family: Verdana, Helvetica, san-serif;  
 font-size: 11px;  
 line-height: 18px;  
}  
  
.h_nav_textlink1 a, .h_nav_textlink2 a, .h_nav_textlink3 a, .h_nav_textlink4 a, .h_nav_textlink5 a, .h_nav_textlink6 a {  
 position: relative;  
 top: 106px;  
 color: #535353;  
 text-align: center;  
 text-decoration: none;  
}  
  
.h_nav_textlink1 a:hover {  
 color: #0f4678;  
}  
  
.h_nav_textlink2 a:hover {  
 color: #4a7d08;  
}  
  
.h_nav_textlink3 a:hover {  
 color: #d2a903;  
}  
  
.h_nav_textlink4 a:hover {  
 color: #cd4b23;  
}  
  
.h_nav_textlink5 a:hover, .h_nav_textlink6 a:hover {  
 color: #000000;  
}

ansich klappt das (unter OsX) in Firefox und Safari wunderbar und wie gewünscht - aber im IE5 verschwindet beim mouseover die beschriftung des links. der link ist schon noch da nur nicht mehr zu sehen.

wenn ich bei .h_nav_textlink1 a (etc.) position: relative; und top: 106px; auskommentiere bleibt der text mit dem gewünschten :hover stehen, aber natürlich nicht an der stelle an der ich ihn gerne hätte.

würde mich über tipps aller art zur lösung des problems sehr freuen!

[suit]

die id h_navi ist redundant da du die liste im div #hauptnaviation ohnehin eindeutig ansprechen kannst (oder repsektive das div-element drumherum ist redundant, eher so rum)

#h_navi li a {
padding: 0 9px 0 9px;
font-family: Verdana, Helvetica, san-serif;
font-size: 11px;
line-height: 18px;
}

und du möchtest sicher "sans-serif" als generische schriftfamilie und nicht san-serif ;)

.h_nav_textlink1 a, .h_nav_textlink2 a, .h_nav_textlink3 a, .h_nav_textlink4 a, .h_nav_textlink5 a, .h_nav_textlink6 a {
position: relative;
top: 106px;
color: #535353;
text-align: center;
text-decoration: none;
}

warum packst du nicht alle deklarationen des zweiten selektorblocks in den ersten dazu? beide sprechen die selben elemente an

.h_nav_textlink5 a:hover, .h_nav_textlink6 a:hover {
color: #000000;
}

wenn du oben als standardfarbe #000000 definierst, sparst du dir diesen abschnitt

wenn ich bei .h_nav_textlink1 a (etc.) position: relative; und top: 106px; auskommentiere bleibt der text mit dem gewünschten :hover stehen, aber natürlich nicht an der stelle an der ich ihn gerne hätte.

warum muss es position: relative sein - kann dir ein margin-top zb auch helfen?

[GordonZola]

das ging ja schnell - dafür mal schon ein grosser dank;

die id h_navi ist redundant da du die liste im div #hauptnaviation ohnehin eindeutig ansprechen kannst (oder repsektive das div-element drumherum ist redundant, eher so rum)

das stimmt wohl. frage mich ob das zu problemen führen kann. werde mal schauen, dass ich die redundanzen heraus bekomme.

#h_navi li a {
padding: 0 9px 0 9px;
font-family: Verdana, Helvetica, san-serif;
font-size: 11px;
line-height: 18px;
}

und du möchtest sicher "sans-serif" als generische schriftfamilie und nicht san-serif ;)

da hast du wohl recht! ein klassischer vertipper.

.h_nav_textlink1 a, .h_nav_textlink2 a, .h_nav_textlink3 a, .h_nav_textlink4 a, .h_nav_textlink5 a, .h_nav_textlink6 a {
position: relative;
top: 106px;
color: #535353;
text-align: center;
text-decoration: none;
}

warum packst du nicht alle deklarationen des zweiten selektorblocks in den ersten dazu? beide sprechen die selben elemente an

verstehe ich nicht ganz was du damit meinst - vielleicht sollte man an der stelle dazusagen dass ich nicht gerade ein profi bin.

.h_nav_textlink5 a:hover, .h_nav_textlink6 a:hover {
color: #000000;
}

wenn du oben als standardfarbe #000000 definierst, sparst du dir diesen abschnitt

das habe ich so definiert, da sich unter umständen in absprache mit dem kunden da noch eine änderung ergeben kann.

wenn ich bei .h_nav_textlink1 a (etc.) position: relative; und top: 106px; auskommentiere bleibt der text mit dem gewünschten :hover stehen, aber natürlich nicht an der stelle an der ich ihn gerne hätte.

warum muss es position: relative sein - kann dir ein margin-top zb auch helfen?

mit margin-top: 106px; hab ichs schon probiert - das war auch meine erste idee den fehler in der anzeige im mac IE5 zu verhindern;
ansich funktioniert es ja auf allen browsern ok - einzige ausnahme das microsoft-produkt auf einem apple-rechner.

[suit]

das stimmt wohl. frage mich ob das zu problemen führen kann. werde mal schauen, dass ich die redundanzen heraus bekomme.

bei dem von dir geposteten code sehe ich keinen grund warum das zusätzliche element benötigst - ul#navigation reicht völlig aus

verstehe ich nicht ganz was du damit meinst - vielleicht sollte man an der stelle dazusagen dass ich nicht gerade ein profi bin.

das hier
.h_nav_textlink1 a, .h_nav_textlink2 a, .h_nav_textlink3 a, .h_nav_textlink4 a, .h_nav_textlink5 a, .h_nav_textlink6 a { }
selektiert im grunde genommen das selbe wie das hier #h_navi li a { }
recht viel mehr links gibts ja nicht - das kannst du also alles knicken und zusammenfassen (damit hast dus übersichtlicher)

mit margin-top: 106px; hab ichs schon probiert - das war auch meine erste idee den fehler in der anzeige im mac IE5 zu verhindern;
ansich funktioniert es ja auf allen browsern ok - einzige ausnahme das microsoft-produkt auf einem apple-rechner.

kannst du das ganze ggf. irgendwo als testseite online stellen?

<http://de.selfhtml.org/html/allgemein/grundgeruest.htm@title=html grundgerüst> ausgestattet mit deinem htmlschnipsel + css

und ggf noch ein bild bzw eine designvorlage dazu, wies eigentlich aussehen kann - ich könnte mir das zwar jetzt alles selbst zusammenstöpseln, aber dazu hab ich grade irgendwie keine zeit und lust ;)

wenn das entkoppelte beispiel zur zufriedenheit funktioniert, kannst du es in deine seite einbauen - wenns dort nicht mehr funtkioniert, liegt der fehler anderswo

es scheint jedenfall so als würde da einiges fehlen - zb die padding/margin-werte für das aussenliegende ul (diese sind nicht standardisiert - die würde ich vorsichtshalber auf 0 setzen) damit du in jedem browser von korrekten werden ausgehen kannst

[GordonZola]

hallo;

ich habs jetzt geschafft die sache nach wunsch zum laufen zu bringen;
unter den folgenden link habe ich das ganze mal auf einen test-space geladen;
die hinterlegung der textfelder habe ich nur zur überprüfung eingestellt;

http://www.final-version.at/test_hnav

bin für tipps zum gesundschrumpfen des codes schon jetzt höchst dankbar;

[Ingo Turski]

Hi,

http://www.final-version.at/test_hnav

übel, wenn man den Schriftgrad erhöht...

freundliche Grüße
Ingo

[GordonZola]

Hi,

http://www.final-version.at/test_hnav
übel, wenn man den Schriftgrad erhöht...

freundliche Grüße
Ingo

hallo ingo;
ansich geb ich dir recht dass bei einer schriftvergrösserung die navigation ein probleem darstellt;
das habe ich aber bislang auch aussen vor gelassen;
wenn dir eine gute idee auf der zunge liegt das zu umgehen sag ich nicht nein;

[Ingo Turski]

Hi,

wenn dir eine gute idee auf der zunge liegt das zu umgehen sag ich nicht nein;

1. position:absolute ist oft problematisch.
2. px-Angaben für Text ebenfalls.

Eine Notlösung wäre #hauptnavigation ul {width: 50em}.
Oder eben Grafiken statt Text verwenden.

freundliche Grüße
Ingo

[suit]

1. position:absolute ist oft problematisch.

lässt sich auch wunderbar mit relativen angaben kombinieren - richtig eingesetzt ist das nicht problematisch