Css for an image slider

HTML & CSS
1

hi guys…

im working on an image slider -
ive posted the javascript questions in the js forum…

But theres some HTML/CSS questions that id like to ask too

Im trying to replicate this:
Thumbnails Navigation Gallery with jQuery

But i want to put the big images and the thumbnails (when click on best shots) IN the container, where the text is here in div class=main: Filth Clothing

(ive asked in js forum, how to get it the thumbnails to load automatically without having a “best shots”)

But i need placement help!
whatever i try i just cant seem to get it right, my navigation li messes with theirs. im losing some of my ul/li classes as well because of it.
When i move them around the dots go above my div class=main visually,
which i dont want.

Heres my link: Thumbnails Navigation Gallery with jQuery

can anyone help?

PS:
i got the big picture in: http://www.bluecrushdesign.co.za/filth/slider2.html

how do i get the thumbnails inside div class = main and somehow only show the pattern over the big image?

2

Hi,

I’m not really sure what you are going for but on that last link you sent you would need to set position:relative on st_main.

e.g.


.st_main{position:relative}

That should keep the thumbnails in the center of the page although you may need to move the link out of the way a bit.

3

The overlay is placed using position:fixed so you can’t really change it from where it is. I would suggest that you move the overlay element into the preview pane and see if that does what you want.

e.g.


<div id="preview"><img src="http://www.bluecrushdesign.co.za/filth/AUSSIE/images/1.jpg" alt="" class="st_preview" style="display:none;"/>
[B]	<div class="st_overlay"></div>[/B]
</div>




.st_overlay {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background:transparent url(http://www.bluecrushdesign.co.za/filth/AUSSIE/images/pattern.png) repeat-x bottom left;
	opacity:0.3;
}

The overlay is now position:absolute and should sit only over the image with any luck. The above is untested so you may need to play around with it.

4

thanks!
that worked…

Thumbnails Navigation Gallery with jQuery

i think its because i dont really use position absolute/relative that i end up getting stuck on it when its in code of others…

Question:
Any chance you know how to do the pattern st overlay just over the big photos?
ie not whole site?