Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 09.05.2011, 00:21
adipics.de adipics.de ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.05.2011
Beiträge: 1
adipics.de befindet sich auf einem aufstrebenden Ast
Standard CSS - Galerie funktioniert in Chrome nicht richtig

Hallo alle zusammen,

habe gerade festgestellt, dass meine Galerie auf Chrome nicht richtig läuft.

So wie es sein soll und auf Firefox und IE auch perfekt läuft:

In der Galerie gibts unten rechts die kleinen Thumbs. Fährt man mit der Maus drüber, wird oben rechts eine kleine Vorschau angezeigt. Klickt man auf einen Thumb, erscheint das Bild in groß links und bleibt dort, bis ein anderer Thumb angeklickt wird. Die Vorschau bei "hover" in dem kleinen Vorschaufenster oben rechts funtktioniert weiter, während ein Bild in groß angezeigt wird.

Wie gesagt, in FF und IE kein Problem, nur auf Chrome verschwindet das große Bild wieder, wenn man die Maustaste los lässt, soll aber weiter angezeigt werden. Fehlt da ein "visited"? Habs schon probiert, aber wurde nix besser...

Hier mal ne URL: adipics.de - Moments in pictures

Und der CSS Code zur Galerie: (OR is oben rechts, UR is unten rechts usw...)

#galerie /*Gesamtgröße*/ {width:800px; height:380px; position:relative;padding:5px 0; background:none; margin:0 auto 20px auto;}
#galerie em /*OR Größe*/ {display:block; width:222px; height:150px; position:absolute; top:0; right:0; border:1px solid #ddd;}
#galerie span /* Links Größe */ {display:block; width:570px; height:382px; position:absolute; top:0; left:0; border:1px solid #ddd;}

#galerie b#thumbs /*UR Größe*/ {display:block; width:213px; height:214px; overflow:auto; float:right; margin-top:153px; border:1px solid #ccc; border-width:1px 1px 1px 1px; padding:5px;}
#galerie b#thumbs a /*UR ThumbsHG*/ {display:block; float:left; margin:0 10px 13px 0; background:#f8f8ff; width:53px; height:53px; border:1px solid #000;}
#galerie b#thumbs a img /*UR Bildgröße*/ {width:53px; height:53px; border:0;}
#galerie b#thumbs a:hover /*UR HG Tumbs bei hover*/ {border:1px dotted #ccc; background: url(pics/galeriethumbhg.jpg);}
#galerie b#thumbs a:active /*UR Thumbs bei klick*/{border:1px solid url; background: url(pics/galeriethumbhg.jpg); outline:0;}
#galerie b#thumbs a:focus /*UR Thumbs bei klick*/{border:1px solid url; background: url(pics/galeriethumbhg.jpg); outline:0;}
#galerie b#thumbs a:hover img /*UR HG Thumbs bei hover*/{display:block; position:absolute; background:; z-index:500;}
#galerie b#thumbs a:active img /*UR HG Thumbs bei klick*/ {display:block; position:absolute; background:#aaa; z-index:100;}
#galerie b#thumbs a:focus img /*UR HG Thumbs bei klick*/ {display:block; position:absolute; background:#aaa; z-index:100;}

#galerie b#thumbs a:hover img.breit /*OR Breitbilder*/ {width:216px; height:144px; right:3px; top:3px; border:1px solid #333;}
#galerie b#thumbs a:hover img.hoch /*OR Hochkantbilder*/ {width:96px; height:144px; right:63px; top:3px; border:1px solid #333;}

#galerie b#thumbs a:active img.hoch, #galerie b#thumbs a:focus img.hoch /*links Hochkantbilder groß*/ {width:250px; height:376px; left:171px; top:3px; border:1px solid #333;}
#galerie b#thumbs a:active img.breit, #galerie b#thumbs a:focus img.breit /*links Breitbilder groß*/{width:564px; height:376px; left:3px; top:3px; border:1px solid #333;}

Wäre klasse wenn mir jemand helfen könnte

Greeeeeeetz

Adi
Mit Zitat antworten
Sponsored Links