Aligning Radio Buttons Below a DIV - css

Question

Disclaimer: I am a VB guy with 4 days of jQuery and CSS experience. I am just trying to figure out the web design world!
I want to learn how to approach a design like this:
!(http://i.imgur.com/tDlRxnh.jpg)
Figuring it out from the image, I believe there's an outer div with an image center aligned and a white border around the image
The image has a left and right button on either sides that overlaps the images (God knows how's that even possible!)
Below the Outer Div are four radio buttons aligned one after the other
How to go about this design? (interested in just the design, not the coding part)
Comments/explanations would help! Thanks.
Edit: With my 16 hrs of experience, this is what I have so far http://jsfiddle.net/29mH2/2/. Sorry for being such a n00b!
<div id="somediv">
<img src=""/>
<img src=""/>
<img src=""/>
</div>
<input type="radio" name="op">
<input type="radio" name="op">
<input type="radio" name="op">
<input type="radio" name="op">
div {
background-color:blue;
border: 2px white;
position: absolute;
}
img {
display: none;
position: absolute;
}

Answer 1

Since you mentioned you're working with jQuery already, take a look at this tutorial and a working example of the result.
Basically, you're going to want to make two list elements.
One will contain the slides, and the other will contain the navigation buttons.
EDIT:
Since you're just looking for an example of the design, Here's a basic example that shows how to make a layout like you're talking about without any actual functionality.
HTML:
<div class="slider">
<img class="image" src="http://i.imgur.com/dL3io.jpg" />
<div class="navigation-arrows">
<div class="arrow left"><</div>
<div class="arrow right">></div>
</div>
</div>
<div class="navigation">
<input type="radio" name="op">
<input type="radio" name="op">
<input type="radio" name="op">
<input type="radio" name="op">
</div>
CSS:
body {
text-align: center;
}
.slider,
.slider .image {
width: 400px;
}
.slider .image,
.navigation-arrows,
.navigation-arrows .arrow {
position: absolute;
}
.navigation-arrows,
.navigation-arrows .arrow {
height: 25px;
}
.slider {
height: 250px;
position: relative;
margin: 20px auto;
}
.slider .image {
height: 250px;
left: 0;
top: 0;
}
.navigation-arrows {
width: 100%;
margin: 0 auto;
top: 125px;
}
.navigation-arrows .arrow {
border-radius: 12.5px;
background: #000000;
color: #ffffff;
width: 25px;
line-height: 25px;
cursor: pointer;
}
.navigation-arrows .left {
left: 5px;
}
.navigation-arrows .right {
right: 5px;
}