akasha

Добрый день! Подскажите как разделить <section> на два отдела с текстом и картинкой. В одной будет слайдер, в другой текст описания. У меня получается только что то не понятное. Место,которе занимает текст,так же двигает и слайд. <section id="slider-wrap"> <p class="h7"> В наших секретных лабораториях в рамках проекта &laquo;Пандора&raquo; разрабатывалось психотропное оружие. В результате неудачного эксперимента большинство ученых, работавших над прибором, подверглись воздействию психотропного излучения, и они, находясь в состоянии аффекта, растащили прототип по деталям. Возможно, наши ученые до сих пор находятся в состоянии аффекта.</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;}