Css for an image slider

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?

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.

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.

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?