x
 
Андрей Тонконогов
14 февраля 2013

Пытался сверстать вот такой элемент. Его размеры 380×55. Проблема в том, что в разных браузерах блок по-разному отображается — где-то ровно, где-то всё скачет.

Вопросы:

  1. Как сверстать этот блок, чтобы он корректно отображался в разных браузерах и системах? Помогите с кодом.
  2. Как правильно распределить пространство между блоками, учитывая, что дней может быть как 5, так и 15? Остальное особо не изменяется.

Спасибо большое!



Пожалуйста:

  • 5 дней на выпечку
  • 200 грн цена за 1 кг
  • 1 кг мин. заказ

ХТМЛ:

<ul class="ap-digits">
  <li>
    <img src="time.png" width="31" height="31">
    <span>
      <b>5 дней</b> на выпечку
    </span>
  </li>
  <li>
    <img src="price.png" width="27" height="31">
    <span>
      <b>200 грн</b> цена за 1 кг
    </span>
  </li>
  <li>
    <img src="weight.png" width="20" height="30">
    <span>
      <b>1 кг</b> мин. заказ
    </span>
  </li>
</ul>

ЦСС:

.ap-digits > li,
.ap-digits > li > img,
.ap-digits > li > span {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: top;
  *zoom: 1;
  *display: inline;
}
.ap-digits > li {
  margin: 0 23px 18px 0;
  white-space: nowrap;
}
.ap-digits > li:last-child {
  margin-right: 0;
}
.ap-digits > li > img {
  margin: 0 3px 0 0;
}
.ap-digits > li > span {
  font-family: Georgia, serif;
  font-size: 11px;
  line-height: 1;
  color: #6b6b6e;
  margin-top: -5px;
  *padding-bottom: 2px;
}
.ap-digits > li > span > b {
  display: block;
  font-size: 20px;
  font-weight: normal;
  color: #000;
  margin-bottom: 3px;
}

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


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Александр Ким
14 февраля 2013

На гирьке написано 1 gr, а рядом — 1 кг.

Антон Романов
14 февраля 2013

Немного переделал стили Артёма, чтобы расстояние менялось кроссбраузерно и без таблиц. Что происходит при резиновой ширине и код:

http://rmnv.ru/$/ap-digits/

На рабочих проектах я использую препроцессоры и вынес стили в отдельные классы. Для родителя пишу @extend .journal, для дочерних элементов (в данном случае, li) — @extend .journal__column.

Блоки в таком случае ведут себя, как текст с выключкой по ширине.

Владимир Кузнецов
14 февраля 2013

Мне кажется, что иконки тут — это типичный декор без семантической нагрузки. Им самое место быть в виде фона у li. Опять же, их можно разместить все вместе в одном файле, т. е. сделать их спрайтами.

Хочу так же заметить, что селектор :last-child начал работать в IE только с 9-й версии. Если нужно выбирать какой-то крайний элемент, то больше процент поддержки среди браузеров будет у :first-child.

Кроме того, Артём, стоило бы уточнить по поводу пробелов между элементами li. Так как они получили display: inline-block, то пробельные символы (табуляция, переносы строк, и, собственно, пробелы) добавляют несколько пикселов между ними. Применять хак с отрицательным letter-spacing для Webkit уже нельзя (этот старый баг исправили) и от пробелов лучше избавиться вообще.

Евгений Максименков
17 февраля 2013

Артём, такой стиль селекторов (.ap-digits > li) только для примера или стиль кодирования в бюро?


20 марта 2013

Евгений, .ap-digits li и .ap-digits > li — разные селекторы. Первый найдёт все li внутри .ap-digits, даже вложенные друг в друга. Второй, со знаком >, найдёт только прямых детей .ap-digits.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Сайты для слабовидящих 2 За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 С чего начать изучение ЦСС? 1 Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5




Недавно всплыло

Защититься от случайного нажатия «Сдаться» 1 Без стоп-слов текст мне кажется сухим, чёрствым, грубым и резким 33 Как сделать нагляднее таблицу перфорированных лотков? Часть вторая 5 Расскажите о клише и устойчивых выражениях 13