-
Кнопки: reloaded
Удивительно, как некоторые граждане извращаются, чтобы сделать элементарные вещи. Странно, что никто не предложил простого решения такой простой задачи, особенно когда не учитывается размер шрифта и не нужна полупрозрачность. Вот мой вариант, как можно решить такую задачу:
Первое, что нужно сделать, это внимательно посмотреть и проанализировать исходный материал. Я вижу здесь обычный блок с отступами, на который наложена фоновая картинка.
То есть нужно сделать инлайновый блок высотой 22 пикселя, боковым паддингом в 12 пикселей и фоновой картинкой. Но есть небольшая проблема: текст внутри может меняться. Вместе с этим, естественно, должна «увеличиваться» фоновая картинка. Как этого добиться? Очень просто.
А что если мы сделаем два вложенных друг в друга блока и обоим положим одну и ту же картинку: первому блоку сделаем выравнивание по левому краю, а второму — по правому?.
Для этого саму картинку нужно сделать достаточно длинной — пикселей 400 по ширине,— чтобы даже очень длинный текст поместился. Реализация очень простая: два элемента с фоновой картинкой, вложенных друг в друга, внутреннему говорим
padding: 0 12px;. Внутренний элемент разопрет внешний до нужных размеров.Но есть еще одна незадача: фоновая картинка внутреннего элемента полностью перекрывает фон внешнего элемента:
Исправить это, опять же, довольно просто: снизим левый отступ у внутреннего элемента на 3 пикселя и сместим его на эту же величину вправо, освободив, тем самым, левый угол:
Теперь приступаем к верстке. По сути, нам нужно указать свойства только внутреннему элементу, сделав так, чтобы внешний элемент сам подстроился под внутренний. Для задания точных размеров нам всего-лишь нужно сделать эти элементы инлайн-блоками:
.styled-button, .styled-button button { background:url(button.png) no-repeat; display:-moz-inline-stack; display:inline-block; /* Эмуляция для FF2 */ font-size:11px; } .styled-button { margin-right:3px; } .styled-button button { border:0; margin:0; padding:0 12px 0 9px; position:relative; left:3px; height:22px; line-height:22px; background-position:top right; white-space:nowrap; }Сам HTML-код совсем уж простой:
Естественно, мы, как и автор заметки на Хабре, забили на то, что пользователь захочет увеличить размер шрифта. Для таких случаев есть более универсальный метод.
25 комментариев
Тоже был в шоке, когда прочитал заметку на хабре.
Единственное, что не нравится в Вашем варианте ( хотя не уверен насчёт button, но с input – 100%) – это дополнительные проблемы с выравнивание по вертикали текста кнопки в firefox, но сам такими же кнопками пользуюсь.
Согласен, есть текое. Можно добавить дополнительный элемент и точнее подогнать под базовую линию.
В последнем проекте решили проблему через css-хак для firefox с нижним падингом.
а для чего нужен вариант с забиванием на изменение размера шрифта?
Хабр вообще задротный сайт.
А что-то тестовая страница по разному выглядит в IE7, FF2 и Chrome. В двух последних кнопка не нажимается.
Поправка, ошибся: FF3 конечно же
Не смотря на то, что самому тоже приходилось “верстать кнопки”, я никогда не понимал этого. Не люблю когда дизайнеры начинают рисовать собственные элементы интерфейса – кнопочки, поля ввода, переключалки (особо ненавижу).
Андрей, тоже задался этим вопросом.
Я так понял что нажатие кнопки зависит от того что во что класть. Попробовал span класть в button – везде кнопка начала нажиматься кроме IE, а если наоборот то в IE нажимается, а в нормальных браузерах нет.
Как раз хотел вопрос задать, не правильнее ли в button класть span?
В файрфоксе кнопки вообще визуально не нажимаются. А в IE7 при нажатии исчезает 1 пиксельная каёмка сверху.
У меня не было цели показать, как правильно делать такие кнопки, я всего лишь продемонстрировал идею, как можно решать подобные задачи. Я сам не стал бы пользоваться этим способом для создания кнопок (и вообще всего, где участвует текст), и уж тем более рекомендовать его другим. Естественно, нужно потратить еще немного времени и написать чуть больше кода, чтобы добиться правильного отображения во всех браузерах.
Я сегодня вечером напишу свои мысли насчет использования кнопок в вебе и элемента <button> в частности.
А как вообще бороться с левым-правым паддингом у кнопок — в ИЕ он больше чем в остальных браузерах? (в этом примере, кстати, тоже)
Можно попробовать только для IE вообще убрать боковой паддинг. Но я бы посоветовал избавится от элемента <button>.
чтобы левый-правый паддинг у input[@type=submit] в IE стал похож на паддинг в остальных браузерах, нужно прописать для input overflow: visible, для button наверно тоже, хотя я не пробовал
Решается так:
overflow: visible;
//width: 0;
//line-height: 0;
Если width: 0 не указать, возникают проблемы, когда кнопку вставляешь в ячейку таблицы. А высота строки мешает выглядить кнопке «скромно»
Прошу прощения, не //line-height: 0; а //height: 0;
Прошу прощения в примере там где
display:-moz-inline-stack;
display:inline-block; /* Эмуляция для FF2 */
Если я понял правильно, то эмуляция должна быть для первого правила, а не для второго?
Да, я перепутал строчки
Так онаж не жмётся!
я наверное тоже извразенец
Это дело пяти минут. Я всего лишь продемонстрировал способ создания таких кнопок.
Да
Особенно глядя на то, как это выглядит в Safari
Не давно на хабре написал статью
Решение весьма похоже, но с некоторыми косяками.
Добрый день!
Если кнопка располагается всегда на одной линии, а в данном случае это так,
надо использовать такую конструкцию:
display:inline;/* то есть не трогаем display */
height: Npx;
line-height: Npx;
Вот и все
Вообще-то идея довольно старая, и вроде бы называется это дело “раздвижные двери”(или я ошибаюсь?) и писали о ней на alistapart.com, есть даже переводы и не мало…
Возможно, так и называется. Как видите, не все читают ALA. Я, кстати, тоже
А если картинка – прозрачная png. Получается будет наложение и даст не тот эффект.