RSS-подписка

RSS-лента

Новые статьи

Последние комментарии


Получать обновления на эл. почту

Ваш e-mail:

Рассылка новостей от Loco

Красивое выравнивание характеристик на странице товара с отступами, отмеченными точками

Красивое выравнивание характеристик на странице товара с отступами, отмеченными точками Выравнивание в колонки характеристик с отступами, отмеченными точечками, как это делают в оглавлениях книжек. Придаёт ясности и быстроту восприятия информации, а значит посетитель быстро сориентируется на карточке товара и выудит интересующие его характеристики. Сделайте простой шаг навстречу людям и люди к вам потянутся!

Вот наш кусок html, который мы отформатируем красиво:

<dl class="dl-horizontal">
<?php if ($manufacturer) { ?>
<dt><span><?php echo $text_manufacturer; ?></span></dt><dd><a class="underline" href="<?php echo $manufacturers; ?>"><?php echo $manufacturer; ?></a></dd>
<?php } ?>
<dt><span><?php echo $text_model; ?></span></dt><dd><?php echo $model; ?></dd>
<dt><span><?php echo $text_sku; ?></span></dt><dd><?php echo $sku; ?></dd>
<dt><span><?php echo $text_location; ?></span></dt><dd><?php echo $location; ?></dd>
<?php if ($reward) { ?>
<dt><span><?php echo $text_reward; ?></span></dt><dd><?php echo $reward; ?></dd>
<?php } ?>
<dt><span><?php echo $text_stock; ?></span></dt><dd><?php echo $stock; ?></dd>
</dl>

а вот волшебный css:

.description .dl-horizontal dt {
float: left;
clear: left;
overflow: hidden;
width:140px;
text-align:left;
white-space:normal;
line-height:1.25;
background:url(../image/hr-dot-gray.gif) 100% 12px repeat-x;
}
.description .dl-horizontal dt, .description .dl-horizontal dt span {
font-weight: 400;
color:#818690;
}
.description .dl-horizontal dd {
margin-left:150px;
margin-bottom:6px;
line-height:1.25;
}
.description .dl-horizontal dt span {
padding:0 5px 0 0;
line-height:1.25;
background:#ffffff;
}
Здесь виден приём - жёстко задаётся ширина для "dt" и отступ перед "dl". Фоном ставим повторяющуюся картинку точки (скачать), размножая точки, а фон у текста "dt" ставим таким же, как фон самого блока, таким образом перекрывая точки за текстом. 

 

До и после:

красивое выравнивание характеристиквыравнивание в столкик характеристик

Источник: loco.ru

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (2)     Подпишитесь на RSS комментариев к этой статье.

2 комментариев

#1556
Иван говорит:
June 24, 2016 at 01:39 pm

Здравствуйте.

Очень понравилось это решение, но как будут отображаться характеристики товара в адаптивных темах при просмотре на планшетах и смартфонах?

В CSS не силен так что простите за вопрос.

#1557
almix говорит:
June 24, 2016 at 02:11 pm

у меня отлично отображается, тут же мы указываем для элемента dt ширину

width:140px;
такую чтобы не наезжал dd на него справа.

Вот можете посмотреть: http://inspire2.ru/blog/522-lil-zoo