zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Gallery Problem bei Mausklick da bleiben

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.01.2013, 03:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.01.2013
Beiträge: 5
Franziskaner befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.01.2013, 11:07
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.01.2013, 14:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.01.2013
Beiträge: 5
Franziskaner befindet sich auf einem aufstrebenden Ast
Standard

Oh, ja - super, vielen Dank!


Sehr schön gelöst, genau so etwas hab ich mir vorgestellt.
Mit Zitat antworten
  #4 (permalink)  
Alt 08.01.2013, 07:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.01.2013
Beiträge: 5
Franziskaner befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
  #5 (permalink)  
Alt 08.01.2013, 07:35
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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?
Mit Zitat antworten
  #6 (permalink)  
Alt 09.01.2013, 03:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.01.2013
Beiträge: 5
Franziskaner befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #7 (permalink)  
Alt 09.01.2013, 06:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 09.01.2013, 06:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.01.2013
Beiträge: 5
Franziskaner befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank

HTML-Code:
* {
    margin:0;
    padding:0;
}
Hat geholfen

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)
Mit Zitat antworten
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
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


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