x
 
Илья Бирман
13 сентября 2012

Кстати, Артём, а как верстать радиокнопки имени Плотникова? Чтобы всё ровно попадало куда надо.



Илья!

Надёжного решения, сохраняющего родные «шкурки» системы и браузера, я не знаю, и сделал бы всё картинками, стилизовав все другие радиогруппы на сайте. Достаточно просто сверстать эти кнопки «пиксель в пиксель», используя обычные картинки, ЦСС 3 или СВГ.

Если это неприемлемо и надо отталкиваться от настоящих элементов, я бы искал способ подложить копьё и зеркало под абстрактные радиокнопки, выравняв их относительно центра. Вот что у меня получилось в первом приближении:



Cкриншот кнопок в Виндоусе с классической темой оформления, браузер — ИЕ:

Виндоус 7, кнопки поехали:

Опера на Маке, тоже есть, что подвигать:

Хром и Сафари, красота:

Айпад, нужен вектор:


ХТМЛ получился таким:

<div class="radio">
  <label>
    <span class="input">
      <input type="radio" name="plotnikov" checked>
    </span>
  <span class="label">не указан</span>
</label>
</div>
<div class="radio">
  <label>
    <span class="input input--male">
      <input type="radio" name="plotnikov">
    </span>
    <span class="label">мужской</span>
  </label>
</div>
<div class="radio">
  <label>
    <span class="input input--female">
      <input type="radio" name="plotnikov">
    </span>
    <span class="label">женский</span>
  </label>
</div>

ЦСС:

.radio {
  display: table-row;
  /* * — для ИЕ 7− */
  *display: block;
  *zoom: 1;
  font-family: Verdana, sans-serif;
  font-size: 11px;
}
.radio .input {
  /* Табличность — для простого
  выравнивания по вертикали */
  display: table-cell;
  *display: inline;
  *zoom: 1;
  width: 28px;
  height: 28px;
  text-align: center;
  vertical-align: middle;
}
.radio .input--male,
.radio .input--female {
  background: url('sex.sprite.png') no-repeat;
}
.radio .input--male {
  background-position: -28px 0;
}
.radio .input--female {
  background-position: 0 0;
}
.radio .input input {
  margin: 0;
}
.radio .input input:not(:checked) {
  /* Чтобы кругляшок
  не просвечивал в АйОСе */
  background: #fff;
}
.radio .label {
  display: table-cell;
  *display: inline;
  *zoom: 1;
  height: 28px;
  vertical-align: middle;
}

Главная проблема в том, что кнопки непредсказуемо съезжают в разном окружении, несмотря на стили. Я не поленился бы расставить их по местам грязными хаками в каждом отдельном браузере, но не готов советовать этот путь другим.

Быть может, уважаемые советчики подскажут лучшее решение?


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

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

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

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

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

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

Как переходить на переписанные с нуля сервисы? Как организовать работу удалённой команды разработчиков? С чего начать вёрстку ХТМЛ‑страницы 2 Как донести подход HADI до руководства? 4




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

Хочу научиться сторителлингу 2 В бюро есть таймтрекинг для сотрудников? 5 2 Хочу научиться сторителлингу 9