Auf Thema antworten 2026

Beitrag

<blockquote data-quote="muhtsch" data-source="post: 2185508" data-attributes="member: 512558">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 &quot;hover img gallery&quot;. Das tutorial habe ich mir hier&nbsp;&nbsp; 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 {&nbsp;&nbsp; text-align:center; &nbsp;&nbsp; font-family: cambria; arial, sans-serif; &nbsp;&nbsp; font-size:100%; &nbsp;&nbsp; letter-spacing:1.5em;&nbsp;&nbsp; }/*border und groesse*/#container {&nbsp; &nbsp; position:relative; &nbsp; &nbsp; width:1000px; &nbsp; &nbsp; height:800px; &nbsp; &nbsp; margin:10px auto 0 auto; &nbsp; &nbsp; border:3px solid #adacad; &nbsp; &nbsp; &nbsp; &nbsp; background:#330033 url(images/nature/IMG_2579.jpg) 185px 185px&nbsp; no-repeat;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; /* Removing the list bullets and indentation, evtl schon vorhanden und kann weg #container ul {&nbsp; &nbsp; padding:0; &nbsp; &nbsp; margin:0; &nbsp; &nbsp; list-style-type:none; &nbsp; &nbsp; }*/&nbsp; &nbsp; &nbsp; &nbsp; /* Remove the images and text from sight */#container a.gallery span {&nbsp; &nbsp; position:absolute; &nbsp; &nbsp; width:1px; &nbsp; &nbsp; height:1px; &nbsp; &nbsp; top:5px; &nbsp; &nbsp; left:5px; &nbsp; &nbsp; overflow:hidden; &nbsp; &nbsp; background:#fff;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* Adding the thumbnail images */&nbsp;#container a.gallery,#container a.gallery:visited {&nbsp; &nbsp; display:block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color:#000; &nbsp; &nbsp; text-decoration:none; &nbsp; &nbsp; border:1px solid #adacad; &nbsp; &nbsp; margin:1px 2px 1px 2px; &nbsp; &nbsp; text-align:left; &nbsp; &nbsp; cursor:default;&nbsp; &nbsp; }#container a.slidea {&nbsp; &nbsp; background:url(images/nature/thumbs/CIMG4062.jpg); &nbsp; &nbsp; height:60px; &nbsp; &nbsp; width:60px;&nbsp; &nbsp; }#container a.slideb {&nbsp; &nbsp; background:url(images/nature/thumbs/IMG_0701n.jpg); &nbsp; &nbsp; height:60px; &nbsp; &nbsp; width:60px;&nbsp; &nbsp; }#container a.slidec {&nbsp; &nbsp; background:url(images/nature/thumbs/IMG_1296n.jpg); &nbsp; &nbsp; height:60px; &nbsp; &nbsp; width:60px;&nbsp; &nbsp; }#container a.slided {&nbsp; &nbsp; background:url(images/nature/thumbs/IMG_5746.jpg); &nbsp; &nbsp; height:60px; &nbsp; &nbsp; width:60px;&nbsp; &nbsp; }#container a.slidee {&nbsp; &nbsp; background:url(images/nature/thumbs/IMG_5948.jpg); &nbsp; &nbsp; height:60px; &nbsp; &nbsp; width:60px;&nbsp; &nbsp; }#container a.slidef {&nbsp; &nbsp; background:url(images/nature/thumbs/IMG_5952n.jpg); &nbsp; &nbsp; height:60px; &nbsp; &nbsp; width:60px;&nbsp; &nbsp; }#container a.slideg {&nbsp; &nbsp; background:url(images/nature/thumbs/IMG_6274n.jpg); &nbsp; &nbsp; height:60px; &nbsp; &nbsp; width:60px;&nbsp; &nbsp; }#container a.slideh {&nbsp; &nbsp; background:url(images/nature/thumbs/krebs.jpg); &nbsp; &nbsp; height:60px; &nbsp; &nbsp; width:60px;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #container a.slidei {&nbsp; &nbsp; background:url(images/nature/thumbs/IMG_2579.jpg); &nbsp; &nbsp; height:60px; &nbsp; &nbsp; width:60px;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #container a.slidek {&nbsp; &nbsp; background:url(images/nature/thumbs/IMG_9530f.jpg); &nbsp; &nbsp; height:60px; &nbsp; &nbsp; width:60px;&nbsp; &nbsp; }&nbsp; &nbsp; #container a.slidel {&nbsp; &nbsp; background:url(images/nature/thumbs/IMG_9562f.jpg); &nbsp; &nbsp; height:60px; &nbsp; &nbsp; width:60px;&nbsp; &nbsp; }&nbsp; &nbsp; #container a.slidem {&nbsp; &nbsp; background:url(images/nature/thumbs/Kirschblüte1.jpg); &nbsp; &nbsp; height:60px; &nbsp; &nbsp; width:60px;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #container a.sliden{&nbsp; &nbsp; background:url(images/nature/thumbs/Selenicereus grandiflorus.jpg); &nbsp; &nbsp; height:60px; &nbsp; &nbsp; width:60px;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*&nbsp; &nbsp; &nbsp; &nbsp; * html #container a.slided {&nbsp; &nbsp; width:91px; &nbsp; &nbsp; w\idth:93px;&nbsp; &nbsp; }#container a.slidee {&nbsp; &nbsp; background:url(../images/p5_t.jpg); &nbsp; &nbsp; height:60px; &nbsp; &nbsp; width:93px;&nbsp; &nbsp; }#container a.slidef {&nbsp; &nbsp; background:url(../images/p6_t.jpg); &nbsp; &nbsp; height:60px; &nbsp; &nbsp; width:93px;&nbsp; &nbsp; }* html #container a.slidef {&nbsp; &nbsp; width:91px; &nbsp; &nbsp; w\idth:93px;&nbsp; &nbsp; }#container a.slideg {&nbsp; &nbsp; background:url(../images/p7_t.jpg); &nbsp; &nbsp; height:60px; &nbsp; &nbsp; width:93px;&nbsp; &nbsp; }#container a.slideh {&nbsp; &nbsp; background:url(../images/p8_t.jpg); &nbsp; &nbsp; height:93px; &nbsp; &nbsp; width:60px;&nbsp; &nbsp; }#container a.slidei {&nbsp; &nbsp; background:url(../images/p9_t.jpg); &nbsp; &nbsp; height:93px; &nbsp; &nbsp; width:60px;&nbsp; &nbsp; }#container a.slidej {&nbsp; &nbsp; background:url(../images/p10_t.jpg); &nbsp; &nbsp; height:93px; &nbsp; &nbsp; width:60px;&nbsp; &nbsp; }#container a.slidek {&nbsp; &nbsp; background:url(../images/p11_t.jpg); &nbsp; &nbsp; height:60px; &nbsp; &nbsp; width:93px;&nbsp; &nbsp; }* html #container a.slidek {&nbsp; &nbsp; width:91px; &nbsp; &nbsp; w\idth:93px;&nbsp; &nbsp; }#container a.slidel {&nbsp; &nbsp; background:url(../images/p12_t.jpg); &nbsp; &nbsp; height:60px; &nbsp; &nbsp; width:93px;&nbsp; &nbsp; }&nbsp; &nbsp; */&nbsp; &nbsp; &nbsp; &nbsp; /* set the size of the unordered list to neatly house the thumbnails */#container ul {&nbsp; &nbsp; width:60px; &nbsp; &nbsp; height:602px;&nbsp; &nbsp; }#container li {&nbsp; &nbsp; float:right;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; /* move the thumbnails into the correct position */#container ul {&nbsp; &nbsp; margin:1px; &nbsp; &nbsp; float:right;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; /* change the thumbnail border color */#container a.gallery:hover {&nbsp; &nbsp; border:1px solid #336600; &nbsp; &nbsp; }&nbsp; &nbsp; /* styling the :hover span breite der gesanzeige*/#container a.gallery:hover span {&nbsp; &nbsp; position:absolute; &nbsp; &nbsp; width:880px; &nbsp; &nbsp; height:600px; &nbsp; &nbsp; top:185px; &nbsp; &nbsp; left:15px; &nbsp; &nbsp; color:#adacad; &nbsp; &nbsp; background:#330033;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #container a.gallery:hover img {&nbsp; &nbsp; border:1px solid #fff; &nbsp; &nbsp; float:left; &nbsp; &nbsp; margin-right:15px;&nbsp; &nbsp; }&nbsp; &nbsp; /* einzelne slide in neue position bringen#container a.slideb:hover img, #container a.slidei:hover img {&nbsp; &nbsp; float:bottom;&nbsp; &nbsp; }&nbsp; &nbsp; */&nbsp; &nbsp; [/CODE]Danke schon jetzt für Hilfe<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile&nbsp; &nbsp; :)" loading="lazy" data-shortname=":)" /></blockquote>

[QUOTE="muhtsch, post: 2185508, member: 512558"] 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; } */ [/CODE] Danke schon jetzt für Hilfe:) [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?