Navigation mit Bildern, Mouseover

[Der Martin]

Hallo,

Ich baue eine Vertikale Navigation(5 Menüpunkte) mit Bildern. Alle 10 Bilder sind gleich groß. Jeder Menüpunkt umfasst 2 Bilder. Für Normale Linkansicht und hover.

bis hierher kann ich dir folgen.

Jeden Menüpunkt soll in einem separaten div-tag erscheinen.

Den Satz verstehe ich nicht (abgesehen davon, dass du vermutlich ein div-Element meinst und nicht ein Tag).

Liste geht es bestimmt auch, habe es aber noch nicht probiert.

Liste wäre IMHO vernünftiger, da es eine Abfolge von gleichartigen Blöcken ist.

<div id="punkt1">
<a href="../seite/index.html"><img src="../images/grafik1.gif" alt="" /></a>
</div>

In diesem Fall ist das div-Element außenrum völlig unnötig. Die ID kannst du gleich dem Link geben, ihn dann zum CSS-Blockelement machen und das div-Element ganz weglassen. Ich gehe aber aufgrund der Semantik dennoch von einer Liste aus:

<ul id="navi">
   <li id="punkt1"><a href="#"><img src="#" alt="" /></a></li>
   <li id="punkt2"><a href="#"><img src="#" alt="" /></a></li>
   ...
   <li id="punktn"><a href="#"><img src="#" alt="" /></a></li>
  </ul>

Jetzt habe ich aber das Problem im IE. Der Menüpunkt wird zweimal überlappend angezeigt, mit einem Höhenunterschied von ca. 3-4px.

Im Prinzip stellen alle Browser das Bild zweimal dar: Einmal das img-Element, und einmal das Hintergrundbild. Nur liegen sie normalerweise deckungsgleich übereinander.

Der Versatz im IE kommt daher, dass er die Zeilenumbrüche im Quellcode als Whitespace betrachtet. Dadurch kommt links und rechts vom Link ein Leerzeichen, und unter dem Bild ein paar Pixel Freiraum, weil es auf der Grundlinie des Texts steht und darunter noch Platz für Unterlängen reserviert ist.

Dein nächstes Problem dürfte sein, dass der hover-Effekt nicht sichtbar ist, denn wenn hinter einem Bild noch ein Hintergrundbild getauscht wird, merkt man das natürlich nicht (es sei denn, das Bild hat transparente Bereiche).

Bitte um Rat

Ich würde dir empfehlen, die Bilder nicht im Markup zu notieren, sondern stattdessen einen (fast) normalen Textlink. Der wird dann per CSS zu einem Bildlink "umgebaut". Dafür gibt es verschiedene Techniken; die Gilder/Levin-Methode scheint mir empfehlenswert.
Vorteil: Selbst wenn jemand keine Bilder laden kann/will oder das Bild wegen technischer Schwierigkeiten mal nicht geladen wird, ist der Link immer noch nutzbar und aufgrund des Textinhalts sogar informativ.
Nachteil: Wenn die Bilder transparente Stellen haben, scheint der Ersatztext durch.

So long,
 Martin