Добрый день!
Подскажите как разделить <section> на два отдела с текстом и картинкой. В одной будет слайдер, в другой текст описания. У меня получается только что то не понятное. Место,которе занимает текст,так же двигает и слайд.
<section id="slider-wrap">
<p class="h7">
В наших секретных лабораториях в рамках проекта «Пандора» разрабатывалось
психотропное оружие. В результате неудачного эксперимента большинство ученых, работавших
над прибором, подверглись воздействию психотропного излучения, и они, находясь в состоянии
аффекта, растащили прототип по деталям. Возможно, наши ученые до сих пор находятся в
состоянии аффекта.</p>
<div id="slider">
<div class="slide"><img src="images/1.jpg" width="1500" height="300"></div>
<div class="slide"><img src="images/2.jpg" width="1500" height="300"></div>
<div class="slide"><img src="images/3.jpg" width="1500" height="300"></div>
</div>
</section>
#slider-wrap{ /* ќболочка слайдера и кнопок */
width:100%;
height:600px;
}
#slider{ /* ќболочка слайдера */
width:800px;
height:600px;
overflow: hidden;
border:#eee solid 10px;
position:relative;}
.h7{
margin-right: 25%; /* Отступ справа */
margin-left: 25%; /* Отступ слева */
background: #007083; /* Цвет фона */
color: white; /* Цвет текста */
padding: 10px; /* Поля вокруг текста */
text-align: justify; /* Выравнивание по ширине */
}
.slide{ /* —лайд */
width:100%;
height:100%;
text-align:right;}
}
.sli-links{ /* нопки смены слайдов */
margin-top:10px;
text-align:right;}
.sli-links .control-slide{
margin:2px;
display:inline-block;
width:16px;
height:16px;
overflow:hidden;
text-indent:-9999px;
background:url(radioBg.png) center bottom no-repeat;}
.sli-links .control-slide:hover{
cursor:pointer;
background-position:center center;}
.sli-links .control-slide.active{
background-position:center top;}
#prewbutton, #nextbutton{ /* —сылка "—ледующий" и "ѕедыдущий" */
display:block;
width:15px;
height:100%;
position:absolute;
top:0;
overflow:hidden;
text-indent:-999px;
background:url(arrowBg.png) left center no-repeat;
opacity:0.8;
z-index:3;
outline:none !important;}
#prewbutton{left:10px;}
#nextbutton{
right:10px;
background:url(arrowBg.png) right center no-repeat;}
#prewbutton:hover, #nextbutton:hover{
opacity:1;}
