[Помогите] Верстка css

Тема в разделе "DataLife Engine", создана пользователем Геннадий, 7 июл 2012.

  1. Геннадий

    Геннадий

    Регистрация:
    7 июл 2012
    Сообщения:
    1
    Симпатии:
    0
    Уважаемые вебмастеры, нужна помощь.

    Имеется слайдер на сайте. Он имеет такой вид:
    [​IMG]

    Нужно что бы он приобрел такой вид:
    [​IMG]

    Движок сайта DLE 9.6
    Вот код HTML:
    HTML:
    <div class="slider">
    {custom category="1,2,3,4,5" template="slider" aviable="main" from="0" limit="12" cache="no"}
    <div style="clear: both;"></div>
    </div>
    Шаблон slider:
    HTML:
    <div class="slider-item">
    <div class="slider-item-small">
    <img src="{image-1}" alt="{title}" />
    <div class="slider-item-small-dark"></div>
    </div>
    <div class="slider-item-big">
    <a href="{full-link}"><img src="{image-1}" alt="scrin" /></a>
    <h2>{title}</h2>
    </div>
    </div>
    Стиль slider:
    Код:
        .slider {
            position: relative;
            height: 355px;
            margin: 0 0 10px 0;
            padding: 0 0 0 502px;
            overflow: hidden;
        }
       
            .slider-item {
                float: left;
                width: 111px;
                height: 111px;
                margin: 0 0 10px 13px;
            }
           
                .slider-item-small {
                    overflow: hidden;
                    width: 111px;
                    height: 111px;
                    position: relative;
                    border: 1px #353535 solid;
                    cursor: pointer;
                }
               
                    .slider-item-small img {
                        min-width: 111px;
                        height: 111px;
                        border: 0;
                    }
                   
                    .slider-item-small-dark {
                        width: 100%;
                        height: 100%;
                        background: url(../images/slider-item.png);
                        position: absolute;
                        left: 0;
                        top: 0;
                        cursor: pointer;
                    }
                   
                .slider-item-big {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 502px;
                    height: 355px;
                    overflow: hidden;
                    display: none;
                }
               
                .active-slider .slider-item-big {
                   
                }
               
                .active-slider .slider-item-small  {
                    border: 1px #fff solid;
                }
               
                .slider-item-hover .slider-item-small {
                    border: 1px #fff solid !important;
                }
               
                .active-slider .slider-item-small-dark, .slider-item-hover .slider-item-small-dark {
                    display: none;
                }
               
                    .slider-item-big img {
                        position: absolute;
                        left: 0;
                        top: -50px;
                        width: 502px;
                        min-height: 355px;
                        border: 0;
                    }
                   
                    .slider-item-big h2 {
                        position: absolute;
                        font-size: 18px;
                        text-transform: uppercase;
                        left: 10px;
                        bottom: 5px;
                        font-weight: normal;
                        background: url(../images/slider-item.png);
                        padding: 10px;
                        color: #fff;
                    }
    У кого какие мысли?
     
  2. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.581
    Симпатии:
    1.482
    дайте ссылку на сайт, где слайдер со скриншота установлен, будем смотреть