0

Всем привет! Уже писал, что давно не дружу с версткой,и стараюсь от неё отходить. Так вот тут задача встала, для кого-то простая наверное.

Нужно сверстать такую картинку.

Каждое такое изделие должно быть float:left чтобы по остальному дизайну кол-во изделий на странице могло быть разным + всё это изделие было кликабельным со ссылкой. Значек скидки, понятное дело что только фон, саму скидку можно прописать руками, от 1% до 100, я думаю это должно быть понятно. Ниже то что по глупости получилось у меня. Честно вааще нелюблю верстку, особенно большое кол-во элементов внутри одного. Кнопка "купить" появляется только при наведении на изделие, её не верстал даже.

Может кто что подскажет.

ps. конечно же чтобы под ослом 7-8 тоже как-то показывалось.

<div class="product"><a href="/catalog/product/pic">
                                    <div class="img" style="background: url(/img/cat/m/pic.jpg) -30px -20px; width:235px; height:185px;">
                                    </div>
                                    <div class="discount"></div> // если скидки нет, то этот див не показываем и верстка не слетает
                                    <div class="price"><div class="pricetext">150р</div></div>
                                    <div class="orangemask">NEW</div>// тут так же как  и с дивом discount
                                    <div class="title">Серьга</div>
                                   </a>
                                </div>

.product{ // верхний див
    float:left;
    width: 235px;
    height: 195px;
    margin: 3px;
    text-align: center;

}

.product .img{
     border: 1px solid #c9c9c9;
    height: 185px;
    padding: -10px 0 0 0;
    z-index: 0;
}

.product .title{
    color:#024b8e;
    font-size:16px;
    font-weight: normal;
    margin:140px 0 0 -90px;
}
.product a:link,a:hover{
     color:#8c8f8e;
     text-decoration: none;
}
.product .price{

    width:80px;
    height: 25px;
    margin:-207px 0 0 0;
    border: 1px solid #b7b8b8;
    background:#8c8f8e url('/img/icons/rubwhite.png')58px 3px no-repeat;
    padding: 0 0 -10px 0;

}

.pricetext{
    color:#FFFFFF;
    font-size:16px;
    font-weight: normal;
    margin: 4px 0 0 -18px;
    display:block; 
    text-decoration: none;
}
.pricetext:hover{text-decoration: none;}
.orangemask{
    background: #e94005;
    color:#FFFFFF;
    font-size:16px;
    width: 82px;
    height: 20px;
}
.product .price span{

    width:60px;
    margin: 0 0 -10px 0;

}
.product .discount{
    margin:-32px 0 0 180px;
    z-index: 100;
    width:57px;
    height:52px; 

}

alt text

2
  • Кто подскажет как просто расположить правильно элементы внутри дива? чтобы это не сказывалось на них при условии того что каких-то элементов не будет.
    – Artem
    30 окт 2012 в 7:00
  • Если честно, то не очень понятно, что вы пытаетесь сказать. Не могли бы вы выложить то что у вас есть на jsfiddle.net Попробуйте назначить контейнеру position: relative а внутренним элементам position: absolute.
    – istem
    30 окт 2012 в 7:09

1 ответ 1

2

Вот держите верстку блока с изображением товара, на остальное пока нет времени, вечерком гляну, если будет время и никто не ответит. надеюсь поможет

8
  • +10 в карму, щас гляну как на сайте смотреться будет.
    – Artem
    30 окт 2012 в 8:21
  • @Shrek, как глянешь, отпишись. Поправлю если что...
    – Astor
    30 окт 2012 в 8:29
  • Пару маленьких корректировок для ответа @Alex83
    – Deonis
    30 окт 2012 в 9:43
  • 2 @deonis это я поправил сразу :)
    – Artem
    30 окт 2012 в 10:03
  • @Deonis, скажите пожалуйста, чем такая запись лучше? : $('a.buy', this).fadeIn(500); Это мне для общего развития...))
    – Astor
    30 окт 2012 в 10:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.