CSS-Popups, ein Problem mit IE, ein anderes mit z-index

[Shepard]

Hallo liebe Helfer,

ich möchte eine Bildergalerie mit folgender Funktionalität und Design erstellen:

Es gibt eine Reihe von Thumbnails mit kurzem Untertitel.

Beim Hovern eines Thumbnails wird das zugehörige Bild in mittlerer Größe auf der gleichen Seite eingeblendet, und zwar so, das es von der Thumbnailreihe teilweise überdeckt wird.

Bei Klick auf ein Thumbnail wird eine neue Seite geladen, die z.B. das Bild in voller Pracht und etwas beschreibenden Text enthält.

Mein Ansatz:

  
<ul>  
  <li>  
    <a href="Ziel.htm">  
      <img src="Thumbnailgrafik.jpg" alt="...">  
      Linktext (gleichzeitig Untertitel für Thumbnail)  
      <span><img src="Das-Bild-mittelgross.jpg" alt="..."></span>  
    </a>  
  </li>  
  <!-- weitere <li> mit Thumbnails -->  
<ul>  

Das Popup-Verhalten und die gewünschte Überlappung möchte ich über folgende CSS-Auszeichnung erreichen:

  
#bildmenu {  
  position:absolute; top:130px; left:630px; height:480px;  
  padding:0; margin:0;  
  list-style:none;  
}  
  
/* Die Thumbnailgrafik: */  
#bildmenu li a>img {  
 width:120px; height:79px;  
 position:relative; top:0; z-index:10;  
}  
  
/* nicht sichtbares, mittelgroßes Bild */  
#bildmenu li a span img { width:0; height:0; border-width:0; z-index:0; }  
  
/* beim Hovern eingeblendetes, mittelgroßes Bild */  
#bildmenu li a:hover span img {  
  position:absolute;  
  top:-10px; left:-610px; width:620px; height:410px;  
  z-index:0;  
}  

Ein vollständiges Beispiel habe ich hier hochgeladen.

Problem 1:
Im IE6 erscheint beim Hover das Popup-Bild nicht. Ist mir absolut rätselhaft, weil ich diese Technik schon öfter erfolgreich eingesetzt habe, irgendwie peile ich nicht, was ich hier anders/falsch mache. In Opera 9 und Firefox 1.5 klappt es prima.

Problem 2:
Wie gewünscht, wird das beim Hovern erscheinende mittelgroße Bild von den Thumbnail_grafiken_ überlagert, der eigentliche Linktext jedoch wird halb überdeckt. Mir ist bewußt, daß bei Verschachtelung von Elementen ein neuer lokaler z-index Stapel für die Kinder erzeugt wird, aber die richtigen Schlußfolgerungen konnte ich daraus noch nicht ziehen.

Danke für jede Hilfe
Shepard

[Detlef G.]

Hallo Shepard

  

> ...  
> /* Die Thumbnailgrafik: */  
> #bildmenu li a>img {  

~~~                 ^  
Damit kann der IE nichts anfangen.  
~~~css
  

>  ...  
>  position:relative; top:0; z-index:10;  

Diese Eigenschaften solltest du dem a, nicht dem img geben.

  

> /* beim Hovern eingeblendetes, mittelgroßes Bild */  
> #bildmenu li a:hover span img {  

Darauf reagiert der IE nur, wenn sich auch eine Eigenschaft des a selbst ändert.

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo Ingrid,

überlege gefälligst, bevor du auf absenden drückst! ;)

...
position:relative; top:0; z-index:10;

> Diese Eigenschaften solltest du dem a, nicht dem img geben.  
  
Falsch, nicht genau genug hingesehen, beim a selbst nützen sie nichts, weil sich das Bild, das beim hover erscheinen soll auch darin befindet. Allerdings muss der Linktext auch diese Eigenschaften erhalten, wenn er nicht von dem Bild überdeckt werden soll.  
  
Ich frage mich allerdings, warum das mittelgroße Bild extra in ein span gepackt ist?  
  
  
  
Auf Wiederlesen  
Detlef  

-- 
- Wissen ist gut  
- Können ist besser  
  
- aber das Beste und Interessanteste ist der Weg dahin!

[Shepard]

Hallo Detlef,

Hallo Ingrid,
überlege gefälligst, bevor du auf absenden drückst! ;)

