[Решено] Сверстать список товаров [HTML+CSS]

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем xoff, 1 июл 2015.

Статус темы:
Закрыта.
  1. xoff

    xoff

    Регистрация:
    2 сен 2013
    Сообщения:
    72
    Симпатии:
    13
    Если у кого-нибудь найдется время что бы помочь, буду благодарен.

    Вот то что нужно сверстать:
    [​IMG]

    И если не затруднит с небольшими комментариями в коде.
     
  2. xoff

    xoff

    Регистрация:
    2 сен 2013
    Сообщения:
    72
    Симпатии:
    13
    Вот что у меня получилось, но наверное все криво, не понятно почему в .warp_tovar не входит .price-box http://codepen.io/anon/pen/EjQvNY

    [​IMG]
     
  3. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.121
    Симпатии:
    560
    Ну почему не понятно, все входит http://prntscr.com/7nu00z
    А тут видно, что он в лежит в http://prntscr.com/7nu06a

    Проблема в том, что у тебя все элементы флотуные, и ни у одного нет заданной высоты или паддинга или вспомогательного родителя, которая определяла высоту.
     
    xoff нравится это.
  4. xoff

    xoff

    Регистрация:
    2 сен 2013
    Сообщения:
    72
    Симпатии:
    13
    Ну да как то криво, и если изображение не квадратное тоже смотрится не очень, как сделать выравнение изображения по центру вертикально тексту? и что бы отступ был между товарами, а то из-за того что div.wrap_tovar не захватывает блок с ценами, получается следующий div.wrap_tovar идет сразу после предыдущего и накладывается на цену...

    Обновил: http://codepen.io/anon/pen/EjQvNY

    [​IMG]
     
  5. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.121
    Симпатии:
    560
    И классы лучше называть правильно
    box-product
    name
    price
    description

    у картинок нет тега alt

    И если это верстка каталога товаров, то картинка и название должны быть обернуты ссылкой на товар
    --- Добавлено, 2 июл 2015 ---
    + у тебя не правильные шрифты и нет шрифта рубля
     
    xoff нравится это.
  6. xoff

    xoff

    Регистрация:
    2 сен 2013
    Сообщения:
    72
    Симпатии:
    13
    Как понять флотуные? то что блоки с ценами используют float:left? у блоков есть заданный паддинг вроде и родитель для них является div.price-box а у него заданна высота.

    Это список товаров, и весь сайт на html+css без движка и пока нет возможности сделать для каждого товара отдельную страницу, это я по поводу ссылок на картинку и заголовок, потому что товаров больше 1000.

    Шрифт рубля это попозже) щас бы с основным разобраться)
     
  7. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.121
    Симпатии:
    560
    Ща, покажу
    --- Добавлено, 2 июл 2015 ---
    Код:
    <style>
    html {
      font-family: "Arial";
    }
    .box {
      width: 650px;
      margin-bottom:20px;
    }
    
    .name a{
      font-size: 27px;
      font-weight: bold;
      text-decoration:none;
    }
    
    .description{
      position: relative;
      overflow: hidden;
      vertical-align:top;
    }
    .box-left,.box-right{
        vertical-align:top;
    }
    .box-left{
        padding-right:20px;
        float:left;
        border-right:2px solid #DBDDDF;
    }
    .box-right{
        padding-left:210px;
    }
    .text {
        text-align: justify;
        margin-bottom:20px;
    }
    .price{
      height: 32px;
      border: 2px solid #A9BCCD;
      float:right;
    }
    .price p{
      margin: 0;
      font-weight: bold;
    }
    .price span{
      font-weight: normal;
    }
    .price .min {
      float: left;
      font-size: 16px;
      border-right: 2px solid #96B3D6;
      padding: 7px;
    }
    .price .medium {
      float: left;
      padding: 8px;
      border-right: 2px solid #96B3D6;
    }
    .price .max {
      float: left;
      font-size: 12px;
      padding: 9px;
    }
    </style>
    <div class="box">
      <div class="name">
        <a href="" title="">STV-L 362</a>
      </div>
      <div class="description">
        <div class="box-left">
            <div class="image">
                <a href="" title=""><img src="http://stv-sb.com/ru/cache/com_zoo/images/L362_fca613fa4e60881deeb794ccf990a415.jpg" width="170"></a>
            </div>
        </div>
        <div class="box-right">
            <div class="text">
                 Уличная видеокамера с ИК-подсветкой.ПЗС матрица
                 1/3" SONY CCD; разрешение камеры 420 ТВЛ;
                 чувствительность 0,05 лк; фокусное расстояние
                 объектива f=3,6 мм; класс защиты IP66;
                 режим день/ночь;ИК-подсветка 20м.
                 Компенсация встречной засветки (BLC);
                 автоматическая регулировка  усиления  (AGC);
                 баланс белого (AWB). Цвет корпуса: черный,белый.
                 IP66. Питание DC12В/300мА.Отношение сигнал/шум 55 db.
                 Температура работы -30°С…+50°С
            </div>
             <div class="price">
              <div class="min">
                <p>4 313,74
                    <span>
                    <span class="rubl">Р</span>/шт
                    </span>
                </p>
              </div>
              <div class="medium">
                <p>4 112,43
                    <span>
                        <span class="rubl">Р</span>/шт
                    </span>
                </p>
              </div>
              <div class="max">
                <p>3 911,12
                    <span>
                        <span class="rubl">Р</span>/шт
                    </span>
                </p>
              </div>
            </div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="name">
        <a href="" title="">STV-L 362</a>
      </div>
      <div class="description">
        <div class="box-left">
            <div class="image">
                <img src="http://stv-sb.com/ru/cache/com_zoo/images/L362_fca613fa4e60881deeb794ccf990a415.jpg" width="170">
            </div>
        </div>
        <div class="box-right">
            <div class="text">
                 Уличная видеокамера с ИК-подсветкой.ПЗС матрица
                 1/3" SONY CCD; разрешение камеры 420 ТВЛ;
                 чувствительность 0,05 лк; фокусное расстояние
                 объектива f=3,6 мм; класс защиты IP66;
                 режим день/ночь;ИК-подсветка 20м.
                 Компенсация встречной засветки (BLC);
                 автоматическая регулировка  усиления  (AGC);
                 баланс белого (AWB). Цвет корпуса: черный,белый.
                 IP66. Питание DC12В/300мА.Отношение сигнал/шум 55 db.
                 Температура работы -30°С…+50°С
            </div>
             <div class="price">
              <div class="min">
                <p>4 313,74
                    <span>
                    <span class="rubl">Р</span>/шт
                    </span>
                </p>
              </div>
              <div class="medium">
                <p>4 112,43
                    <span>
                        <span class="rubl">Р</span>/шт
                    </span>
                </p>
              </div>
              <div class="max">
                <p>3 911,12
                    <span>
                        <span class="rubl">Р</span>/шт
                    </span>
                </p>
              </div>
            </div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="name">
        <a href="" title="">STV-L 362</a>
      </div>
      <div class="description">
        <div class="box-left">
            <div class="image">
                <img src="http://stv-sb.com/ru/cache/com_zoo/images/L362_fca613fa4e60881deeb794ccf990a415.jpg" width="170">
            </div>
        </div>
        <div class="box-right">
            <div class="text">
                 Уличная видеокамера с ИК-подсветкой.ПЗС матрица
                 1/3" SONY CCD; разрешение камеры 420 ТВЛ;
                 чувствительность 0,05 лк; фокусное расстояние
                 объектива f=3,6 мм; класс защиты IP66;
                 режим день/ночь;ИК-подсветка 20м.
                 Компенсация встречной засветки (BLC);
                 автоматическая регулировка  усиления  (AGC);
                 баланс белого (AWB). Цвет корпуса: черный,белый.
                 IP66. Питание DC12В/300мА.Отношение сигнал/шум 55 db.
                 Температура работы -30°С…+50°С
            </div>
             <div class="price">
              <div class="min">
                <p>4 313,74
                    <span>
                    <span class="rubl">Р</span>/шт
                    </span>
                </p>
              </div>
              <div class="medium">
                <p>4 112,43
                    <span>
                        <span class="rubl">Р</span>/шт
                    </span>
                </p>
              </div>
              <div class="max">
                <p>3 911,12
                    <span>
                        <span class="rubl">Р</span>/шт
                    </span>
                </p>
              </div>
            </div>
        </div>
      </div>
    </div>
    
    --- Добавлено, 2 июл 2015 ---
    Результат вот такой http://prntscr.com/7nu5px
     
    xoff нравится это.
  8. xoff

    xoff

    Регистрация:
    2 сен 2013
    Сообщения:
    72
    Симпатии:
    13
    Спасибо большое, но у меня border-left был у текста, и по мере его увеличения (текста) полоска тоже увеличивалась, но ладно и так сойдет) спасибо за помощь!
     
  9. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.121
    Симпатии:
    560
    Ну это не сложно исправить)
    Код:
    <style>
    html {
      font-family: "Arial";
    }
    .box {
      width: 650px;
      margin-bottom:20px;
    }
    
    .name a{
      font-size: 27px;
      font-weight: bold;
      text-decoration:none;
    }
    
    .description{
      position: relative;
      overflow: hidden;
      vertical-align:top;
    }
    .box-left,.box-right{
        vertical-align:top;
    }
    .box-left{
        padding-right:20px;
        float:left;
       
    }
    .box-right{
        padding-left:190px;
    
    }
    .text {
        text-align: justify;
        margin-bottom:20px;
       border-left:2px solid #DBDDDF;
       padding-left:20px;
    }
    .price{
      height: 32px;
      border: 2px solid #A9BCCD;
      float:right;
    }
    .price p{
      margin: 0;
      font-weight: bold;
    }
    .price span{
      font-weight: normal;
    }
    .price .min {
      float: left;
      font-size: 16px;
      border-right: 2px solid #96B3D6;
      padding: 7px;
    }
    .price .medium {
      float: left;
      padding: 8px;
      border-right: 2px solid #96B3D6;
    }
    .price .max {
      float: left;
      font-size: 12px;
      padding: 9px;
    }
    </style>
    <div class="box">
      <div class="name">
        <a href="" title="">STV-L 362</a>
      </div>
      <div class="description">
        <div class="box-left">
            <div class="image">
                <a href="" title=""><img src="http://stv-sb.com/ru/cache/com_zoo/images/L362_fca613fa4e60881deeb794ccf990a415.jpg" width="170"></a>
            </div>
        </div>
        <div class="box-right">
            <div class="text">
                 Уличная видеокамера с ИК-подсветкой.ПЗС матрица
                 1/3" SONY CCD; разрешение камеры 420 ТВЛ;
                 чувствительность 0,05 лк; фокусное расстояние
                 объектива f=3,6 мм; класс защиты IP66;
                 режим день/ночь;ИК-подсветка 20м.
                 Компенсация встречной засветки (BLC);
                 автоматическая регулировка  усиления  (AGC);
                 баланс белого (AWB). Цвет корпуса: черный,белый.
                 IP66. Питание DC12В/300мА.Отношение сигнал/шум 55 db.
                 Температура работы -30°С…+50°С
            </div>
             <div class="price">
              <div class="min">
                <p>4 313,74
                    <span>
                    <span class="rubl">Р</span>/шт
                    </span>
                </p>
              </div>
              <div class="medium">
                <p>4 112,43
                    <span>
                        <span class="rubl">Р</span>/шт
                    </span>
                </p>
              </div>
              <div class="max">
                <p>3 911,12
                    <span>
                        <span class="rubl">Р</span>/шт
                    </span>
                </p>
              </div>
            </div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="name">
        <a href="" title="">STV-L 362</a>
      </div>
      <div class="description">
        <div class="box-left">
            <div class="image">
                <img src="http://stv-sb.com/ru/cache/com_zoo/images/L362_fca613fa4e60881deeb794ccf990a415.jpg" width="170">
            </div>
        </div>
        <div class="box-right">
            <div class="text">
                 Уличная видеокамера с ИК-подсветкой.ПЗС матрица
                 1/3" SONY CCD; разрешение камеры 420 ТВЛ;
                 чувствительность 0,05 лк; фокусное расстояние
                 объектива f=3,6 мм; класс защиты IP66;
                 режим день/ночь;ИК-подсветка 20м.
                 Компенсация встречной засветки (BLC);
                 автоматическая регулировка  усиления  (AGC);
                 баланс белого (AWB). Цвет корпуса: черный,белый.
                 IP66. Питание DC12В/300мА.Отношение сигнал/шум 55 db.
                 Температура работы -30°С…+50°С
            </div>
             <div class="price">
              <div class="min">
                <p>4 313,74
                    <span>
                    <span class="rubl">Р</span>/шт
                    </span>
                </p>
              </div>
              <div class="medium">
                <p>4 112,43
                    <span>
                        <span class="rubl">Р</span>/шт
                    </span>
                </p>
              </div>
              <div class="max">
                <p>3 911,12
                    <span>
                        <span class="rubl">Р</span>/шт
                    </span>
                </p>
              </div>
            </div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="name">
        <a href="" title="">STV-L 362</a>
      </div>
      <div class="description">
        <div class="box-left">
            <div class="image">
                <img src="http://stv-sb.com/ru/cache/com_zoo/images/L362_fca613fa4e60881deeb794ccf990a415.jpg" width="170">
            </div>
        </div>
        <div class="box-right">
            <div class="text">
                 Уличная видеокамера с ИК-подсветкой.ПЗС матрица
                 1/3" SONY CCD; разрешение камеры 420 ТВЛ;
                 чувствительность 0,05 лк; фокусное расстояние
                 объектива f=3,6 мм; класс защиты IP66;
                 режим день/ночь;ИК-подсветка 20м.
                 Компенсация встречной засветки (BLC);
                 автоматическая регулировка  усиления  (AGC);
                 баланс белого (AWB). Цвет корпуса: черный,белый.
                 IP66. Питание DC12В/300мА.Отношение сигнал/шум 55 db.
                 Температура работы -30°С…+50°С
            </div>
             <div class="price">
              <div class="min">
                <p>4 313,74
                    <span>
                    <span class="rubl">Р</span>/шт
                    </span>
                </p>
              </div>
              <div class="medium">
                <p>4 112,43
                    <span>
                        <span class="rubl">Р</span>/шт
                    </span>
                </p>
              </div>
              <div class="max">
                <p>3 911,12
                    <span>
                        <span class="rubl">Р</span>/шт
                    </span>
                </p>
              </div>
            </div>
        </div>
      </div>
    </div>
    
     
    xoff нравится это.
  10. xoff

    xoff

    Регистрация:
    2 сен 2013
    Сообщения:
    72
    Симпатии:
    13
    Спасибо, а можно что нибудь сделать с картинкой товара если она меньше в высоту, то выглядит неочень, как нибудь сделать div.image размером например 170x170, а фотографии которые в этот див входят что бы уменьшались если больше 170px до 170px, а если меньше в высоту, то центрировалось по вертикали и горизонтали?
    [​IMG]
    --- Добавлено, 2 июл 2015 ---
    Не получается так :(
    HTML:
    .image {
      width: 170px;
      height: 170px;
    }
    .image img{
      display: inline-block;
      vertical-align: middle;
    }
    
    --- Добавлено, 2 июл 2015 ---
    Разобрался вместо height, нужно было line-height, и тогда работает.
     
Статус темы:
Закрыта.