Кнопки вперед и назад

[high]

кнопки расположены слева и справа по бокам
хотелось бы сделать как показано на сркине. т.е.вынести их выше ввиде двух небольших блоков для удобства.
код

a.next, a.prev, div.noPrev, div.noNext {
        text-indent: 16px;
        color: #fff;
        width: 12px;
        overflow: hidden;
        display: block;
        text-align: center;
        position: absolute;
}
a.prev {
        background-color: #4bbed5;
        background-image: url(prev.png);
        background-position: -12px 0;
        left: 0;
        top: 0;
}
        a.prev:hover {
                background-position: -24px 0;
        }


a.next {
        background-color: #4bbed5;
        background-image: url(next.png);
        background-position: -12px 0;
        right: 0;
        top: 0;
}

        a.next:hover {
                background-position: 0 0;
        }

div.noPrev {
        background-image: url(prev.png);
        background-position: 0 0;
        left: 0;
        top: 0;
}

div.noNext {
        background-image: url(next.png);
        background-position: -24px 0;
        right: 0;
        top: 0;
}

как сделать? заранее спасибо)

 

[high]

Ответ: Кнопки вперед и назад



немного разобрался удалив лишний код

a.next, a.prev, div.noPrev, div.noNext {
    color: #FFFFFF;
///////  display: block;

    overflow-x: hidden;
    overflow-y: hidden;
    position: none;
    text-align: center;
    text-indent: 16px;
    width: 12px;


}

a.next[class], a.prev[class], div.noPrev[class], div.noNext[class] {
 ///   height: 100%;



}

a.prev {
    background-color: #4BBED5;

    background-image: url("prev.png");
    background-position: -12px 0;
    left: 500;
    top: 0;


}

a.prev:hover {
    background-position: -24px 0;


}

a.next {
///    background-color: #4BBED5;

///    background-image: url("next.png");

///    background-position: -12px 0;

    right: 0;
    top: 0;


}

a.next:hover {
///    background-position: 0 0;



}

 

[high]

Ответ: Кнопки вперед и назад

но все равно нужна помощь)