mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 25.04.2024 22:46 Benutzername: Passwort: Auto-Login

Thema: Bei Hover über Bild erscheint Div -> ie6 Problem... vom 06.01.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Bei Hover über Bild erscheint Div -> ie6 Problem...
Seite: 1, 2  Weiter
Autor Nachricht
denise2302
Threadersteller

Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht: Weiblich
Verfasst Di 06.01.2009 11:29
Titel

Bei Hover über Bild erscheint Div -> ie6 Problem...

Antworten mit Zitat Zum Seitenanfang

Hallo!

Ich möchte bei einer Homepage den Effekt einbauen, dass wenn man über ein Bild fährt, es größer in einem Div, der darüber liegt, angezeigt wird.

Und zwar so:

css:
Code:

a.box span { display: none; }
a.box img { cursor: default; }
a.box:hover span { display: block; }
a.box span div { position: absolute; margin: 25px 0 0 100px; z-index: 999; }
a.box span div img { border: 3px solid #ee8003; }


html:
Code:

<a class="box" href="#"><span><div><img src="images/content/profil_box.jpg" /></div></span><img src="images/content/profil.jpg" border="0" /></a>


Im Firefox und IE7 klappt das soweit gut, aber im IE6 erscheint das Fenster nicht, dabei ist doch aber der hover auf a gelegt? Was mache ich falsch? Hat jemand eine Idee?

LG Denise[/quote]
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 06.01.2009 12:50
Titel

Antworten mit Zitat Zum Seitenanfang

Erstmal, ein Hyperlink darf nur inline Element enthalten.

http://de.selfhtml.org/html/referenz/elemente.htm#a

Zudem ist das div Element sowieso sinnlos.

Und dann schau dir das mal an: http://qrayg.com/experiment/hig/
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
denise2302
Threadersteller

Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht: Weiblich
Verfasst Di 06.01.2009 13:05
Titel

Antworten mit Zitat Zum Seitenanfang

ja stimmt, den div brauch man ja nich.... aber im prinzip müsste das doch so trotzdem auch mit ie6 gehen? finde die lösung eigtl ganz gut, da es klein bleibt... wenn bloß der blöde ie6 nicht wieder rumspacken würde...

mein code ist jetzt so:

css
Code:

a.box img { cursor: default; }
a.box span { display: none;  }
a.box:hover span, a.box:focus span { display: block; }
a.box span img { position: absolute; margin: 25px 0 0 100px; z-index: 999; border: 3px solid #ee8003; }


html
Code:

<a class="box" href="#"><span><img src="images/content/profil_box.jpg" /></span><img src="images/content/profil.jpg" width="320" height="60" border="0" /></a>
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 06.01.2009 13:30
Titel

Antworten mit Zitat Zum Seitenanfang

Füg mal eine hover Eigenschaft für das Hyperlink Element hinzu, Schriftfarbe, Hintergrundfarbe, irgendwas...

Code:
a:hover { background: #fff; }


Eine Eigenheit des IE6 Lächel


Zuletzt bearbeitet von m am Di 06.01.2009 13:30, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
denise2302
Threadersteller

Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht: Weiblich
Verfasst Di 06.01.2009 13:34
Titel

Antworten mit Zitat Zum Seitenanfang

ja, das hatte ich auch schon gelesen, hat nix geholfen.

Ich habs jetzt mal nach deinem Beispiel probiert, das heißt, mein Code sieht so aus:

css
Code:

.box a img { cursor: default; }
.box a .picture { display: none;  }
.box a:hover .picture { display: block; }
.picture { position: absolute; margin: 25px 0 0 100px; border: 3px solid #ee8003; }

* html .box a:hover { display: block; font-size: 100%; z-index: 1;}


html
Code:

<div class="box"><a href="#"><img class="picture" src="images/content/profil_box.jpg" /><img src="images/content/profil.jpg" width="320" height="60" border="0" /></a></div>


Funktioniert im ff und ie7 einwandfrei... Nun erscheint das vergrößerte Bild auch im ie6, allerdings geht es dann auch nicht mehr weg..?? <-- Schuld!

Ich versteh das echt nicht, eigtl muss das doch dann auch wieder weggehen wenn ich mit der Maus vom Bild gehe?

LG


Zuletzt bearbeitet von denise2302 am Di 06.01.2009 13:35, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 06.01.2009 13:41
Titel

Antworten mit Zitat Zum Seitenanfang

Zitat:
eigtl muss das doch dann auch wieder weggehen wenn ich mit der Maus vom Bild gehe?


Eigentlich ja *zwinker* IE6 usw *ha ha*

Du darfst die Formatierungen für .picture nicht in der extra Klasse aufführen sondern
musst sie zu ".box a:hover .picture" hinzufügen.


Zuletzt bearbeitet von m am Di 06.01.2009 13:43, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
denise2302
Threadersteller

Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht: Weiblich
Verfasst Di 06.01.2009 14:11
Titel

Antworten mit Zitat Zum Seitenanfang

So, nun habe ich die Klassen zusammengefügt, also das von der picture klasse mit ins hover getan... Nun bleibt das Bild auch da, bloß wenn ich runter gehe kommt der normale border Rahmen eines verlinkten Bildes... also die normale Farbe... Also auch noch nicht ganz die Lösung.. ich kann aber auch keinen Fehler finden irgendwie... sehr sehr komisch, dieser ie6... *Whaazzzz uppp?*
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 06.01.2009 14:16
Titel

Antworten mit Zitat Zum Seitenanfang

Zeig das mal irgendwo online bitte.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen hover-Button/hover-Bild wird darunter eingefügt
CSS - Hover / Link / Bild - Bild verschwindet nach Klick
Textbox die erscheint beim Rollover über Bild !!!
CSS-Problem: Unerklärlicher Rahmen erscheint
Bild wackelt bei img:hover
Bild mit hover Textelementen
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.