zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Per :hover "gezoomte" Bilder liegen im IE6 hinter dem Vorschaubild

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.12.2008, 08:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.12.2008
Beiträge: 16
Euphoria befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.12.2008, 12:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.12.2008
Beiträge: 16
Euphoria befindet sich auf einem aufstrebenden Ast
Standard

Habe gerade bemerkt, dass ich den Code falsch eingestellt habe . Sorry, kommt nicht mehr vor.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.12.2008, 15:41
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Hm, dieser Code funktioniert?

Reicht für

Code:
ul#galerie h3 img {
nicht auch position:relative aus?

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
Mit Zitat antworten
  #4 (permalink)  
Alt 03.12.2008, 16:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.12.2008
Beiträge: 16
Euphoria befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 03.12.2008, 16:47
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.)
Mit Zitat antworten
  #6 (permalink)  
Alt 03.12.2008, 16:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.12.2008
Beiträge: 16
Euphoria befindet sich auf einem aufstrebenden Ast
Standard

Bevor ich was falsch verstehe, frage ich lieber dumm nach:
Was bedeutet "Kindelement" in diesem Zusammenhang bzw. im Zusammenhang mit CSS?
Mit Zitat antworten
  #7 (permalink)  
Alt 03.12.2008, 16:55
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Ein Element, das in einem anderen enthalten ist - z.B. Dein img ist Kindelement von a (dieses ist also Elternelement von img).
__________________
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.)
Mit Zitat antworten
  #8 (permalink)  
Alt 03.12.2008, 17:13
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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 17:28 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 03.12.2008, 17:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.12.2008
Beiträge: 16
Euphoria befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 03.12.2008, 18:45
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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 19:16 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten mazzo CSS 10 05.04.2012 17:32
Problem im IE7: div hinter input platzieren per float Heavenfighter CSS 2 19.06.2007 15:50
Problem mit WordPress und dem Bilder Upload Maxefix Serveradministration und serverseitige Scripte 0 19.12.2006 14:58
Problem mit CSS - Attribute für hover tzepf CSS 0 09.12.2006 16:56
Scrollbares Textfeld mit purem CSS Dancer CSS 6 24.01.2005 15:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:18 Uhr.