|
|||
CSS Gallery Problem bei Mausklick da bleiben
Hi,
versuche jetzt schon den ganzen Tag eine CSS-Gallery zu erstellen, leider kriege ich nichts so recht auf die reihe. Die Gallery sollte bei Browser Chrome, FF und IE gleichmäßig angezeigt werden und beim anklicken auf ein Thumbtail sollte das Bild sichtbar bleiben und nicht nur ein Hover sein. leider funktioniert es nur mit dem FF einigermaßen und auch relativ buggy. Ich hoffe mir kann jemand bei dem Problem weiterhelfen. HTML-Code:
<head> <style type="text/css"> a, a:visited, a:hover { } #gallery { position:relative; width:700px; height:670px; background: #FFFFFF; border:1px solid #CCC; margin:3em auto; margin-left:10; margin-right:auto; } #gallery a.pics { float:left; display:inline; padding:8px 8px; color:#000; text-decoration:none; cursor:pointer; } #gallery a.pics img.thumb { display:block; border:1px solid #CCC; width:96px; height:71px; } #gallery a.pics span { display:none; width:680px; text-align:center; } #gallery a.pics span img { margin:10px auto; width:680px; border:none; } #gallery a.pics:hover { white-space:normal; /* IE */ } #gallery a.pics:hover img.thumb { border:1px solid #000; } #gallery a.pics:hover span { display:block; position:absolute; left:8px; top:90px; z-index:10; height:450px; } #gallery a.pics:focus { outline:0; } #gallery a.pics:focus img.thumb { border:1px solid #000; } #gallery a.pics:focus span { display:block; position:absolute; left:8px; top:90px; z-index:5; outline:0; height:450px; } #gallery span.info { display:block; position:absolute; left:8px; top:100px; z-index:1; outline:0; height:450px; } #gallery span.info a { color:#000; } #gallery span.info a:hover { text-decoration:none; } </style> </head> <body> <div id="gallery"> <a class="pics" href="#nogo"><img class="thumb" src="http://img.xrmb2.net/images/345274.png" alt=""> <span><img src="http://img.xrmb2.net/images/345274.png" alt="" title=""><br></span> </a> <a class="pics" href="#nogo"><img class="thumb" src="http://img.xrmb2.net/images/405771.png" alt=""> <span><img src="http://img.xrmb2.net/images/405771.png" alt="" title=""><br></span> </a> <a class="pics" href="#nogo"><img class="thumb" src="http://img.xrmb2.net/images/711597.png" alt=""> <span><img src="http://img.xrmb2.net/images/711597.png" alt="" title=""><br></span> </a> <a class="pics" href="#nogo"><img class="thumb" src="http://img.xrmb2.net/images/279746.png" alt=""> <span><img src="http://img.xrmb2.net/images/279746.png" alt="" title=""><br></span> </a> <span class="info"><img src="http://img.xrmb2.net/images/345274.png" alt="" width="680" title=""></span> </div> </body> |
Sponsored Links |
|
||||
Hallöchen,
ich habe vor einiger Zeit mal folgendes Beispiel hier gepostet: - Bildergalerie mit :hover und :target Vielleicht hilft dir das weiter. Mit freundlichen Grüßen, lotti
__________________
Empfehlenswerte Links: jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint |
Sponsored Links |
|
|||
Hab mich jetzt mal heran gewagt und die Gallery ausprobiert, leider wird sie nicht so angezeigt wie im JSFiddle, sondern die Thumbtails und das Hauptbild liegen nicht mehr sauber auf einer Linie sondern zueinander verschoben.
Ich blick in den CSS-Code ehrlich gesagt garnicht durch. Begriffe wie "frist und last:child" ... höre ich auch zum ersten mal. Jede mir logische Veränderung um das ganze wieder gerade zu rücken, verunstaltet die ganze Gallery ins unkenntliche. Leider bin ich noch nicht so der CSS-Geek. Vielleicht kann mir noch einer den Hinweis geben, wie ich die Gallery gerade bekommen könnte? Vielen Dank! |
|
||||
Dann wäre es gut, wenn du uns deinen Code mal zeigst.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
|
|||
Selbstverständlich! Sorry, wo hatte ich nur mein Kopf gelassen.
So sieht die ganze Geschichte aus: HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #gallery ul { list-style: none; } #gallery ul li, #gallery ul li a { display: block; } #gallery ul li:not(:first-child) { float: left; border: 1px solid #FFF; } #gallery ul li a { text-decoration: none; color: #FFF; background-color: lightblue; } #gallery ul li a { opacity: 0.6; } #gallery ul li:not(:first-child) a:first-child { padding: 10px; } #gallery ul li a:last-child { position: absolute; top: 42px; left: 1px; width: 188px; height: 188px; text-align: center; z-index: 1; } #gallery ul li:not(:first-child) a:last-child { display: none; } #gallery ul li:not(:first-child):hover a, #gallery ul li:not(:first-child):target a { display: block; opacity: 1; } #gallery ul li:not(:first-child) a:first-child:hover + a { z-index: 2; } </style> </head> <body> <div id="gallery"> <ul> <!-- large --> <li> <a href="#1">#default</a> </li> <!-- thumbs --> <li id="li1"> <a href="#li1">#1</a> <a href="#">Bild #1</a> </li> <li id="li2"> <a href="#li2">#2</a> <a href="#">Bild #2</a> </li> <li id="li3"> <a href="#li3">#3</a> <a href="#">Bild #3</a> </li> <li id="li4"> <a href="#li4">#4</a> <a href="#">Bild #4</a> </li> <li id="li5"> <a href="#li5">#5</a> <a href="#">Bild #5</a> </li> </ul> </div> </body> </html> |
|
|||
Hallo,
ich frage mich, warum die Welt mit jsfiddle bestraft wurde. Und mit Strategen, die auf dortigen Quelltext verweisen, ohne die für Nichtkenner benötigten Hinweise zu geben. Im Beispiel Quelltext ist links unter "Choose Framework" die Option "Normalized CSS" angekreuzt. Dadurch werden zusätzlich css-Angaben generiert und berücksichtigt, die im Beispiel css fehlen. Dadurch kommt es genau zu dem Ergebnis, wenn du nur den in den beiden Fenstern angezeigten html- und css-quelltext benutzt. Wenn du den Haken bei "Normalized CSS" entfernst und dann mittels "Run" oben ein neues Ergebnis erzeugst, ist die Ansicht wie bei dir. Gruss MrMurphy |
|
|||
Vielen Dank
HTML-Code:
* { margin:0; padding:0; } Hoffen wir, dass die restlichen Anpassungen reibungsloser klappen werden. Gibt es ggf. noch Möglichkeit bei noch mehr Thumbnails, diese in einer neuen Reihe anzuzeigen, quasi zu wrappen, sobald die Reihe breiter wie das Hauptbild wird? Geändert von Franziskaner (09.01.2013 um 06:47 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem Browserweiche IE CSS | 00001 | CSS | 5 | 24.09.2010 11:23 |
Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript | chrisol_76 | CSS | 2 | 21.07.2008 18:37 |
Css und Steam Problem | justinlenz | Offtopic | 3 | 27.03.2008 22:58 |
CSS Tips & Tricks | Webnauts | Ressourcen | 0 | 26.08.2006 00:04 |
Dringend: CSS Problem! | zero | CSS | 19 | 31.12.2005 19:34 |