Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 159
href="#" — это брак. А CSS интересный.
Кстати, как правильно делать?
href="/link" onclick="javascript();return false;"
Для юзеров с NoScript и ботов.
Как юзер NoScript могу сказать, что четверть современных сайтов — вообще без скриптов, еще половина могут без них работать (без всплывающих меню и прочего, но корректно). В вебе рулит информация, а скрипт — всего лишь удобная иногда примочка к ней.
Для более существенных событий, таких как логин или регистрация, делают отдельные странички для юзеров с отключенными скриптами.
Т.е. если скрипт включен, событие отработается и пользователю, к примеру, будет отдан блок входа на сайт, если скрипты отключены, он перейдет на страничку авторизации.
Т.е. если скрипт включен, событие отработается и пользователю, к примеру, будет отдан блок входа на сайт, если скрипты отключены, он перейдет на страничку авторизации.
потому что есть средняя кнопка мыши
И для "Open Link in New Tab".
обработчик не должен быть ссылкой, а кпопка отправки должна быть submit'ом
суть, еще как суть.
return false не имеет никакого отношения к сути элемента - оно просто отменяет действие по умолчанию при нерабочем яваскрипте.
ссылка должна куда-то вести, js будет лишь заменять переход по ссылке каким-либо действием (пример совсем близко - ссылка "войти" на хабре)
если же элемент не ссылается куда-либо, то, простите, какая же это ссылка?
рассматривайте UI сначала в отрыве от стилей - будет гораздо интереснее ;)
return false не имеет никакого отношения к сути элемента - оно просто отменяет действие по умолчанию при нерабочем яваскрипте.
ссылка должна куда-то вести, js будет лишь заменять переход по ссылке каким-либо действием (пример совсем близко - ссылка "войти" на хабре)
если же элемент не ссылается куда-либо, то, простите, какая же это ссылка?
рассматривайте UI сначала в отрыве от стилей - будет гораздо интереснее ;)
> открывает какое-нибудь окно
Во! Вот /link должен вести на это окно.
Просто видя руку с вытянутым пальцем над ссылкой/кнопкой, автоматически делаешь вывод "это ссылка", а не "это обработчик". Я думаю, я не один такой ((:
Во! Вот /link должен вести на это окно.
Просто видя руку с вытянутым пальцем над ссылкой/кнопкой, автоматически делаешь вывод "это ссылка", а не "это обработчик". Я думаю, я не один такой ((:
По правильному там должна быть ссылка пройдя по которой можно получить такой же результат как и с включённым js. Разница должна быть только в том, что понадобится загрузить новую страницу.
Это модель-которая легко трансформируется в любой конструкт
Спасибо!
Есдинственный минус у подобной реализации Sliding Doors, это то что прийдется указать жестко заданный размер шрифта в px, да и это не спасет от увеличения шрифта в Fire Fox.
Вери гуд. Спасибо.
Ждём решения для submit кнопок, бо такая кнопка не подойдёт для формы авторизации.
Ждём решения для submit кнопок, бо такая кнопка не подойдёт для формы авторизации.
onClick="this.form.submit();return false;"
Воспользуйтесь тегом button, немного изменив CSS (уберите привязку к тегу a или измените её на button). Тогда HTML будет примерно таким:
<code><button class="button" type="submit"><span>Отправить</span></button></code>
Работает точно так же, как обычный <input type="submit" />>. Основное отличие в том, что первый позволяет размещать в себе фрагменты HTML :)
<code><button class="button" type="submit"><span>Отправить</span></button></code>
Работает точно так же, как обычный <input type="submit" />>. Основное отличие в том, что первый позволяет размещать в себе фрагменты HTML :)
>>Специально для IE
>>В Internet Explorer нажатие кнопки не будет работать.
Надо было так ^__^
>>В Internet Explorer нажатие кнопки не будет работать.
Надо было так ^__^
Кнопка в Опере 9.5 себя очень странно ведет, то нажимается, то нет, то нажимается не везде, а только с правой стороны где вторая половинка фона.
В ИЕ 7 косяк: При нажатии на кнопку (кнопку дальше не отпускаем) и отвода курсора (теперь кнопку можно отпустить), кнопка остается в нажатом состоянии.
Но при клике в любое место страницы — все встает на свои места.
Да и обычному пользователю не прийдет в голову так извращаться с кнопкой, он кликнет и дело с концом ;)
Да и обычному пользователю не прийдет в голову так извращаться с кнопкой, он кликнет и дело с концом ;)
В Firefox 2.0.0.13 то же самое.
согласен (и с бо_обликом и с а_в)
это не косяк, это особенность click-события. К сожалению, фиксится только с помощью навороченного обработчика, который, по сути, заменяет клик
onmouseout=blur?
боюсь, придется тогда добавить, как минимум,
onmouseover=focus и, может быть, еще что-нибудьхм... да, тут извращений должна набраться небольшая тележка
например, умолчальное действие здесь будет перетягиванием ссылки...
маскировать ссылки под кнопки вообще не стоит
например, умолчальное действие здесь будет перетягиванием ссылки...
маскировать ссылки под кнопки вообще не стоит
к сожалению, это именно ссылки. Например, ссылка "купи меня", оформленная, как кнопка. Это же ссылка: она ведет на корзину с этим продуктом, а заказчикам хочется, чтобы выглядела поэффектнее. Вот и приходится извращаться...
я неправильно выразился...
имею в виду - подменять кнопки ссылками, т.е. должно быть более-менее понятно, что мы куда-то можем перейти и при этом соответственно должно быть понятно, что этот элемент будет себя вести как ссылка (можно перетянуть на другой таб, посмотреть адрес и т.п.)
в таком ключе описанный "косяк" будет восприниматься правильно, как нормальное поведение
например, имхо, стоит оставлять подчеркивание (хороший пример - большие кнопки скачивания на сайтах программ)
имею в виду - подменять кнопки ссылками, т.е. должно быть более-менее понятно, что мы куда-то можем перейти и при этом соответственно должно быть понятно, что этот элемент будет себя вести как ссылка (можно перетянуть на другой таб, посмотреть адрес и т.п.)
в таком ключе описанный "косяк" будет восприниматься правильно, как нормальное поведение
например, имхо, стоит оставлять подчеркивание (хороший пример - большие кнопки скачивания на сайтах программ)
А почему бы не сделать что-либо подобное с настоящей кнопкой? Только с масштабированием та же проблема, но специально для неIE можно сделать фон в svg.
Хотя все это нужно далеко не всегда. Если страница со стандартным стилем, ее проще оставить как есть, браузер будет использовать тему ОС для отрисовки элементов (не все браузеры умеют, но все же прогресс есть).
Хотя все это нужно далеко не всегда. Если страница со стандартным стилем, ее проще оставить как есть, браузер будет использовать тему ОС для отрисовки элементов (не все браузеры умеют, но все же прогресс есть).
А эта красота на SEO не повлияет?
Криво. Больше так не позорьтесь.
Ох помню затрахался я набор из нескольких «sliding doors»-кнопок ровнять средствами CSS по центру. Получилось, кроссбраузерно :)
А по поводу статьи... Мало. Где теория?
А по поводу статьи... Мало. Где теория?
Поделитесь опытом, пожалуйста?
Я думал статью в блог тут написать, но пока времени нет. Могу по памяти сказать - надо курить информацию на cssplay.co.uk+ознакомиться с поведением IE6/7 и делением CSS между ними. Насколько я помню, 2 основные концепции это display: table; и display: table-cell; в нормальных браузерах, и display: inline-block; в IE'х. Проблема «sliding doors» и наборов из них в том, что float используется...
трюк примитивный, но новичкам будет полезен, но что же ты не указал на его главные плюсы:
- не нужно ждать подгрузки второго изображения, то есть уходит неприятный эффект "догрузки"
- этот метод спасает от моргания в IE, который не в состоянии кэшировать фоновые изображения.
ps: по тому же принципу можно описать и 3й вариант для :hover.
- не нужно ждать подгрузки второго изображения, то есть уходит неприятный эффект "догрузки"
- этот метод спасает от моргания в IE, который не в состоянии кэшировать фоновые изображения.
ps: по тому же принципу можно описать и 3й вариант для :hover.
мне вот такой вариант больше нравится:
http://www.artlebedev.ru/tools/technogre…
коду немного побольше, но с масштабированием никаких проблем
http://www.artlebedev.ru/tools/technogre…
коду немного побольше, но с масштабированием никаких проблем
прикольная статья. Очень полезная информация ;)
указали бы, что это перевод. и ссылку на оригинал =)
В Firefox ломается при небольшом увеличении шрифта :(
>В Firefox ломается при небольшом увеличении шрифта :(
Да, фиксированная высота никуда не годится, ибо люди с плохим зрением (я в их числе) сайты смотрят под Ctrl-+
Зато в Firefox 3 при отключенном режиме "масштабировать только текст" проблем нет :)
Да, фиксированная высота никуда не годится, ибо люди с плохим зрением (я в их числе) сайты смотрят под Ctrl-+
Зато в Firefox 3 при отключенном режиме "масштабировать только текст" проблем нет :)
Кроме, проблемы с увелечением шрифта, есть вопрос:
Все подобные примеры очень классные, но практически всегда нужно использовать не меньше 2-х, а иногда больше картинок.
Я не большой специалист в CSS.
мой программер меня постоянно долбит, чтобы я минимизировал количество картинок на дизайн в силу понятных обстоятельств . Особенно, это касается при работе со сложными интерфейсами.
Т.е. мне приходится делать тяжелей код в хмтл, чтобы обойтись меньшим числом картинок, правилен мой подход?
Все подобные примеры очень классные, но практически всегда нужно использовать не меньше 2-х, а иногда больше картинок.
Я не большой специалист в CSS.
мой программер меня постоянно долбит, чтобы я минимизировал количество картинок на дизайн в силу понятных обстоятельств . Особенно, это касается при работе со сложными интерфейсами.
Т.е. мне приходится делать тяжелей код в хмтл, чтобы обойтись меньшим числом картинок, правилен мой подход?
sexy buttons, херня, так как не scalable
вот ещё кой-чего: http://www.monc.se/kitchen/59/scalable-c…
вот ещё кой-чего: http://www.monc.se/kitchen/59/scalable-c…
страшно было на кнопку с таким названием жать, но все-таки решился... вроде ракет в небе пока не видно. видимо не на тот скрипт у вас кнопка ссылается. поправьте баг)
Спасибо огромное.
Сори, я не понимаю, зачем делать этот эффект, если его будут видеть какие-то милисекунды... лучше сделать что-то похожее при наведении.
Графика для элементов интерфейса есть ЗЛО.
Скажите, кстати, а как можно кармограф тоже получить? Ну, за исключением того, чтобы написать собственный? ;) Прошу прощения за оффтопик.
Я полагаю, что здесь:
http://karma.goodrone.org.ru/
http://karma.goodrone.org.ru/
Зло — это пока элементы интерфейса относятся к браузеру. А когда они относятся к странице, что делать? Представьте сайт весь такой гламурненький и посреди него (ну в зависимости от системы конечно) серый шлакоблок…
Прочитано... обдумано.. "Красота - это когда нет ничего лишнего"...
Рано вам еще переводить, учите русский и будьте внимательнее.
"...мы должны учесть возможность растяжки кнопок. Для этого вы воспользуемся..."
"...мы должны учесть возможность растяжки кнопок. Для этого вы воспользуемся..."
Это опечатка. И это не дословный перевод, а переработка скорее.
Тогда зачем оформлять статью в виде перевода? Лучше в таком случае сразу написать, что, дескать, нашел крутой прием у Иван-Иваныча, хочу поделиться.
Так легче указать источник и от куда взял идею и где изложил.
В других темах очень много придирались по этому поводу, что я «вор» — источники не указываю и прочее, надоело слушать. Хотя всеравно услышал :(
В других темах очень много придирались по этому поводу, что я «вор» — источники не указываю и прочее, надоело слушать. Хотя всеравно услышал :(
Тогда попробуйте мой совет: если рассказываете о чем-то или ком-то своими словами, не надо оформлять это в виде перевода. Просто напишите в самом начале статьи, о чем это и у кого взяли. Поставьте себя на место других: мы читаем, возмущаемся наглым копипастом, а потом видим в конце статьи мелкую приписку.
Перевод подразумевает под собой более бережное отношение к оригиналу текста. Переводчик старается сохранить не только смысл, но и стилистику, приемы и интонации. Поверьте, не каждый копипаст с иностранного сайта можно считать достойным переводом.
Перевод подразумевает под собой более бережное отношение к оригиналу текста. Переводчик старается сохранить не только смысл, но и стилистику, приемы и интонации. Поверьте, не каждый копипаст с иностранного сайта можно считать достойным переводом.
>Поставьте себя на место других: мы читаем, возмущаемся наглым копипастом, а потом видим в конце статьи мелкую приписку.
Я не могу поставить себя на это место, для меня главное полезность информации, а не откуда она. Помоему кто так кропотливо обращает на это внимание просто психопат и ему, откровенно, нефик делать.
Я не могу поставить себя на это место, для меня главное полезность информации, а не откуда она. Помоему кто так кропотливо обращает на это внимание просто психопат и ему, откровенно, нефик делать.
> В Internet Explorer нажатие кнопки не будет работать, так что сделаем маленькую хитрость на javascript
Вы хоть в курсе, что в IE элемент button не будет реагировать на нажатие Enter, скажем на форме логина.
Вы хоть в курсе, что в IE элемент button не будет реагировать на нажатие Enter, скажем на форме логина.
а можно не использовать вложенный span, а использовать Псевдокласс :first-letter
http://habrahabr.ru/search/?searchfor=fi…
http://habrahabr.ru/search/?searchfor=fi…
маленький недочет: если "вдавить" кнопку и не отпуская левой клавиши мышки отвести курсор в сторону(за пределы) кнопка остается вдавленной
Покажите лучше, как сделать в IE6 полупрозрачный CSS-спрайт с тремя состояниями кнопок (обычное, наведенное и зажатое)...
То же можно реализовать, использую одну картинку вместо двух: http://temp.uratsakidogi.msk.ru/rocket/
(ссылкой почему-то не вставляется)
(ссылкой почему-то не вставляется)
Вот вам оригинал текста:
How to make sexy buttons with CSS
А вот еще на эту тему.
1) Создаем динамические кнопочки-ссылки с помощью CSS
2) Создание универсальных графических кнопок с помощью CSS
3) Необычное применение CSS: реализация эффекта rollover c помощью CSS
4) Реферат: Раздвижные двери CSS
5) Pure CSS Popups
Есть еще информация? Поделитесь.
How to make sexy buttons with CSS
А вот еще на эту тему.
1) Создаем динамические кнопочки-ссылки с помощью CSS
2) Создание универсальных графических кнопок с помощью CSS
3) Необычное применение CSS: реализация эффекта rollover c помощью CSS
4) Реферат: Раздвижные двери CSS
5) Pure CSS Popups
Есть еще информация? Поделитесь.
Поидее ретро, такие статьи все примерно одинаковые — слайдинг дурс + спрайты.
Для новичков может быть "вау", а для меня, например, ничего нового.
И вроде как иллюстрации из статьи я на каком-то буржуйском сайте видел)
Для новичков может быть "вау", а для меня, например, ничего нового.
И вроде как иллюстрации из статьи я на каком-то буржуйском сайте видел)
hover'а не хватает тогда уж.
на сайте Студии об этом есть статься - более практичная.
если в примере (под фоксом пробовал) надать кнопку и не отпуская увески курсор и отпустить - кнопка остаётся нажатой.
IMHO: кнопка должна быть кнопкой, но никак не ссылкой - об этом говорит PHP - он любит кнопки (особенно INPUT).
на сайте Студии об этом есть статься - более практичная.
если в примере (под фоксом пробовал) надать кнопку и не отпуская увески курсор и отпустить - кнопка остаётся нажатой.
IMHO: кнопка должна быть кнопкой, но никак не ссылкой - об этом говорит PHP - он любит кнопки (особенно INPUT).
В Safari 3.1 тоже корректно не работает... Никакого эффекта "нажатия" нет, о нем позно догадаться по переиодическому мирганию надписи только если по этой кнопке бешенно долбить...
И версия Владимира Токмакова для png
а мне не нравится как это выглядит.
И главное, что я критикуя ничего не могу предложить - не программист я, а дизайнер. Просто при нажатии на выпуклую кнопку будут несколько иначе ложиться тени и блики.
И главное, что я критикуя ничего не могу предложить - не программист я, а дизайнер. Просто при нажатии на выпуклую кнопку будут несколько иначе ложиться тени и блики.
приветствую. прикинь, а у меня наоборот =) нарисуй, а я заверстаю и запрограмлю современно, а?
Даже самому стало интересно как это выглядит. А вот так (+ посветлее):
off
move on
pressed
Это значит, что по сути тени не меняются. В нажатом состоянии они просто не такие резкие.
off
move on
pressed
Это значит, что по сути тени не меняются. В нажатом состоянии они просто не такие резкие.
Супер! до дому добирусь — сделаю =)
А как это будет на чисто былом фоне? #FFF
высветлил на скорую руку > photobucket
Но на самом деле, я показал как играют тени при нажатии. Не стоит брать эти картинки за окончательный вариант. Они с перспективой, а на веб-странице всё же лучше, чтобы её не было (или чтобы все детали подчинялись одной). Тут важно обратить внимание например на то, что на кнопке в нажатом состоянии появляется рефлекс внизу.
Где это написано про тень при нажатии?
Я думал в интернете нету теней. Тень есть у яблока к примеру. Но откуда ей взяться у кнопки?
Я думал в интернете нету теней. Тень есть у яблока к примеру. Но откуда ей взяться у кнопки?
Во-первых, по хорошему делать 2 конца и фон, а не один конец и еще один длинный конец. Ибо так кнопка будет действительно резиновой + будет меньше весить.
Во-вторых, как уже писал, ссылки должны иметь вид , чтобы она работала для noscript пользователей, ботов и пользователей со слабыми script бразуерами (mobile ie etc). Хорошим примером считаю http://www.basher.ru, не смотря на ajax всякие приблуды + js окна для регистрации и прочего, сайт корректно работает и с выключенным JS.
Во-вторых, как уже писал, ссылки должны иметь вид , чтобы она работала для noscript пользователей, ботов и пользователей со слабыми script бразуерами (mobile ie etc). Хорошим примером считаю http://www.basher.ru, не смотря на ajax всякие приблуды + js окна для регистрации и прочего, сайт корректно работает и с выключенным JS.
Нафига 2 конца и фон? Это не правильно. А если нужна кнопка в 2 строки а дальше в одну?
Добавим сюда тот факт, что под разными браузерами и на разных платформах шрифты неидентичны и могут просто не поместиться в рамки кнопки, и что тогда?
А Вы проверяли, будет ли меньше весить кнопка? А я проверял и не раз. В одном файле весит меньше на 10-25%
И юзайте < и > для угловых скобок.
Добавим сюда тот факт, что под разными браузерами и на разных платформах шрифты неидентичны и могут просто не поместиться в рамки кнопки, и что тогда?
А Вы проверяли, будет ли меньше весить кнопка? А я проверял и не раз. В одном файле весит меньше на 10-25%
И юзайте < и > для угловых скобок.
ок, реализуй на данном примере автора кнопку в 2 строки и покажи мне одну картинку, с помощью которой можно сделать резиновую кнопку, которая будет весить меньше на 10-25%, чем 2 отдельных конца и 1px фона.
1) кнопку растягивающуюся по горизонтали и вертикали (на две и более строк) с помощью двух концов и фона реализовать вообще нельзя. Точнее можно, но смысл нарезки на три части потеряется (тогда уж на 5 частей или 9: фон, 4 угла, 4 границы).
2) для сравнения размеров можешь взять этот архив: knoppa.zip
2) для сравнения размеров можешь взять этот архив: knoppa.zip
1) не потеряется, это раз. И два — твоим способом вообще эту проблему не решить.
2) сравнения размеров показали, что 3 части весят на 20+% меньше, чем одна
2) сравнения размеров показали, что 3 части весят на 20+% меньше, чем одна
2) Вы троллите или просто побоялись архив скачать? Или у Вас бааайты тлиннне-е?
Цельная кнопка 658 байт, три файла — 718 байт. То же самое и с RGB и с greyscale. Можно дополнительно дожать pngCrush, получив 527 байтов на цельной и 686 на разрезанной (23% разницы).
Вы, извините, как считали? И на каком примере?
Цельная кнопка 658 байт, три файла — 718 байт. То же самое и с RGB и с greyscale. Можно дополнительно дожать pngCrush, получив 527 байтов на цельной и 686 на разрезанной (23% разницы).
Вы, извините, как считали? И на каком примере?
Дейсвительно где-то я ошибся с калькулятором, действительно вы правы. Однако мозг пока не способен этого понять.
Но это не решает проблему «резиновой» кнопки.
Но это не решает проблему «резиновой» кнопки.
Чтобы Ваш мозг мог понять почему цельный файл меньше, почитайте про принцип сжатия и узнаете, что ещё в GIF появилось такое сжатие. Один из базовых принципов описыватся так: «рисовать в строку пиксель цвета [xR xG xB] N раз».
По поводу резиновости кнопки с Вами уже не хочу спорить. Рекомендую (как минимум) изучить матчасть (и поработать в вебстрое), и только после этого судить как быстрее, надёжнее, лучше, удобнее верстальщику…
По поводу резиновости кнопки с Вами уже не хочу спорить. Рекомендую (как минимум) изучить матчасть (и поработать в вебстрое), и только после этого судить как быстрее, надёжнее, лучше, удобнее верстальщику…
+ три запроса к серверу вместо одного
Делается очень просто и одной картинкой...
если вы считаете «умным» преподносить в скрытом виде не очень умный способ организации подобной кнопкой, путем склеивания двух картинок в одну — вам на wmaster.ru
Одна картинка - меньше запростов к серверу - быстрее загрузка.
2. Делается очень просто банальным CSS - даже без танцев с бубном:
2. Делается очень просто банальным CSS - даже без танцев с бубном:
a {
background: url(image.gif) no-repeat top right;
}
a span {
background: url(image.gif) no-repeat top left;
margin-right: 10px;
}
для полноты раскрытия темы еще хотелось бы побольше интерактивности на :hover, т.е. + еще одна картинка
Немного в сторону, но никто не припомнит способа вешания иконок на стандартные кнопки INPUT (BUTTON не предлагать)? Так что бы иконки нажимались вместе с кнопкой...
пральна, на png надо переходить
Красивые кнопки - красивыми кнопками, а вот у меня никак не выходит даже обычную кнопочку в форме темизировать. Все довольно просто: есть Drupal, пытаюсь приколотить панель регистрации в строку меню и форму поиска туда же, делаю все флоатами. В FF и других Strict-браузера все отображается отлично, а вот в IE6 - безбожно разъезжается (в особенности - форма поиска). Page.tpl.php выводит следующий стандартный HTML для формы логина-поиска:
<span class="login-search">
<div><a href="/user/login">Login</a>/<a href="/user/register">Sign up</a></div><form action="/search/node" accept-charset="UTF-8" method="post" id="search-theme-form">
<div> <input type="submit" name="op" id="edit-submit" value="Search" class="form-submit" />
<div class="form-item">
<input type="text" maxlength="128" name="search_theme_form_keys" id="edit-search-theme-form-keys" size="15" value="" title="Enter the terms you wish to search for." class="form-text" />
</div>
<input type="hidden" name="form_id" id="edit-search-theme-form" value="search_theme_form" />
</div></form>
</span>
Спан login-search я сам добавил, чтобы все в одной строчке (меню) было.
CSS (рабочий в FF) выглядит так:
/*общая форма для логина и поиска*/
.login-search {float:right; width:30%;}
/*форма логина*/
.login-search div {float:left; width:30%; height:12px;}
/*форма поиска*/
.login-search #search-theme-form {float: right; width: 70%}
.login-search #search-theme-form div {float: right; width: 100%}
/*кнопка*/
.login-search #search-theme-form div .form-submit {float: right; width:30%}
/*поле*/
.login-search #search-theme-form div .form-item {width:70%; float:left; position:relative; top:-13px;}
.login-search #search-theme-form div .form-item .form-text {width:100%; float:left;}
В итоге получаем отличную картинку в FF (см FF.bmp, смотрим здесь). А вот в IE6 все отвратительно (IE6.bmp, тоже смотрим на http://www.drupal.ru/comment/reply/4473/79858). Второй день ломаю голову, чем это может быть вызвано и как исправить....
<span class="login-search">
<div><a href="/user/login">Login</a>/<a href="/user/register">Sign up</a></div><form action="/search/node" accept-charset="UTF-8" method="post" id="search-theme-form">
<div> <input type="submit" name="op" id="edit-submit" value="Search" class="form-submit" />
<div class="form-item">
<input type="text" maxlength="128" name="search_theme_form_keys" id="edit-search-theme-form-keys" size="15" value="" title="Enter the terms you wish to search for." class="form-text" />
</div>
<input type="hidden" name="form_id" id="edit-search-theme-form" value="search_theme_form" />
</div></form>
</span>
Спан login-search я сам добавил, чтобы все в одной строчке (меню) было.
CSS (рабочий в FF) выглядит так:
/*общая форма для логина и поиска*/
.login-search {float:right; width:30%;}
/*форма логина*/
.login-search div {float:left; width:30%; height:12px;}
/*форма поиска*/
.login-search #search-theme-form {float: right; width: 70%}
.login-search #search-theme-form div {float: right; width: 100%}
/*кнопка*/
.login-search #search-theme-form div .form-submit {float: right; width:30%}
/*поле*/
.login-search #search-theme-form div .form-item {width:70%; float:left; position:relative; top:-13px;}
.login-search #search-theme-form div .form-item .form-text {width:100%; float:left;}
В итоге получаем отличную картинку в FF (см FF.bmp, смотрим здесь). А вот в IE6 все отвратительно (IE6.bmp, тоже смотрим на http://www.drupal.ru/comment/reply/4473/79858). Второй день ломаю голову, чем это может быть вызвано и как исправить....
Потратил вчера немного времени на освоение этого способа.
Читал ОЧЕНЬ ПОХОЖЕЕ ОПИСАНИЕ на английском Тут.
Наткнулся кстати на способ оформления TAB'ов с помощю HTML списков.
Жаль Кармы не хватает, написал бы :)
Читал ОЧЕНЬ ПОХОЖЕЕ ОПИСАНИЕ на английском Тут.
Наткнулся кстати на способ оформления TAB'ов с помощю HTML списков.
Жаль Кармы не хватает, написал бы :)
Может указывать как первоисточник не Чернев.Ру(не он же придумал технику) а оригинал? Или это PR?
ха… спасибо помогло :)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Делаем красивые кнопки