Рамка в шапке сайта из DIV с меняющимися картинками внутри

[Gnome.su]

День добрый!

Пытаюсь сделать нечто вроде рамки в шапке сайта в которой будут крутиться картинки (слайдшоу), но пока что-то не очень получается, видимо из-за того что совершенно не умею работать с div версткой.

Вот то что получилось накидать:

    <div style="width: 1135px; height: 376px; position: relative;">     <div style="float:left; width: 80px; height: 376px; background:url(left.png); background-repeat:no-repeat;"></div>    <div style="float:right; width: 90px; height: 376px; background:url(right.png); background-repeat:no-repeat;"></div>    <div style="position: absolute; top: 0; height: 80px; width: 965px; background:url(top.png); background-repeat:no-repeat;"></div>    <div style="position: absolute; bottom: 0; height: 126px; width: 965px; background:url(bottom.png); background-repeat:no-repeat;"></div>        </div>

При просмотре этого безобразия в dreamweaver на удивление всё выглядит давольно таки не плохо:

 

 

Но при открытии всего этого в браузере всё расползается к чертям

 

 

 

И всё становится ещё хуже после вставки изображения в эту рамку

 

Прошу помощи!

 

 

[Gnome.su]

Собственно кое что начало получаться

 <div style="width: 1135px; height: 376px; position: relative;">     <div style="position: absolute; float:left; width: 80px; height: 376px; background:url(left.png); background-repeat:no-repeat;"></div>    <div style="position: relative; float:right; width: 90px; height: 376px; background:url(right.png); background-repeat:no-repeat;"></div>    <div style="position: absolute; top: 0; margin-left: 80px; height: 80px; width: 965px; background:url(top.png); background-repeat:no-repeat;"></div>    <div style="position: absolute; bottom: 0; margin-left: 80px; height: 126px; width: 965px; background:url(bottom.png); background-repeat:no-repeat;"></div>    <img src="demo-file.jpg" width="1020" height="376"></div>

Теперь проблема в div который расположен справа,  если выставляю position: absolute; то он перемещается налево если position: relative; то он перестаёт быть прозрачным   как с ним быть не знаю

 

 

Edited February 1, 2014 by Gnome.su

[illya_v]

Попробуйте так:

 <div style="width: 1135px; height: 376px; position: relative;">     <div style="position: absolute; width: 80px; height: 376px; background:url(left.png); background-repeat:no-repeat;"></div>    <div style="position: absolute; right: 0; width: 90px; height: 376px; background:url(right.png); background-repeat:no-repeat;"></div>    <div style="position: absolute; top: 0; margin-left: 80px; height: 80px; width: 965px; background:url(top.png); background-repeat:no-repeat;"></div>    <div style="position: absolute; bottom: 0; margin-left: 80px; height: 126px; width: 965px; background:url(bottom.png); background-repeat:no-repeat;"></div>        <img src="demo-file.jpg" width="1135" height="376"></div>

[Sensei]

Можно было бы сделать один PNG с прозрачной серединой.

Возможно, он будет тяжелее 4 JPEG, зато запрос всего один.

Да и реализовать легче, просто поверх псевдоэлемент с этим фоном.

Edited February 1, 2014 by Sensei

[Gnome.su]

 

Попробуйте так:

 <div style="width: 1135px; height: 376px; position: relative;">     <div style="position: absolute; width: 80px; height: 376px; background:url(left.png); background-repeat:no-repeat;"></div>    <div style="position: absolute; right: 0; width: 90px; height: 376px; background:url(right.png); background-repeat:no-repeat;"></div>    <div style="position: absolute; top: 0; margin-left: 80px; height: 80px; width: 965px; background:url(top.png); background-repeat:no-repeat;"></div>    <div style="position: absolute; bottom: 0; margin-left: 80px; height: 126px; width: 965px; background:url(bottom.png); background-repeat:no-repeat;"></div>        <img src="demo-file.jpg" width="1135" height="376"></div>

 

Благодарю!