Sie sind vermutlich noch nicht im Forum angemeldet - Klicken Sie hier um sich kostenlos anzumelden  
logo
Sie können sich hier anmelden
Dieses Thema hat 8 Antworten
und wurde 1.503 mal aufgerufen
 Fragen zu (X)HTML und CSS ?
kurzerssv Offline



Beiträge: 9

08.01.2006 19:33
RE: Bildwechsel antworten

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





Unbenannt
















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

1ngo Offline




Beiträge: 429

09.01.2006 12:31
#2 RE: Bildwechsel antworten

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

kurzerssv Offline



Beiträge: 9

11.01.2006 20:17
#3 RE: Bildwechsel antworten

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

kurzerssv Offline



Beiträge: 9

11.01.2006 20:19
#4 RE: Bildwechsel antworten

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



Gruß
Kurzer

1ngo Offline




Beiträge: 429

11.01.2006 22:26
#5 RE: Bildwechsel antworten

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

kurzerssv Offline



Beiträge: 9

12.01.2006 17:58
#6 RE: Bildwechsel antworten

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

1ngo Offline




Beiträge: 429

12.01.2006 20:01
#7 RE: Bildwechsel antworten

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

kurzerssv Offline



Beiträge: 9

12.01.2006 20:35
#8 RE: Bildwechsel antworten

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 ]

1ngo Offline




Beiträge: 429

13.01.2006 17:36
#9 RE: Bildwechsel antworten

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

 Sprung  
Xobor Forum Software von Xobor | Forum, Fotos, Chat und mehr mit Xobor