das ist komisch, zuletzt hat mich hier schon mal jemand als Ingrid angeredet, warum? Real heiße ich Roland, aber da gibt es hier glaube ich schon einige, Shepard ist ein uralter (real-life)-Nick, den ich hier wieder verwende.

Interessanterweise heißt meine Freundin (ah, fast Ex-Freundin...) Ingrid, aber das kannst Du ja nicht wissen.

Nun klär mich schon auf!:-)

Diese Eigenschaften solltest du dem a, nicht dem img geben.

Falsch, nicht genau genug hingesehen, beim a selbst nützen sie nichts, weil sich das Bild, das beim hover erscheinen soll auch darin befindet.

Ja, das gab _sehr_ seltsame Ergebnisse..

Allerdings muss der Linktext auch diese Eigenschaften erhalten, wenn er nicht von dem Bild überdeckt werden soll.

War auch mein Gedanke, aber wie? Er ist ja kein eigenständig über CSS selektierbares Element.

Ich frage mich allerdings, warum das mittelgroße Bild extra in ein span gepackt ist?

Damit ich es über CSS unabhängig von dem Thumbnail-img selektieren kann!

Irgendein Tip, warum der IE überhaupt nicht mitspielt? Der Child-Selektor kann es nicht sein, der dient ja nur der Formatierung des Thumbnails.

Shepard

[Patrick Andrieu]

Hallo Shepard!

Hallo Ingrid...
überlege gefälligst, bevor du auf absenden drückst! ;)

das ist komisch, zuletzt hat mich hier schon mal jemand als Ingrid angeredet, warum?

Detlef hat sich selbst als Ingrid angeredet. Das hat hier Tradition, zum Beispiel wenn man kurz hintereinander postet, weil man im ersten Post etwas vergessen hat oder Ähnliches.

Tröste Dich: Ich weiß es selbst auch seit wenigen Monaten ;)

Viele Grüße aus Frankfurt/Main,
Patrick

[Shepard]

Hallo Patrick,

genau, Du warst das vor kurzem!

Detlef hat sich selbst als Ingrid angeredet. Das hat hier Tradition, zum Beispiel wenn man kurz hintereinander postet, weil man im ersten Post etwas vergessen hat oder Ähnliches.

Ihr seid schon ein komisches Völkchen! Aber der Name Ingrid für so was, hehe, das hat schon was (aus meiner ganz privaten Sicht:-)

Danke für die Aufklärung!

Shepard

P.S.: Hat sich das hier durch Zufall ergeben, oder steckt da irgendwie ein tieferer (Un)Sinn hinter? (Nein, ich habe die Archivsuche noch nicht bemüht!)

[Patrick Andrieu]

Hallo Shepard!

P.S.: Hat sich das hier durch Zufall ergeben, oder steckt da irgendwie ein tieferer (Un)Sinn hinter? (Nein, ich habe die Archivsuche noch nicht bemüht!)

Ich auch nicht, aber in der Zwischenzeit kurz mal da reingeschaut!

Viele Grüße aus Frankfurt/Main,
Patrick

[Shepard]

Ich auch nicht, aber in der Zwischenzeit kurz mal da reingeschaut!

Ich fall vom Sessel, "die Ingrid machen", das ist einfach zu gut!

Danke schön!
Shepard

[Shepard]

Hallo Detlef,

Allerdings muss der Linktext auch diese Eigenschaften erhalten, wenn er nicht von dem Bild überdeckt werden soll.

Jetzt hab ich es! Ich habe den Linktext in <em></em> eingebettet und diesem einen z-index gegeben.

Bleibt nur noch: Warum funktioniert das Popup nicht im IE?

Shepard

[Shepard]

Wegen meines persönlichen Backgrounds verzichte ich darauf, hier "Hallo Ingrid" zu sagen!

Hier der Link zu der geänderten Version gemäß meinem vorherigen Post.

Shepard

[Mathias Brodala]

Hallo Shepard.

Wegen meines persönlichen Backgrounds verzichte ich darauf, hier "Hallo Ingrid" zu sagen!

Dann schreib doch „Hallo Gunnar™!“.

Einen schönen Sonntag noch.

Gruß, Mathias

[Shepard]

Hallo Mathias,

Dann schreib doch „Hallo Gunnar™!“.

den Teufel werde ich tun und mich in irgendwelche internen Angelegenheiten einmischen:-)

