Need a little CSS help moving some buttons around

Hey folks, let me first state that I am a designer, not a programmer. I do have a basic grasp of CSS, but I still need some help. Here’s what I am trying to do:

I have taken this example:http://flowplayer.org/tools/demos/scrollable/index.html

and trying to use a single large image to scroll through, rather than the 5 images shown in that example. As you can see, it works out nicely:http://www.ogmda.com/test_moh/

However, now I want to move those default scrollable buttons and place them on the image like so:http://www.ogmda.com/test_moh/images/test_scroll_image2.jpg

Can someone help me write the CSS so it displays over the image like the above link, rather than the default?

I’ll customize the button graphics later, just need help with the placement for now.

Thank you!

Thanks so much! That worked great!

One way to do it is like so:

Move the buttons inside the .scrollable div, like so:

<div class="scrollable">
[COLOR="Red"]<a class="prev browse left"></a> [/COLOR]
   <div class="items">
      <div>
         <img src="images/scroll1.jpg" width="960" height="640" />
      </div>
      <div>
         <img src="images/scroll2.jpg" width="960" height="640" />
      </div>
      <div>
         <img src="images/scroll3.jpg" width="960" height="640" />
      </div>
   </div>
[COLOR="Red"]<a class="next browse right"></a>[/COLOR]
</div>

…and then add this to your stylesheet:


.scrollable a.left {position: absolute;left: 10px; top:270px;z-index: 10;}
.scrollable a.right {position: absolute;right: 10px; top:270px;z-index:10;}