|
|||
Per :hover "gezoomte" Bilder liegen im IE6 hinter dem Vorschaubild
Hallo!
Ich bin neu im Forum -> ein herzliches Hallo! Ich hoffe, ich kann mein Problem gut geschreiben ... schauen wir mal. Ich hat eine Bildergalerie mit position:absolute erstellt. Die Bilder werden verkleinert angezeigt, beim hovern werden sie dann größer. Im IE7, Opera, Firefox funktioniert alles prächtig, nur im verflixten IE6 liegen die hover-Bilder hinter den Vorschaubildern. Ich habe schon unzählige z-index-Varianten durchprobiert. Nichts hilft. Ich bin eine ziemliche Neueinsteigerin, was CSS betrifft. Ich weiß nicht mal, ob das im IE6 überhaupt gehen kann. Aber ich denke mir, das gibts doch nicht, alles funktioniert - aber ich kriege die verd. Großbilder nicht vor die Kleinen. Hier das CSS dazu: #bilder { position:relative; width:560px;} /*damit die Bilder überhaupt im IE6 angezeigt werden*/ ul#galerie { float: left; width: 560px; padding: 250px 10px 20px 10px; background-color: #f0ebe5; border: 1px solid #996600;} ul#galerie li, ul#galerie h3, ul#galerie p {display: inline;} ul#galerie h3 img { position: absolute; padding: 1px; height: 100px; width: 100px; border: 1px solid #ccc;} ul#galerie a:hover img { z-index: 100; width: 160px; height: 160px; padding: 5px; background-color: #fff; border: 1px solid #996600;} ul#galerie a:hover { /*für die Anzeige der hover-Bilder im IE6*/ text-decoration:none; border:none;} li#bild1 h3 img {top: 25px; left: 25px;} li#bild2 h3 img {top: 25px; left: 130px;} ... li#bild1 h3 a:hover img {top: 0px; left: 0px;} li#bild2 h3 a:hover img {top: 0px; left: 100px;} ... Ich hoffe, ich habs halbwegs gut beschrieben. Vorab vielen Dank für eure Hilfe! lg Lin |
Sponsored Links |
|
|||
Hm, dieser Code funktioniert?
Reicht für Code:
ul#galerie h3 img { und dann beim a:hover den img das pos. absolute mitgeben?
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
|
|||
Funktioniert hervorragend - bis aufn IE6 eben. Muss auch gestehen, die Idee stammt nicht von mir, sondern von Andy Clarke aus dem Buch Transcending CSS. Wunderschön eine Basis zum Downloaden auf seiner Buchsite.
Denkst du, dass ich mit der vorg. Änderung mein Problem eliminiere? Werde es auf jeden Fall heute abends ausprobieren. Ich habe im Netz ja noch eine 2. Variante gefunden, die funktioniert auch im IE6 (ältere teste ich zugeg. nicht mehr). mit visible:hidden usw. Würde ich "nachbauen" (und nachvollziehen - das ist mir immer wichtig) können, da wird aber beim Thumb nur der Ausschnitt gezeigt und nicht verkleinert. |
|
||||
Ich habe Deinen Code nur überflogen, aber wenn der IE < 7 bei Kindelementen von gehoverten Links nicht das tut, was gute Browser tun, sollte man immer folgendes checken: Pure CSS Popups Bug - IE Bug
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
||||
Ups, ich habe jetzt doch mal genauer hingeschaut, das von mir genannte Problem wird bereits berücksichtigt, und Du hast ja auch eh ein anderes geschildert. Es klingt nach dem typischen verqueren Stacking Context des IE - poste mal Dein HTML, dann dürfte sich das Problem relativ schnell lösen lassen.
Edit: Was helfen müsste: pos. rel. für a:hover, das hebelt den besagten verqueren Stacking Context aus (allerdings werden dann wahrscheinlich weitere Anpassungen nötig sein).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) Geändert von heiko_rs (03.12.2008 um 18:28 Uhr) |
|
|||
Ich stelle am Besten gleich das ganze html rein. Die Bildergalerie ist bezeichnenderweise im div "bilder". Die Liste habe ich "galerie" genannt.
Code:
<body id="startseite"> <div id="wrapper"> <div id="kopfbereich"> <div id="header"> </div> <div id="navigation"> <ul> <li id="navihor01"><a href="index.html">Home</a></li> </ul> </div> </div> <div id="hauptbereich"> <div id="left"> </div> <div id="right"> <div id="bilder"> <ul id="galerie"> <li id="bild1"><h3><a href="#bild1"><img src="galerie/1-1.jpg" alt="" />Bild 1</a></h3><p>Erklärung zu Bild 1 </p></li> <li id="bild2"><h3><a href="#bild2"><img src="galerie/1-2.jpg" alt="" />Bild 2</a></h3><p>Erklärung zu Bild 2 </p></li> </ul> </div> <!-- end bilder --> </div> <!-- end right --> <div id="center"> <ul> <li id="naviver01"><a href="x.html">Text</a></li> </ul> </div> </div> <div id="fussbereich"> <div id="footer"> </div> </div> </div> </body> |
Sponsored Links |
|
||||
Edit: Oh Mann, heute ist nicht mein Tag Müll gelöscht, folgende Lösung: Momentan werden die img per pos. abs. nach oben gestellt. Mache das aber mit bereits a, und gib diesem beim Hovern z-index: 1;, dann wird der gehoverte Link immer über den übrigen stehen.
(Falls der IE 5.0 für Dich wichtig ist, werden weitere Anpassungen nötig sein.)
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) Geändert von heiko_rs (03.12.2008 um 20:16 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten | mazzo | CSS | 10 | 05.04.2012 18:32 |
Problem im IE7: div hinter input platzieren per float | Heavenfighter | CSS | 2 | 19.06.2007 16:50 |
Problem mit WordPress und dem Bilder Upload | Maxefix | Serveradministration und serverseitige Scripte | 0 | 19.12.2006 15:58 |
Problem mit CSS - Attribute für hover | tzepf | CSS | 0 | 09.12.2006 17:56 |
Scrollbares Textfeld mit purem CSS | Dancer | CSS | 6 | 24.01.2005 16:58 |