Hallo Ingo,

ich möchte auf meiner Seite den von dir dargestellten Bildwechsel per css miteinbauen.

Doch irgendwie habe ich da eine ganze Menge durcheinander gebracht.

Hier mal der Code wie die Datei bisher ausschaut:

Zitat

---

Link 2

Link 3

Link 4

Link 5

Link 6

Link 7

Link 8

---

Ich möchte, dass "images/pfeil.gif" beim "Überfahren" des Links sich in "images/pfeilhoch.gif" verändert.

Ich komme da einmal mehr nicht weiter. Kannst du mir da helfen?


Gruß
Kurzer

Hi,

was funktioniert denn nicht? Statt des Quelltextes hättest Du besser den Link zu einer Testseite angeben sollen.

Was mir jedoch auffällt:

#wechsel a {width:100px;}
#wechsel img {width:18px;}

Ist weiter nichts im a?


Und:

* html #wechsel a:hover {
width:107px; margin-right:0; /* Workaround fuer IE 5.01 */
}

Wenn Du den Sinn dieser Regel nicht verstehst, dann lasse sie besser weg und verzichte auf den Effekt beim IE 5.01.


Außerdem solltest Du Dich entscheiden, ob Du für die Links eine Liste (UL) nimmst oder eine weniger passende Tabelle. So wie Du es angegeben hast, geht das nicht.

Gruß
Ingo

Hallo Ingo,

habe das ganze jetzt erstmal nur in eine Datei gepackt.
Hier der Link:
http://ssv-junioren.de/ssv/ingo-css-bildwechsel.html


Und jetzt werde ich versuchen dies in meine Navigation hineinzubauen.

Kann ich das so lassen?


Gruß
Kurzer

Ach ja: wie mache ich das, dass die Beschreibung (im Falle des Beispieles: "SSV") auch neben der Grafik erscheint?



Gruß
Kurzer

Hi,
wie sollte der Linktext in 10px Breite und auch noch neben die Grafik passen?

Außerdem bewirkt img{display:block;} einen Zeilenumbruch nach dem Bild. Du kannst img evtl. inline belassen oder es links floaten lassen.
Gruß
Ingo

Hallo Ingo,
sorry, dass ich nerve!

Aber ich bekomme das nicht hin...



Habe jetzt {display:block} auf {float:left} abgeändert und den "Linkbereich" vergrößert. Aber nun passiert dies:
http://ssv-junioren.de/ssv/ingo-css-bildwechsel.html

Die Linkbeschreibung wechselt beim hover in die nächste Zeile :-/


Kannst du mir helfen?



Gruß
kurzer-ssv

Hi,
ich hatte doch bereits gesagt: "wie sollte der Linktext in 10px Breite und auch noch neben die Grafik passen?"
und das passiert dann natürlich bei #wechsel a:hover { width:10px; }
Gruß
Ingo

Hi,
es verändert sich nichts. Habe die von dir genannte Größe auf 120 "hochgeschraubt" und das Problem ist das gleich.
Muss ich denn noch was im Zusammenhang damit ändern?



Gruß



Edit: DOCH ES FUNKTIONIERT! Aber im IE ist das Problem abr weiterhin vorhanden.

[ Editiert von kurzerssv am 12.01.06 20:38 ]

Hi,

momentan sind es nur 60px:
#wechsel a {
background: url(images/pfeil-10-9.gif) no-repeat;
float:left; width:60px; /* Linkbereich begrenzen */
}

Die früheren Angaben werden ja hierdurch überschrieben. Warum gibst Du übrigens die meisten Regeln mehrfach an? Da kommst Du nur durcheinander.

Und mit:
#wechsel a:hover img {
visibility: hidden;
float:left;
width:200px;
}
#wechsel a:hover { /* Workaround fuer IE 5.5 und 6 */
border:0;
float:left;
width:200px;
}
soll das Bild bei :hover dann so breit wie der Link werden und auch noch Text daneben Platz finden?
Bzw. der IE (jeder, nicht nur der 5.01) bekommt über:
* html #wechsel a:hover {
width:10px; margin-right:0; /* Workaround fuer IE 5.01 */
}
nur 10px Linkbreite für ein 200px breites Bild?

Lösche zunächst mal alle IE-Hacks, alle doppelten Angaben und was Du nicht verstehst.
Dann überlege Dir, ob eine Breitenangabe in px (bei einer so winzigen Schrift, die bestimmt viele Besucher vergrößern werden müssen) wirklich angemessen ist und Du nicht besser ganz auf eine Breitenngabe für a verzichtest.
Gruß
Ingo