CSS Navigatie tabs verdwijen na knik

[Verwijderd]

Ik heb met css een Navigatie menu met tabs gemaakt d.m.v list items (ul).
Maar zodra ik op een link klik, bijv home (terug naar index.asp) dan verdwijnt deze.
Explorer en Firefox hebben beide hetzelfde probleem, dus er moet ergens een foutje in de style zitten.

List items :

code:

<div id="NavBar">
  <ul>
    <li class="home"><a href="index.asp" target="_self"></a></li>
    <li class="diensten"><a href="diensten.asp" target="_self"></a></li>
    <li class="support"><a href="support.asp" target="_self"></a></li>
    <li class="nieuws"><a href="nieuws.asp" target="_self"></a></li>
    <li class="vacatures"><a href="vacatures.asp" target="_self"></a></li>
  </ul>
  </div>

Style:

code:

}
#NavBar {
    float: left;
    margin-top: 106px;
    margin-left: 25px;
    padding: 0px;
    text-align: center;
    width: 550px;
    display: inline;
}
#NavBar ul {
    display: inline;
    margin: 0px;
    padding: 0px;
    float: left;
}
#NavBar li {
    list-style-type: none;
    display: inline;
}

#NavBar li a:link {
    display: block;
    width: 83px;
    float: left;
    height: 29px;
}

#NavBar li.home a:link {
    display: block;
    background-image: url(img/btn_home1.gif);
    height: 29px;
    width: 85px;
}
#NavBar li.home a:hover {
    display: block;
    background-image: url(img/btn_home2.gif);
    height: 29px;
    width: 85px;
}
#NavBar li.homecur a:link, #NavBar li.homecur a:visited {
    display: block;
    background-image: url(img/btn_home2.gif);
    height: 29px;
    width: 85px;
}

#NavBar li.diensten a:link {
    display: block;
    background-image: url(img/btn_diensten1.gif);
    height: 29px;
    width: 100px;
}
#NavBar li.diensten a:hover {
    display: block;
    background-image: url(img/btn_diensten2.gif);
    height: 29px;
    width: 100px;
}
#NavBar li.dienstencur a:link, #NavBar li.dienstencur a:visited {
    display: block;
    background-image: url(img/btn_diensten2.gif);
    height: 29px;
    width: 100px;
}

#NavBar li.support a:link {
    display: block;
    background-image: url(img/btn_support1.gif);
    height: 29px;
    width: 100px;
}
#NavBar li.support a:hover {
    display: block;
    background-image: url(img/btn_support2.gif);
    height: 29px;
    width: 100px;
}
#NavBar li.supportcur a:link, #NavBar li.supportcur a:visited {
    display: block;
    background-image: url(img/btn_support2.gif);
    height: 29px;
    width: 100px;
}

#NavBar li.nieuws a:link {
    display: block;
    background-image: url(img/btn_nieuws1.gif);
    height: 29px;
    width: 100px;
}
#NavBar li.nieuws a:hover {
    display: block;
    background-image: url(img/btn_nieuws2.gif);
    height: 29px;
    width: 100px;
}
#NavBar li.nieuwscur a:link, #NavBar li.nieuwscur a:visited {
    display: block;
    background-image: url(img/btn_nieuws2.gif);
    height: 29px;
    width: 100px;
}

#NavBar li.vacatures a:link {
    display: block;
    background-image: url(img/btn_vacatures1.gif);
    width: 120px;
    height: 29px;
}
#NavBar li.vacatures a:hover {
    display: block;
    background-image: url(img/btn_vacatures2.gif);
    height: 29px;
    width: 120px;
}
#NavBar li.vacaturescur a:link, #NavBar li.vacaturescur a:visited {
    display: block;
    background-image: url(img/btn_vacatures2.gif);
    height: 29px;
    width: 120px;
}

Als ik "#NavBar li a:link" weg haal dan werkt het menu ook niet meer, denk dat het daar mee te maken heeft.
#NavBar li a:link gebruik ik niet verder, heb voor iedere list item een class gedefineerd.

[Verwijderd]

Waarom zet je er uberhaupt een extra DIV-element omheen? Je kunt die id ook gewoon aan je unordered list meegeven.

[Verwijderd]

Ja die div heb ik al veranderd, dit is idd netter.
Maar het probleem is niet opgelost nog
Ik vraag me af of deze manier van werken wel door css ondersteund wordt.
In de links zit verder geen txt, alleen een plaatje.
Als er op een link geklikt wordt, verdwijnt deze en komt niet meer terug.
Lijkt wel alsof de browser het onthoudt.
Bij een volgend bezoek aan de pagina zijn ze nog steeds verdwenen.

