Navigation mit Bildern, Mouseover

[wlive]

Hallo Leute,

ich hoffe hier kann mir jemand helfen.

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. Jeden Menüpunkt soll in einem separaten div-tag erscheinen. Liste geht es bestimmt auch, habe es aber noch nicht probiert.

Wie soll ich es anstellen?

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

...und css

#punkt1 a{
background:url(../images/grafik1.gif);
background-repeat: no-repeat;
background-position: bottom left;
}
#punkt1 a:hover{
background:url(../images/grafik1_over.gif);
background-repeat: no-repeat;
background-position: bottom left;
}

Jetzt habe ich aber das Problem im IE. Der Menüpunkt wird zweimal überlappend angezeigt, mit einem Höhenunterschied von ca. 3-4px. Wahrscheinlich ist die erste Grafik die, die ich via div als Link einfüge und die zweite via css. Es ist nicht die a:hover Grafik.

Was mache ich falsch? Bitte um Rat

[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

[wlive]

Hallo Martin,

ich werde die Bilder brauchen, weil derjenige der die Homepage haben möchte findet den Hovereffekt (Textschattierung) sehr gut.

[Der Martin]

Hi,

ich werde die Bilder brauchen, weil derjenige der die Homepage haben möchte findet den Hovereffekt (Textschattierung) sehr gut.

natürlich, den sollst du ja auch haben.
Offensichtlich hast du etwas missverstanden!

Ich wollte zwei Punkte deutlich machen:
 * Bilder nicht als img-Element, denn das kollidiert mit dem hover-Effekt
 * Textlinks als Fallback für den Fall, dass Bilder nicht verfügbar sind

Dass diese Texte durch CSS ausgeblendet (genauer: durch die Bilder verdeckt) werden, hatte ich eigentlich gesagt. Und gegen die Verwendung von zwei Bildern (eins für den Normalzustand, eins für :hover) spricht ja auch nichts. Wobei... ich würde sogar ein- und dasselbe Bild nehmen und es nur unterschiedlich positionieren; eine Technik, die als "CSS-Sprites" bekannt ist.

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

gegen die Verwendung von zwei Bildern (eins für den Normalzustand, eins für :hover) spricht ja auch nichts.

Doch. Du sagst es:

Wobei... ich würde sogar ein- und dasselbe Bild nehmen und es nur unterschiedlich positionieren;

Und zwar eine Bilddatei mit allen 10 Grafiken drin.

eine Technik, die als "CSS-Sprites" bekannt ist.

Und in A List Apart: CSS Sprites: Image Slicing’s Kiss of Death und Webkrauts: Kürzere Ladezeiten durch CSS-Sprites näher beschrieben wird.

Qapla'

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

die Gilder/Levin-Methode scheint mir empfehlenswert.

Naja, das verkrüppelte Markup ist schon unschön.

Jens Meiert hat eine Übersicht: Image-Replacement-Techniken zusammengestellt.

Qapla'

[Der Martin]

Hi Gunnar,

die Gilder/Levin-Methode scheint mir empfehlenswert.
Naja, das verkrüppelte Markup ist schon unschön.

das ist wohl wahr.

Jens Meiert hat eine Übersicht: Image-Replacement-Techniken zusammengestellt.

Aber die beiden Varianten, die Meiert favorisiert, haben noch gravierendere Nachteile:
Phark hat das Problem, dass der Ersatztext unsichtbar bleibt, wenn Bilder nicht geladen werden (sollen|können); SIIR ist recht aufwendig und geht ohne Javascript gar nicht.

Gegenüber diesen beiden Nachteilen erscheint mir ein wenig zusätzliches Markup (ist ja nur ein leeres span) als das deutlich kleinere Übel.

Ciao,
 Martin