Выравнивание радиокнопки под DIV

Question

Отказ от ответственности: Я парень VB с 4 днями опыта jQuery и CSS. Я просто пытаюсь понять мир веб-дизайна!

Я хочу, чтобы узнать, как подойти к конструкции, как это:

(http://i.imgur.com/tDlRxnh.jpg)

Выяснение его из образа, я считаю, что есть внешний DIV с центром изображений выровнены и белой каймой! вокруг изображения

изображение имеет левую и правую кнопку на обеих сторонах, что перекрывается изображения (Бог знает, как это вообще возможно!)

Ниже Внешней Div четыре кнопки радио выровненные один после другого

Как это сделать? (интересуется только дизайном, а не кодирующей частью)

Комментарии/объяснения помогут! Благодарю.

Редактировать: С моими 16 часами опыта это то, что у меня есть до сих пор http://jsfiddle.net/29mH2/2/. Извините за то, что вы такой 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

Поскольку вы упомянули вы работаете с JQuery уже, посмотрите на this tutorial и a working example of the result.

В принципе, вы захотите создать два элемента списка. Один будет содержать слайды, а другой будет содержать кнопки навигации.

---

EDIT:

Поскольку вы просто ищете пример дизайна, Here's a basic example, который показывает, как сделать макет, как вы говорите, без какой-либо реальной функциональности.

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; 
}