View Full Version : help with TinySlideshow CSS

07-07-2011, 06:19 PM
original script is located here:

My current adapted files are located here:

What im trying to do is remove the carousel from the original script and just have the thumbnails line up underneath the main image. BUT what im seeing is that i cant figure out how to set the width of the thumbnail area- i want to have it only go the width of the main image, and fall onto multiple lines. So for this example, there are 8 total thumbs, id like them to be in 2 rows of 4.
Any idea how to accomplish this?
You can view the html from the link above, and im going to copy the css for you below.
Please let me know if you have any ideas

body {margin:0; background:#111; padding:5px; font:11px Verdana,Arial; width:490px;}
#slideshow {position:absolute; height:220px; width:490px; list-style:none; }
#slideshow span {display:none}
#wrapper {width:490px; height:720px; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:absolute; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:10%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(images/left.gif) left center no-repeat}
#imgnext {right:0; background:url(images/right.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
#thumbnails { display:block; position:absolute; top:320px; width:490px; height:200px;}
#slidearea {float:left; display:block; position:absolute; width:490px; margin-right:5px; height:220px;}
#slider {position:absolute; left:0; height:220px; width:490px; }
#slider img {cursor:pointer; border:1px solid #666; padding:2px}

07-08-2011, 07:17 AM
looks like a jquery slider? A lot of times, these scripts are uncustomizable, or more specifically: your going to have to search the javascript to find the solution.

07-08-2011, 07:25 AM
#thumbnails {
display: block;
position: absolute;
top: 320px;
width: 490px;
height: 200px;
overflow: hidden; /* missing */

if you want two rows, you have to use a ul and lis (2) with overflow: hidden;, honestly I don't recommend tampering with the original script though!