Listen-Menü ohne Text & unterschiedlich groß

[simoptim]

Hey,

hab da eine Frage und komme nicht weiter. Finde keine funktionierende Lösung.

Also,
ich möchte ein vertikales Menü.
Das ganze ist als Liste definiert.
Jetzt möchte ich das jeder Menüpunkt aus einem Bild besteht (Schrift ist nur Grafisch auf dem Bild, also kein Text).
Die Bilder haben eine unterschiedliche Größe.
Hinzu kommt eine "active" und "hover" Grafik.

Hat jemand einen brauchbaren Link oder kann mir hier helfen?

Bisheriger Quelltext:

  <div id="navcontainer">
                    <ul id="navlist">
                          <li id="link1"><a href="index.html"></a></li>
                          <li id="link2"><a href="aktuelles.html"></a></li>

                    </ul>
                </div>

ul#navlist {
    width:545px;
    height: 40px;
    margin: auto;
    padding-top: 12px;
    list-style-type: none;

}

    
    
                
    
    #link1 a { display:block; 
                 background-image: url(bilder/b_home.png);  
                 width:116px; 
                 height:40px;}
                 
    #link1 a:hover { display:block; 
                       background-image: url (bilder/b_home_hover.png);  
                       width:116px; 
                       height:40px;}

 

[simoptim]

habs doch selber rausbekommen. :)
ist noch nicht alles stimmig aber für die die etwas ähnliches basteln möchten,
hier der quelltext:

 <div id="TopNavigation">
                    <ul id="TopNav">
                          <li><a href="index.html" id="home" class="aktiv"></a></li>
                          <li><a href="aktuelles.html" id="aktuelles"></a></li>
                          <li><a href="fitness.html" id="fitness"></a></li>
                          <li><a href="wellness.html" id="wellness"></a></li>
                          <li><a href="kontakt.html" id="kontakt"></a></li>

                    </ul>
                </div>

#TopNavigation {
    width:952px;
    height:41px; 
    
    }

#TopNav {padding:0px 0 0 0px;
        float:left;
        }
        
#TopNav li {display:inline;
            list-style-type:none;
            margin:0;color:#000000;
            float:left;
            height:40px;
            width:116px;
            padding-right:0px;}
            
#TopNav li a {display:block;
            height:40px;
            width:116px;
            text-decoration:none;}

#home {background:url(bilder/b_home.png) no-repeat;}
#home:hover, #NavStartseite:focus {background:url(bilder/b_home_hover.png) no-repeat;}
#home.aktiv, #NavStartseite.aktiv:hover {background:url(bilder/b_home_hover.png) no-repeat;}

#aktuelles {background:url(bilder/b_aktuelles.jpg) no-repeat;}
#aktuelles:hover, #aktuelles:focus {background:url(bilder/b_aktuelles_hover.jpg) no-repeat;}
#aktuelles.aktiv, #aktuelles.aktiv:hover {background:url(bilder/b_aktuelles_hover.jpg) no-repeat;}

#fitness {background:url(bilder/b_fitness.jpg) no-repeat;}
#fitness:hover, #fitness:focus {background:url(bilder/b_fitness_hover.jpg) no-repeat;}
#fitness.aktiv, #fitness.aktiv:hover {background:url(bilder/b_fitness_hover.jpg) no-repeat;}

#wellness {background:url(bilder/b_wellness.jpg) no-repeat;}
#wellness:hover, #wellness:focus {background:url(bilder/b_wellness_hover.jpg) no-repeat;}
#wellness.aktiv,#wellness.aktiv:hover {background:url(bilder/b_wellness_hover.jpg) no-repeat;}

#kontakt {background:url(bilder/b_kontakt.png) no-repeat;}
#kontakt:hover, #kontakt:focus {background:url(bilder/b_kontakt_hover.png) no-repeat;}
#kontakt.aktiv,#kontakt.aktiv:hover {background:url(bilder/b_kontakt_hover.png) no-repeat;}

achja, ist jetzt aber doch mit jeweils gleicher breite bei den bildern!!!