1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

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

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

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

    xoff

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

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

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

    xoff

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

    [​IMG]
     
    xoff, 2 июл 2015
    #2
  3. alex_storm

    alex_storm webdev

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

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

    xoff

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

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

    [​IMG] ​
     
    xoff, 2 июл 2015
    #4
  5. alex_storm

    alex_storm webdev

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

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

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

    xoff

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

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

    Шрифт рубля это попозже) щас бы с основным разобраться)
     
    xoff, 2 июл 2015
    #6
  7. alex_storm

    alex_storm webdev

    Регистрация:
    11 дек 2012
    Сообщения:
    1.151
    Симпатии:
    667
    Ща, покажу
    --- Добавлено, 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
     
    alex_storm, 2 июл 2015
    #7
    xoff нравится это.
  8. xoff

    xoff

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

    alex_storm webdev

    Регистрация:
    11 дек 2012
    Сообщения:
    1.151
    Симпатии:
    667
    Ну это не сложно исправить)
    Код:
    <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>
     
    alex_storm, 2 июл 2015
    #9
    xoff нравится это.
  10. xoff

    xoff

    Регистрация:
    2 сен 2013
    Сообщения:
    74
    Симпатии:
    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, и тогда работает.
     
    xoff, 2 июл 2015
    #10
< Как задать css стили для определенного фрагмента кода? | Валидатор w3c ругается - где ошибка в коде? >
Статус темы:
Закрыта.