Schönen Abend
Separd

[Mathias Brodala]

Hallo Shepard.

Dann schreib doch „Hallo Gunnar™!“.
den Teufel werde ich tun und mich in irgendwelche internen Angelegenheiten einmischen:-)

Wieso? Ist doch öffentlich.

Einen schönen Sonntag noch.

Gruß, Mathias

[Detlef G.]

Hallo Shepard

Jetzt hab ich es! Ich habe den Linktext in <em></em> eingebettet und diesem einen z-index gegeben.

Ich hätte es wohl eher anders gemacht (alles nur schnell zusammengeschrieben, also ungetestet und eventuell noch fehlerhaft):

    <a href="Ziel.htm">  
      <span><img src="Thumbnailgrafik.jpg" alt="...">  
      Linktext</span>  
      <img src="Das-Bild-mittelgross.jpg" alt="...">  
    </a>  

Dann im CSS:

  
/* nicht sichtbares, mittelgroßes Bild */  
#bildmenu li a img {  
  width:0;  
  height:0;  
  border-width:0;  
}  
  
/* beim Hovern eingeblendetes, mittelgroßes Bild */  
#bildmenu li a:hover img {  
  position:absolute;  
  top:-10px; left:-610px; width:620px; height:410px;  
  z-index:0;  
}  
  
/* Thumbnailgrafik und Linktext: */  
#bildmenu li a span {  
 position:relative; top:0; z-index:10;  
}  
  
/* Die Thumbnailgrafik (eventuell ist zzusätzlich noch ", #bildmenu li a:hover span img" nötig): */  
#bildmenu li a span img {  
  width:120px;  
  height:79px;  
  position:static;  
}  

Bleibt nur noch: Warum funktioniert das Popup nicht im IE?

Wie ich bereits schrieb, ignoriert der IE Änderungen eines Kindelements beim hovern, wenn er nicht dazu gebracht wird, sich die Sache noch einmal zu überlegen. Dazu ist es erforderlich, eine Eigenschaft des Links selbst zu ändern, auch wenn diese Änderung nicht zu sehen ist.

Eventuell reicht bereits:

/* der Link selbst */  
#bildmenu li a {  
  background-color:#ffffff;  
}  
  
#bildmenu li a:hover {  
  background-color:#fff;  
}  

Auf Wiederlesen
Detlef

[Shepard]

Hallo Detlef,

diese Konstruktion von Dir:

<a href="Ziel.htm">
      <span><img src="Thumbnailgrafik.jpg" alt="...">
      Linktext</span>
      <img src="Das-Bild-mittelgross.jpg" alt="...">
    </a>

werde ich auf jeden Fall mal im Hinterkopf behalten, das könnte auch andere Vorteile haben. Meine Kapselung ist natürlich ein Mißbrauch des <em>-Elements, aber diese ganzen CSS-Hover und -Popup-Geschichten  nutzen ja Verhaltensweisen von HTML/CSS, die bestimmt nicht für so was gedacht waren:-)

Wie ich bereits schrieb,

und ich nicht in seiner vollen Bedeutung erfaßt hatte,

ignoriert der IE Änderungen eines Kindelements beim hovern, wenn er nicht dazu gebracht wird, sich die Sache noch einmal zu überlegen.

Ich dachte das hätte ich (wie bei meinen früheren Versuchen mit dieser Technik), aber natürlich hast Du Recht, es muß der Link selbst sein, dessen Eigenschaften sich ändern, damit IE das schnallt.

Damit sind meine Problemchen gelöst, ich bedanke mich ganz herzlich und wünsche einen schönen Abend!

Shepard

[Detlef G.]

Hallo Shepard

ignoriert der IE Änderungen eines Kindelements beim hovern, wenn er nicht dazu gebracht wird, sich die Sache noch einmal zu überlegen.

Ich dachte das hätte ich (wie bei meinen früheren Versuchen mit dieser Technik), aber natürlich hast Du Recht, es muß der Link selbst sein, dessen Eigenschaften sich ändern, damit IE das schnallt.

Dieses IE-Problem fällt oft überhaupt nicht auf, weil meist sowieso irgendeine Eigenschaft des Links selbst beim hovern geändert wird, sei es die Hintergrundfarbe oder die Rahmen.

Auf Wiederlesen
Detlef