Всем привет.
Помогите сверстать такой Select:
[Только зарегистрированные пользователи могут видеть ссылки. ]
Нужно, что бы картинка просто была возле выбранного значения в селекте. В выпадающем списке картинок НЕ НУЖНО.
В Mozilla это сделать просто (через background-image + padding + margin у option). А вот в IE и Opera проблема.
я бы сделал так (если что старшие подправят):
работает в ФФ и в Опере, а в ИЕ, естественно, нет..Код:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title></title> <style type="text/css"> select{ ****border:solid 1px #A5ACB2; ****height:20px; } option{ ****outline:none; } #sel_box{ ****position:relative; ****margin:50px; } #img{ ****position:absolute; ****background:url(star.gif) no-repeat; ****width:24px; ****height:22px; ****left:-23px; } </style> </head> <body> <div id="sel_box"> ****<div id="img"></div> ****<select> *<option>item1</option> *<option>item2</option> *<option>item3</option> ****</select> </div> </body> </html>
ЗЫ буду следить за этой темой..
background:url(star.gif) no-repeat;
эта строчка вроде вообще background не отображает.
где-то я встречался с этим...
по-моему в том самом explorere...
я всегда пишу background-image отдельно, background-repeat отдельно и т.д.
а вопрос интересный. подумаю...
такое вообще делают скриптами(скрытые div и так далее...)
к сожалению, я не программер
Скриптами не хочу. Это криво. Мне нужно решение HTML+CSS
Пример, который привел garA прекрасно справляется с поставленной задачей. Правда, через "Ж", но справляется... )
Причем в IE тоже все отображается. Только с небольшим дефектом. И никакие скрипты здесь не нужны.
Про дефект в ИЕ согласен, но вот если сделать так:
То половина дефекта пропадает.Код:* html select{ border:solid 1px #A5ACB2; height:20px; }
Cinic
Это Вы к чему? Масло масляное...
IE прекрасно понимает правила, которые написаны и без "* html..."
[/quote]
Ну могу вам сказать что левая картинка (c *html)
правая без *html
все это выводится в ИЕ 7.0...
Можно еще так сделать(предварительно создав класс ie, с height:22px).
Код:<![if !IE]><select><![endif]>
Cinic
В плане дефекта речь идет не о седьмом, а о шестом IE...
В этой связи хотелось бы поинтересоваться, а что Вы понимаете под "* html":
1. Применительно к шестому IE.
2. Применительно к седьмому IE.
знаю, что через "Ж"Пример, который привел garA прекрасно справляется с поставленной задачей. Правда, через "Ж
если что старшие подправят
и на этом спасибоно справляется... )
а если серьездно, то хотелось бы знать, может есть более "цивилизованные" методы..
что по этому поводу думает Zigzag и Null? кстати, где они?
[/quote]
Лично мне таковые не ведомы )
[/quote]
Осмелюсь предположить, что Zigzag до сих пор отмечает получение диплома. )) [Павел, мы тебя теряем )]
А null, по всей видимости, в звездных войнах участвует. )
[/quote]Originally posted by Aykroyd@May 7 2007, 21:53
Cinic
В плане дефекта речь идет не о седьмом, а о шестом IE...
В этой связи хотелось бы поинтересоваться, а что Вы понимаете под "* html":
1. Применительно к шестому IE.
2. Применительно к седьмому IE.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
7ой обходит то что после *html.
6ой не знаю, я им давно не пользовался.
я пользуюсь седьмым, а про то что еще шестым много людей пользуется забываю постоянно :blush2:.
А для всех ИЕ(включая 7ой) я потом приписал ниже:
вставить такой код:
соответственно создав класс ieКод:<![if !IE]><select><![endif]> <option></option> ...остальные опции </select>
Cinic
Хм. ))
Если по Вашим словам 7ой "обходит" то, что после * html, что ему тогда мешает выполнить вот это вот правило:
Оно же без "* html". ) И присутствует в примере, любезно приведенном garA.Код:select {border: solid 1px #A5ACB2; height:20px;}
Или Вы предлагаете убрать его и заменить на Ваше:
Если так, то посмотрите как с Вашим "* html" все это будет смотреться в Firefox и Опере. Это для начала. ) Или может быть Вы считаете, что garA просто от балды свойства для select без "* html" прописал?Код:* html select {border:solid 1px #A5ACB2; height:20px;}
P.S. Условные комментарии – тоже не панацея. Для седьмого есть решение намного проще... )
я же говорил уже ранее, я отказался от * html(7ой обходит инструкцию, и размеры высоты выравниваются по картинке, но если высоту картинки увелчить, то задница получается), потом с * html в FF все гуд было, Оперу не открывал =(Originally posted by Aykroyd@May 8 2007, 18:38
Cinic
Хм. ))
Если по Вашим словам 7ой "обходит" то, что после * html, что ему тогда мешает выполнить вот это вот правило:
Оно же без "* html". ) И присутствует в примере, любезно приведенном garA.Код:select {border: solid 1px #A5ACB2; height:20px;}
Или Вы предлагаете убрать его и заменить на Ваше:
Если так, то посмотрите как с Вашим "* html" все это будет смотреться в Firefox и Опере. Это для начала. ) Или может быть Вы считаете, что garA просто от балды свойства для select без "* html" прописал?Код:* html select {border:solid 1px #A5ACB2; height:20px;}
P.S. Условные комментарии – тоже не панацея. Для седьмого есть решение намного проще... )
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>
Ну условные комменты не панацея, а если есть способ проще сообщите плиз...
Конструкцию * html обходит не только седьмой. Ее обходят все нормальные браузеры, за исключением одного самого что ни на есть "ненормального"... И посему на этой конструкции и зиждется один из самых популярных хаков для IE6.
Вся беда в IE7 от того, что плевать он хотел на border для select-а...
А способ проще таков:
илиКод:select {border: solid 1px #A5ACB2; height: 20px;} *:first-child+html select {height: 22px;}
И никаких условных комментариев...Код:select {border: solid 1px #A5ACB2; height: 20px;} *:first-child+html select {height: auto;}
Гораздо более злободневная проблема проявляется в данном случае в IE6.
И вот ее-то как раз, по моему скромному мнению, решить не представляется возможным...
[/quote]
вот вам программерское решение, т.к. пока с формами мы мало, что можем сделать, нужно ждать повсеместного распространения xForms
[Только зарегистрированные пользователи могут видеть ссылки. ]
[Только зарегистрированные пользователи могут видеть ссылки. ]
[/quote]Originally posted by garA@May 7 2007, 21:17
знаю, что через "Ж"
и на этом спасибо
а если серьездно, то хотелось бы знать, может есть более "цивилизованные" методы..
что по этому поводу думает Zigzag и Null? кстати, где они?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
пока имеем то, что имеем, советую на данный момент не сильно заморачиваться с формами
[/quote]Originally posted by Aykroyd@May 7 2007, 21:26
Лично мне таковые не ведомы )
Осмелюсь предположить, что Zigzag до сих пор отмечает получение диплома. )) [Павел, мы тебя теряем )]
А null, по всей видимости, в звездных войнах участвует. )
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
да из больницы выписался я только...
[/quote]
Имхо, гадость все это.
В IE и Опере отступы разные, полосы прокрутки в textarea появляются в любом случае. Причем появляются некрасиво. Checkbox и radio-button не выбираются при щелчке мышью непосредственно на них. Только при выборе соответствующего лэйбла. А это не есть правильно...
Мое мнение – уж лучше добиться кроссбраузерной попиксельной точности в отображении полей стандартного вида. Это тоже нелегко. Но вполне реализуемо... )
[/quote]
Уже в курсе... (
Больше не болей.
В общем делема, есть радиокнопка на форме HTML
нужно задать как то ей стиль, а в частности что бы кружочек был не серый по умолчанию,а ,скажем красный.
Что только не делал и стиль привязал
но очертание красное получается квадратика вокруг этой радиокнопки.Код:<input name="vote_check" type="radio" checked value="0" class="radiobutton">
Неужели нельзя сделать круглую красную кнопку ?
Вот, такую хочу, как в примере
Ваши права
