Кроссбраузерное выравнивание кнопок-изображений в формах
Вторник, 27 мая 2008
Часто при верстке дизайна сталкиваюсь с необходимостью использовать в формах графические кнопки вместо стандартных.
Как известно каждому, даже начинающему HTML-кодеру, по дефолту, с отображением этих кнопок у браузеров есть проблемы — они попросту прыгают, относительно текстового поля по вертикали.
Конечно, для верстальщика это не проблема, и все легко решается за пару минут, но пути таких решений иногда просто повергают в шок.
Одни умудряются загонять формы в таблицы и выравнивать поля по вертикали в ячейках, что ведет к увеличению объема XHTML-кода. Другие обертывают форму в <div>...</div> и подгоняют кнопку по вертикали с помощью CSS-свойств margin.
В этом случае можно добиться желаемого, пока пользователь не увеличит размер шрифта на странице. Размер текстового поля увеличится и кнопка снова поедет, так как у нее установлен фиксированный отступ…
Хочу поделиться своим решением для этой проблемы, которое не требует каких-либо ухищрений и лишних телодвижений.
Для начала, возьмем простенькую форму из рисунка выше.
XHTML-код:
1 2 3 4 | <form name="searchForm" id="searchForm" action="..."> <input type="text" id="searchInput" size="20" maxlength="50" /> <input type="image" id="searchButton" src="button.gif" alt="Поиск" /> </form> |
Далее можно идти к цели двумя путями: написать CSS для каждого из полей через id или присвоить им общий class. Если форма большая и в ней много полей, то я предпочитаю class, в примере же можно писать стили для id, предварительно сгруппировав их.
CSS-код:
1 2 3 | #searchInput, #searchButton { vertical-align: middle; } |
Да, на самом деле это все. Решение эффективное и простое в использовании. Теперь можно сколько угодно менять размер шрифта, элементы формы всегда будут выровнены относительно друг друга по вертикали.
Можете протестировать форму ниже в IE 6,7, Mozilla и Opera — везде отображается одинаково.
P.S. Если бы мы использовали class, то CSS-код выглядел бы так:
1 2 3 | .vAlignMiddle { vertical-align: middle; } |
Ну и не забудьте прицепить этот класс к полям формы. Успехов в верстке!
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:
* * *
[...] внимание оформлению форм. Советую прочесть статью «Кроссбраузерное выравнивание кнопок-изображений в ...», сэкономите себе много времени [...]
Спасибо, даже не ожидал, что решается так просто :)
Обычно мутил с margin'ами.
А откуда такое поведение? Ведь vertical-align — это свойство ячеек таблицы?
Кстати, в Safari (и, естественно в Chrome) тоже прекрасно работает.
Необязательно, может применяться и к встроенным элементам, не только к ячейкам таблиц.
пипец, ты автор жжешь)
естественно у тебя в примере будет по вертикали все отлично, элементы то одинакового размеру))
а вот у меня не все так гладко)) если размер поля ввода побольше поставишь, то нахер все едет))
#search input{
vertical-align: middle;
}
@sikwel, покажите пример, ато складывается впечатление, что вы не понимаете о чем говорите.
Кнопка и поле будут всегда выровнены по горизонтальной оси относительно друг друга.
Огромное спасибо за статью! Вы — гений. Несколько часов убила на выравнивание. Мутила с маргинами, padding и т.д. Все бес толку. Даже не думала, что vertical-align применим к изображениям. Спасибо!
извините, автор, написал в горячке, глупый был, разбирался, недопонял, приношу свои извинения, метод отлично работает, спасибо Вам за дельный способ.
А вот вопросик, наверное в тему, разбираюсь с выравниванием подобным, только не изображений, а кнопок заданный тем же тегом , кроссброузерно никак не получается... и решение найти не могу... но точно знаю что решение есть и оно очень простое... вот только кто-бы подсказал (:
з.ы. хотелось бы способ выравнивания в дивах, с таблицами более-менее ясно..., но я учусь их использовать не по прямому назначению, только в крайнем случае, когда дивами сделать никак не получается...
з.з. ы наверное для всех новичков в верстке, выравнивание элементов форм — кошмарный сон))
@sikwel, выложите куда-нибудь пример, посмотрим.
Автор, спасибо, помогли.
@sikwe — выложите пример, интересно взглянуть, ибо формы — действительно кошмарным сон, по другому и не назовешь!
все класс ... автору спасибо ! оч простое и эффективное решение
piumosso.ru/a/css/forms/compact-cols — тут способ выравнивания полей формы!
Спасибо, давно меня мучил этот вопрос, решение весьма простое, но почему-то как всегда никак не мог догадаться сам.