nicht angemeldet
hallo selfer!
ich hab da ein sehr seltsames problem mit einer webseiten-navigation, und zwar: ein link des menüs verschwindet.
und zwar einfach so, mittendrin, immer wieder mal. dieses verhalten lässt sich nicht reproduzieren und taucht oft tagelang garnicht auf - dann plötzlich fehlt wieder der link aus der liste, ist aber beim reload der seite wieder da wo er hingehört.
manchmal tritt dieses problem direkt drei, vier mal hintereinander auf, manchmal wie gesagt garnicht.
die webseite selbst ist noch in arbeit, hier ist aber mal der code.
html:
<div class="main_nav">
<ul class="menu">
<li><span class="navitem">
<a href="#" class="navlink home current"> </a>
</span></li>
<li><span class="navitem">
<a href="#" class="navlink live"> </a>
</span></li>
<li><span class="navitem">
<a href="#" class="navlink media"> </a>
</span></li>
<li><span class="navitem">
<a href="#" class="navlink info"> </a>
</span></li>
<li><span class="navitem">
<span id="nav_last">
<a href="#" class="navlink shop"> </a>
</span>
</span></li>
</ul>
</div>
und css:
.main_nav {
height: 35px;
width: 900px;
text-align: center;
background: url(nav_bg.gif) 0 0 no-repeat;
}
.menu {
display: table;
padding: 0;
margin: 0 auto;
white-space: nowrap;
list-style-type: none;
}
* html .menu {
display: inline-block;
width: 1px;
padding: 0 0 0 0;
}
*:first-child+html .menu {
display: inline-block;
width: 100%;
padding: 0 0 0 0;
}
.menu a {
text-decoration: none;
}
.menu li {
display: table-cell;
}
* html .menu li {
display: inline;
}
*:first-child+html .menu li {
display: inline;
}
.navitem {
display: block;
padding: 0 5px 0 30px;
background: url(nav_bullet.gif) center left no-repeat;
text-decoration: none;
height: 35px;
}
* html .navitem {
display: inline-block;
margin: 0 -2px;
height: 35px;
}
*:first-child+html .navitem {
display: inline-block;
margin: 0 -2px;
height: 35px;
}
.navlink{
display: block;
width: 100px;
height: 35px;
}
.home {
background: url(nav_home.gif) 0 0 no-repeat;
}
.live {
background: url(nav_live.gif) 0 0 no-repeat;
}
.media {
background: url(nav_media.gif) 0 0 no-repeat;
}
.info {
background: url(nav_info.gif) 0 0 no-repeat;
}
.shop {
background: url(nav_shop.gif) 0 0 no-repeat;
}
.home:hover,
.live:hover,
.media:hover,
.info:hover,
.shop:hover,
.current {
background-position: -100px 0;
}
#nav_last {
display: block;
height: 35px;
padding: 0 25px 0 0px;
background: url(nav_bullet.gif) center right no-repeat;
}
... für ne einfache liste ist das - imo - ne menge text. aber was will man machen wenn man eine horizontale, zentrierte, "echte" liste mit rollover-bildern und einem sauberen abschluss nach dem letzten eintrag haben will?
der link, der probleme bereitet, ist zu 99% der letzte, in diesem fall der shop-link. ein freund hilft mir allerdings etwas beim testen und er legt seine hand dafür ins feuer dass auch schon andere links dieser liste "verschwunden" sind, was mir persönlich bisher noch nicht passiert ist.
eigentlich dachte ich daran diesen aufbau beizubehalten. zum einen funktioniert das - normalerweise - recht gut, ist scheinbar "semantisch korrekt" (ich kenn mich da ja nicht so aus...) und obendrein noch flexibel.
mich persönlich würde einfach nur interessieren warum es da vorkommen kann dass diverse teile der liste nicht korrekt angezeigt werden. und falls sich für dieses problem keine lösung findet muss einfach wieder "position: absolute" herhalten, zwar nicht ganz die feine art, aber was bleibt mir übrig - es muss funktionieren, punkt.
hat hier jemand ne idee? nen hinweis? ne lösung? hab ich einfach ein brett vorm kopf? ich bin für jede hilfe dankbar.
grüße & eine angenehme arbeitswoche,
sph
JürgenB