HTML CSS Galerie Hilfe

x-men00

Hi ich hab folgendes Problem bei dieser Galerie:
http://www.cssplay.co.uk/menu/photo_simple
Vielleicht kann mir jemand helfen.Wäre super nett.

Ich hab mir den Quelltext raus kopiert und auch bisschen umgeschrieben und
der sieht so aus:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | A simple photograph gallery</title>
<meta name="Author" content="Stu Nicholls" />
<meta name="Keywords" content= "cssplay, css, play, Cascading, Style, Sheets, experiments, demonstrations, gallery, galleries, photo, albums, simple" />
<meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS" />
<meta name="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=" />
<meta http-equiv="imagetoolbar" content="no" />
 
 
<link rel="meta" href="http://www.cssplay.co.uk/labels.rdf" type="application/rdf+xml" title="ICRA labels" />
<meta http-equiv="pics-Label" content='(pics-1.1 "http://www.icra.org/pics/vocabularyv03/" l gen true for "http://cssplay.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0)  gen true for "http://www.cssplay.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0))' />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.cssplay.co.uk/feed.xml" />
<link rel="shortcut icon" href="http://www.cssplay.co.uk/favicon.ico" type="image/x-icon" />
<link rel="icon" href="../favicon.ico" type="image/ico" />
<style type="text/css"> 
@import url(http://www.google.com/cse/api/branding.css);
</style>
<link rel="stylesheet" media="all" type="text/css" href="http://www.cssplay.co.uk/css/default.css" />
 
<style type="text/css"> 
#info {position:relative; z-index:10;}
a, a:visited, a:hover, a:active {}
#gallery {width:750px; position:relative;}
#gallery .default {position:absolute; left:89px; top:53px; border:0px solid #888; z-index:-1;}
#gallery ul {list-style:none; padding:0; margin:0; width:180px; float:right;}
#gallery ul li {display:inline; width:60px; height:60px; float:left;}
 
#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; padding:4px; border:1px solid #fff;}
#gallery ul li a img {width:50px; height:50px; border:0;}
 
#gallery ul li a b {position:absolute; left:-9999px; display:block; width:570px; height:360px; background:#fff;}
 
#gallery ul li a:hover,
#gallery ul li a:active,
#gallery ul li a:focus {white-space:normal; outline:0;}
 
#gallery ul li a:hover b {position:absolute; left:0; top:5px; z-index:100;}
#gallery ul li a:active b,
#gallery ul li a:focus b {position:absolute; left:0; top:5px;}
 
 
#gallery ul li a b i {display:block; width:570px; height:360px; text-align:center; display:table-cell; vertical-align:middle;}
#gallery ul li a b i img {width:auto; height:auto; border:0px solid #888;}
 
 
</style>
 
<!--[if lte IE 7]>
<style type="text/css">
#gallery .default {top:55px;}
#gallery ul li a b {text-align:center; z-index:-1;}
#gallery ul li a b span {display:block; width:0; height:100%; display:inline-block; vertical-align:middle;} 
#gallery ul li a b img {margin:0 auto; display:inline-block; vertical-align:middle;}
</style>
<![endif]-->
 
 
</head>
 
<body id="www-cssplay-co-uk">
 
<div id="info">
 
 
<p class="info"></p>
<div id="gallery">
<img class="default" src="http://kultura-moebel-2.plenty-test.de/images/produkte/i11/117-2.jpg" alt="" width="400" height="300">
<ul>
    <li class="p1"><a href="#x"><img src="http://kultura-moebel-2.plenty-test.de/images/produkte/i11/117-2.jpg" alt="" /><b><span></span><i><img src="http://kultura-moebel-2.plenty-test.de/images/produkte/i11/117-2.jpg" alt="" /></i></b></a></li>
    <li class="p2"><a href="#x"><img src="http://kultura-moebel-2.plenty-test.de/images/produkte/i11/117-2.jpg" alt="" /><b><span></span><i><img src="http://kultura-moebel-2.plenty-test.de/images/produkte/i11/117-2.jpg" alt="" /></i></b></a></li>
    <li class="p3"><a href="#x"><img src="http://kultura-moebel-2.plenty-test.de/images/produkte/i11/117-2.jpg" alt="" /><b><span></span><i><img src="http://kultura-moebel-2.plenty-test.de/images/produkte/i11/117-2.jpg" alt="" /></i></b></a></li>
    <li class="p4"><a href="#x"><img src="http://kultura-moebel-2.plenty-test.de/images/produkte/i11/117-2.jpg" alt="" /><b><span></span><i><img src="http://kultura-moebel-2.plenty-test.de/images/produkte/i11/117-2.jpg" alt="" /></i></b></a></li>
    <li class="p5"><a href="#x"><img src="http://kultura-moebel-2.plenty-test.de/images/produkte/i11/117-2.jpg" alt="" /><b><span></span><i><img src="http://kultura-moebel-2.plenty-test.de/images/produkte/i11/117-2.jpg" alt="" /></i></b></a></li>
    <li class="p6"><a href="#x"><img src="http://kultura-moebel-2.plenty-test.de/images/produkte/i11/117-2.jpg" alt="" /><b><span></span><i><img src="http://kultura-moebel-2.plenty-test.de/images/produkte/i11/117-2.jpg" alt="" /></i></b></a></li>
    <li class="p7"><a href="#x"><img src="http://kultura-moebel-2.plenty-test.de/images/produkte/i11/117-2.jpg" alt="" /><b><span></span><i><img src="http://kultura-moebel-2.plenty-test.de/images/produkte/i11/117-2.jpg" alt="" /></i></b></a></li>
    <li class="p8"><a href="#x"><img src="http://kultura-moebel-2.plenty-test.de/images/produkte/i11/117-2.jpg" alt="" /><b><span></span><i><img src="http://kultura-moebel-2.plenty-test.de/images/produkte/i11/117-2.jpg" alt="" /></i></b></a></li>
 
 
 
 
</ul>
 
</div>
<br class="clear" />
<br /><br /><br />
 
</div> <!-- end of info -->
 
</body>
</html>

Alles anzeigen

Nur hab ich ein Problem die Bilder die er lädt, lädt er in dem Original maß.
Ich hab es schon so versucht:

HTML

<li class="p8"><a href="#x"><img src="http://kultura-moebel-2.plenty-test.de/images/produkte/i11/117-2.jpg" alt="" /><b><span></span><i><img src="http://kultura-moebel-2.plenty-test.de/images/produkte/i11/117-2.jpg" alt="" width="400" height="300"/></i></b></a></li>

indem ich width und height direkt reingeschrieben habe.
Aber ich glaube ich habe einen Denkfehler und man muss es im css definieren, weil so funktioniert es nicht
Vielleicht kann mir einer helfen.

Ps:
Ich hatte diese Frage schon in 2 andere Foren gepostet und in beiden konnte mir nicht geholfen werden bzw es wurde nicht drauf geantwortet :-(.
Vieleicht sind hier paar nette Leute dabei danke schon mal vorneweg.

Danke Gruß

synaptic

wenn du die frage in zig foren gleichzeitig postest is klar, dass dir keiner hilft..
crossposting is nen grosses pfui!

Bandit

Zitat von synaptic

crossposting is nen grosses pfui!

Und wird in vielen Foren mit einem *close* quittiert!

x-men00

Hi ich habe es nur in ein Forum gepostet und es war schon 48 stunden her.
Nur leider bekam ich da keine Antwort und dachte vielleicht kann mir dort keiner helfen und ich versuch es wo anders.
Ich will auf keinen Fall jemanden verärgern oder sonst wie nerven.
Es tut mir auch super leid, weil ich es nicht wusste, dass man es in so kurzen Zeitabständen nicht in einem anderen Forum probieren kann/darf.
Aber jetzt weis ich ja bescheid und mach es nicht mehr.

Heist das auch jetzt das mir keiner von euch bei meinem Problem helfen kann??

Gruß

Thonixx

Ist mir zu kompliziert und zu doof, das durchzugucken.
Lads doch lieber mal hoch und wir könnens gleich online ansehen und helfen.

Trotzdem rate ich einfach mal, mir ist folgendes aufgefallen:

HTML

#gallery ul li a b i img {width:auto; height:auto; border:0px solid #888;}

Warum machst du da nicht einfach die Höhe und die Breite rein??

und eben: Hochladen, bitte.

ach: Crossposting finde ich auch schwach, aber das wurde ja gesagt und ist mir eigentlich egal.

x-men00

Hi.
Also wegen dem Crossposting tut es mir sehr leid wie schon gesagt.
War dumm von mir.
Danke erstmal an Thonixx hab durch dein Tipp das Problem gelöst.

Hab die Galerie auch hochgeladen:
http://beton-rente.de/foto.html

Nur jetzt hab ich ein Problem: hab das mal mit IE 6-8 und Firefox getestet und es funktioniert einwandfrei.

Nur Safari, Opera und Google Chrome haben alle den selben Fehler und zwar wenn ich auf das Thumb unten klicke, rastet das Bild oben nicht ein.Es Springt einfach zu dem Default bild zurück.

Bei IE und Firefox rastet es ein und es bleibt oben angezeigt.
Kann mir jemand dafür ein Lösungsvorschlag geben?

Vielen Dank vorneweg und Grüße

Thonixx

Da hast du noch etwas, was nicht so schön ist.
Das Weiss überlappt sich nach unten, korrigier das am besten noch

EDIT:
Ich hab FF 3.6 und es funktioniert bestens, keine Fehler.

Tags