Сообщений в теме: 2

[Gott]

Нужно сделать следующую конструкцию: 

 

Всё на html / css.

 

Как блок со слайдером сделать поверх остальных двух? И как, по умному, настроить позицию самих слайдов чтоб они красиво выводились ровно там где должны? 

 

Желательно пример кода. С меня плюсик. 

Прикрепленные файлы

•  hernia.jpg   67,15К   0 Количество загрузок:

Сообщение отредактировал Gott: 20 Март 2015 - 19:59

[germes]

http://htmlbook.ru/css/z-index

[ray1978]

Разметка в body

 

<div id="wrapper">

 

             <div id="block1"></div>

            

            <div id="slider">

                    <div id="slider-show">                        

                           <img src="img1.jpg" />

                    </div>

                   <img src="img1.jpg" />

                   <img src="img2.jpg" />

                   <img src="img3.jpg" />

           </div>

 

            <div id="block2"></div>

</div>

 

 

Весь прикол в стиля

#wrapper {

                  margin:0 auto;

                  width:1000px;

                  border: 1px solid #000;

                  position:relative;

}

#block1,  #block2 {

                  height:200px;

}

#block1 {

           background-color: purple;

}

#block2 {

           background-color: green;

}

#slider {

           background-color: blue; // или же фоновая картинка

           padding: 20px;

           width:660px;

           height:360px;

           position:absolute;

         

           далее два варианта как расположить

          1.

           top: NNpx - подобрать самому

           left: NNpx - подобрать самому

 

           2.

           top: NNpx - подобрать самому

           left: 50%; 

           марджин-лефт: -350px;

}

#slider > img {

      display:none;

}

 

#slider-show {

по-умолчанию получаетя

           width:660px;

           height:360px;

это уже должен быть размер картинок в слайд-шоу

для других размеров картинок можно обратным ходов высчитать каков будет размер самой области слайдера (синий фон)

все картинки для слайд-шоу должны быть одного размера

}

 

 

дальше уже javascript, jQuery

Сообщение отредактировал ray1978: 21 Март 2015 - 04:53