css: hover img gallery

muhtsch · 04.06.2013

Hallo,
ich habe nur Grundkenntnisse in html/css ..habe einen 4Wochen Kurs belegt.
Auf meiner website habe ich eine lightbox eingebaut, die möchte ich tauschen gegen eine "hover img gallery". Das tutorial habe ich mir hier
durchgelesen. Nun möchte ich die thumbs aber nicht an der Seite sondern oben (wie auf der Demoseite gezeigt)
Kriege aber nicht raus wem und wo ich die Anweisung geben soll, damit die thumbs, wie auf dem Demobild oben sind...

Habe meine css größenmäßig etwas verändert und die sieht jetzt so aus:

Code:

 choose a suitable font and center the #container div in Internet Explorer 
body {
   text-align:center; 
   font-family: cambria; arial, sans-serif; 
   font-size:100%; 
   letter-spacing:1.5em;
   }


/*border und groesse*/
#container {
    position:relative; 
    width:1000px; 
    height:800px; 
    margin:10px auto 0 auto; 
    border:3px solid #adacad; 
    
    background:#330033 url(images/nature/IMG_2579.jpg) 185px 185px  no-repeat;
    }
    
    
/* Removing the list bullets and indentation, evtl schon vorhanden und kann weg 
#container ul {
    padding:0; 
    margin:0; 
    list-style-type:none; 
    }*/    
    
/* Remove the images and text from sight */
#container a.gallery span {
    position:absolute; 
    width:1px; 
    height:1px; 
    top:5px; 
    left:5px; 
    overflow:hidden; 
    background:#fff;
    }    
    
    
/* Adding the thumbnail images */
 #container a.gallery,#container a.gallery:visited {
    display:block;
        
    color:#000; 
    text-decoration:none; 
    border:1px solid #adacad; 
    margin:1px 2px 1px 2px; 
    text-align:left; 
    cursor:default;
    }
#container a.slidea {
    background:url(images/nature/thumbs/CIMG4062.jpg); 
    height:60px; 
    width:60px;
    }
#container a.slideb {
    background:url(images/nature/thumbs/IMG_0701n.jpg); 
    height:60px; 
    width:60px;
    }
#container a.slidec {
    background:url(images/nature/thumbs/IMG_1296n.jpg); 
    height:60px; 
    width:60px;
    }
#container a.slided {
    background:url(images/nature/thumbs/IMG_5746.jpg); 
    height:60px; 
    width:60px;
    }
#container a.slidee {
    background:url(images/nature/thumbs/IMG_5948.jpg); 
    height:60px; 
    width:60px;
    }
#container a.slidef {
    background:url(images/nature/thumbs/IMG_5952n.jpg); 
    height:60px; 
    width:60px;
    }
#container a.slideg {
    background:url(images/nature/thumbs/IMG_6274n.jpg); 
    height:60px; 
    width:60px;
    }
#container a.slideh {
    background:url(images/nature/thumbs/krebs.jpg); 
    height:60px; 
    width:60px;
    }    
    

    
#container a.slidei {
    background:url(images/nature/thumbs/IMG_2579.jpg); 
    height:60px; 
    width:60px;
    }        
#container a.slidek {
    background:url(images/nature/thumbs/IMG_9530f.jpg); 
    height:60px; 
    width:60px;
    }    
#container a.slidel {
    background:url(images/nature/thumbs/IMG_9562f.jpg); 
    height:60px; 
    width:60px;
    }    
#container a.slidem {
    background:url(images/nature/thumbs/Kirschblüte1.jpg); 
    height:60px; 
    width:60px;
    }    
    
#container a.sliden{
    background:url(images/nature/thumbs/Selenicereus grandiflorus.jpg); 
    height:60px; 
    width:60px;
    }        
    
/*
    
    
* html #container a.slided {
    width:91px; 
    w\idth:93px;
    }
#container a.slidee {
    background:url(../images/p5_t.jpg); 
    height:60px; 
    width:93px;
    }
#container a.slidef {
    background:url(../images/p6_t.jpg); 
    height:60px; 
    width:93px;
    }
* html #container a.slidef {
    width:91px; 
    w\idth:93px;
    }
#container a.slideg {
    background:url(../images/p7_t.jpg); 
    height:60px; 
    width:93px;
    }
#container a.slideh {
    background:url(../images/p8_t.jpg); 
    height:93px; 
    width:60px;
    }
#container a.slidei {
    background:url(../images/p9_t.jpg); 
    height:93px; 
    width:60px;
    }
#container a.slidej {
    background:url(../images/p10_t.jpg); 
    height:93px; 
    width:60px;
    }
#container a.slidek {
    background:url(../images/p11_t.jpg); 
    height:60px; 
    width:93px;
    }
* html #container a.slidek {
    width:91px; 
    w\idth:93px;
    }
#container a.slidel {
    background:url(../images/p12_t.jpg); 
    height:60px; 
    width:93px;
    }    */
    
    
/* set the size of the unordered list to neatly house the thumbnails */
#container ul {
    width:60px; 
    height:602px;
    }
#container li {
    float:right;
    }    
    
/* move the thumbnails into the correct position */
#container ul {
    margin:1px; 
    float:right;
    }    
    
/* change the thumbnail border color */
#container a.gallery:hover {
    border:1px solid #336600; 
    }

    
/* styling the :hover span breite der gesanzeige*/
#container a.gallery:hover span {
    position:absolute; 
    width:880px; 
    height:600px; 
    top:185px; 
    left:15px; 
    color:#adacad; 
    background:#330033;
    }    
    
#container a.gallery:hover img {
    border:1px solid #fff; 
    float:left; 
    margin-right:15px;
    }    
/* einzelne slide in neue position bringen
#container a.slideb:hover img, #container a.slidei:hover img {
    float:bottom;
    }    */

Danke schon jetzt für Hilfe

FlashZange · 04.06.2013

AW: css: hover img gallery

/* set the size of the unordered list to neatly house the thumbnails */
#container ul {
width:1000px; /* width: 100%; width: auto; */
height:200px; /*zB*/
}

Der ganze Quellcode ist aber reichlich unsauber ehrlich gesagt

muhtsch · 05.06.2013

AW: css: hover img gallery

Danke...wie logisch! naja ich bin eben noch ein Neuling.

Aber wieso ist der Quellcode unsauber?
Ich habe den peu a peu wie im tutorial eingesetzt:uhm:
Oder was genau meinst Du damit?

FlashZange · 05.06.2013

AW: css: hover img gallery

Na ja, die komplett auskommentierten Befehle würd ich ganz raushauen, die brauchst du ja nicht; "#container ul" kommt an drei verschiedenen Stellen vor, ist vielleicht Geschmackssache aber ich seh gern immer alle style-Vorschriften; "float:bottom" gibts garnicht

(ist aber auskommentiert, zugegeben); die ul muss nicht rechts gefloatet werden; "#adacad" wird viermal separat für "border" zugewiesen, sowas lässt sich zusammenfassen; etc.

Aber bei dem kleinen Umfang ist das alles nicht tragisch

muhtsch · 05.06.2013

AW: css: hover img gallery

Ich weiß nicht wann man etwas weglassen kann wenn es im Tutorial so steht. Danke Dir aber und werde es mir unter dem Aspekt morgen anschauen
Erkenne auch nicht ob nun das ul gefloatet werden muss. Wenns so da steht übernehme ich es und denke es ist richtig.