Link mit text und Bild

[Bauer]

Hallo ChrisB

Mit einer vernünftigen HTML-Struktur – Navigation als Liste von Links – und den Symbolen als Hintergrundbildern.
Wechsel der Farbe des Symbols bei :hover mit einem CSS-Sprite.

Da brauche ich jetzt leider doch nochmal Hilfe.

Mit Deinem Hinweis auf eine Navigations-Liste klappt alles wunderbar.
Auch habe ich es geschafft, dass sich der Hintergrund (das Symbol) farblich verändert.

Das kleine Problem ist aber nun, dass die verschiedenen Menütitel unterschieldich lang sind und somit das ganze links-bündig positioniert werden muss.
Dann schieben sich die Titel jedoch über das Symbol, welches ebenfalls links positioniert ist. Mit einem margin-left bekomme ich zwar den Text wieder weiter nach rechts verschoben, sodass mein Symbol wieder "alleine" da steht, jedoch verschiebe ich somit auch meinen Linkebereich (<a...>). Das hat den ganz klaren Nachteil, dass ich mit der Maus über meine Symbole "fahren" kann, diese sich auch fleißig farblich verändern jedoch dort kein Link zu finden ist, weil der ja nun um x pixel nach rechts verschoben wurde...

Das ganze sieht in meiner CSS jetzt so aus:

ul#Navigation li
   {
   list-style: none;
   padding:0;
   height:40px;
   background-color:black;
   background-image:url(../gfx/star_white_mini.gif);
   background-repeat:no-repeat;
   }
ul#Navigation li:hover
   {
   list-style: none;
   padding:0;
   height:40px;
   background-image:url(../gfx/star_red_mini.gif);
   background-repeat:no-repeat;
   }

ul#Navigation a
   {
   height:100%;
   display:block;
   padding:0;
   margin-left:35px;
   font-size:20px;
   text-decoration:none;
   font-weight:bold;
   line-height:200%;
   color:white;
   }
ul#Navigation a:hover
   {
   height:100%;
   margin-left:35px;
   padding: 0;
   font-size:20px;
   text-decoration:none;
   font-weight:bold;
   line-height:200%;
   color:red;
   }

Habe ich da einen falschen Ansatz gewählt oder fehlt mir da noch ein funken Wissen?

Besten Dank