[Boelie-Boelie]

In je stylesheet staan allemaal classes die je niet in je markup hebt.. Wordt reproduceren niet makkerlijker op.

Zou het met link specificity te maken hebben? Volgorde van links definiëren is :link, :visited, : hover, :active (LoVe-HAte).

offtopic:
Handig zou ook zijn het gebruik van '[code=html]' en '[code=css]' in je bericht (i.p.v. alleen '[code]').

[ Voor 16% gewijzigd door Boelie-Boelie op 22-11-2006 13:17 ]

[Savantas]

Daarnaast zou ik geen classes maar id's gebruiken voor het menu, of gebruik je de links vaker?
Verder heb je erg veel dubbele definities, zoals overal de hoogte op 29px...
En wat Boelie-boelie al opmerkt, wat moet ik me bij classe dienstencur voorstellen?
Dit is al schoner:

Cascading Stylesheet:

    #NavBar {
    float: left;
    margin-top: 106px;
    margin-left: 25px;
    padding: 0px;
    text-align: center;
    width: 550px;
    display: inline;
}
#NavBar ul {
    display: inline;
    margin: 0px;
    padding: 0px;
    float: left;
}
#NavBar li {
    list-style-type: none;
    display: inline;
}

#NavBar li a:link {
    display: block;
    width: 83px;
    float: left;
    height: 29px;
}

li.home a {
    background-image: url(img/btn_home1.gif);
    width: 85px;
}
li.home a:hover {
    background-image: url(img/btn_home2.gif);
}
li.homecur a, li.homecur a:visited {
    background-image: url(img/btn_home2.gif);
}

li.diensten a {
    background-image: url(img/btn_diensten1.gif);
    width: 100px;
}
li.diensten a:hover {
    background-image: url(img/btn_diensten2.gif);
    width: 100px;
}
li.dienstencur a, li.dienstencur a:visited {
    background-image: url(img/btn_diensten2.gif);
    width: 100px;
}

li.support a {
    background-image: url(img/btn_support1.gif);
    width: 100px;
}
li.support a:hover {
    background-image: url(img/btn_support2.gif);
    width: 100px;
}
li.supportcur a, li.supportcur a:visited {
    background-image: url(img/btn_support2.gif);
    width: 100px;
}

#NavBar li.nieuws a {
    background-image: url(img/btn_nieuws1.gif);
    width: 100px;
}
#NavBar li.nieuws a:hover {
    background-image: url(img/btn_nieuws2.gif);
    width: 100px;
}
li.nieuwscur a, li.nieuwscur a:visited {
    background-image: url(img/btn_nieuws2.gif);
    width: 100px;
}

li.vacatures a {
    background-image: url(img/btn_vacatures1.gif);
    width: 120px;
}
li.vacatures a:hover {
    background-image: url(img/btn_vacatures2.gif);
    width: 120px;
}
li.vacaturescur a, li.vacaturescur a:visited {
    background-image: url(img/btn_vacatures2.gif);
    width: 120px;
}

Verder kunnen er (afhankelijk van je verdere layout) nog wel wat display-definities weg, lijkt me. En de text-align in de Navbar lijkt me overbodig...

[Verwijderd]

dienstencur en homecur etc zijn de current states van de links.
Eerste werkte mijn menu goed, toen ik 2 plaatjes had gemaakt 1 voor normal en 1 voor hover en daar txt over had getypt. Ik wil graag per knop andere plaatjes hebben waar de txt in het plaatje staat.

Al die overbodige attributen heb ik er later in gezet, ik dacht effe wat pielen maar het hielp helaas niet
Zal die style eens proberen, hopen of het zo wel werkt.
De manier van links defineren heb ik uit een andere site gehaald, daar werkt het ook goed alleen die gene heeft geen plaatjes maar background color die veranderd.


[edit]

Het werkt helaas niet heb nog exact dezelfde fouten.
Ik ga het wel met Javascript maken, uit ervaring weet ik dat dat goed werkt.

iig bedankt voor de hulp.

[ Voor 12% gewijzigd door Verwijderd op 22-11-2006 14:30 ]

[Boelie-Boelie]

Verwijderd schreef op woensdag 22 november 2006 @ 14:24:
Ik ga het wel met Javascript maken, uit ervaring weet ik dat dat goed werkt.

Uit oogpunt van zoekmachine-indexatie werkt dát iig zeker niet...