Вид для печати
Всем привет.
Помогите сверстать такой Select:
[Only registered and activated users can see links. Click Here To Register...]
Нужно, что бы картинка просто была возле выбранного значения в селекте. В выпадающем списке картинок НЕ НУЖНО.
В Mozilla это сделать просто (через background-image + padding + margin у option). А вот в IE и Opera проблема.
я бы сделал так (если что старшие подправят [Only registered and activated users can see links. Click Here To Register...] ):
работает в ФФ и в Опере, а в ИЕ, естественно, нет..Код:<!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 и так далее...)
к сожалению, я не программер [Only registered and activated users can see links. Click Here To Register...]
[/quote]Цитата:
Originally posted by mamba@May 7 2007, 20:35
background:url(star.gif) no-repeat;
эта строчка вроде вообще background не отображает.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Все отображается. Рипит тут не причем...
Скриптами не хочу. Это криво. Мне нужно решение HTML+CSS
Пример, который привел garA прекрасно справляется с поставленной задачей. Правда, через "Ж", но справляется... )
Причем в IE тоже все отображается. Только с небольшим дефектом. И никакие скрипты здесь не нужны.
Про дефект в ИЕ согласен, но вот если сделать так:
То половина дефекта пропадает.Код:* html select{
border:solid 1px #A5ACB2;
height:20px;
}
Cinic
Это Вы к чему? Масло масляное...
IE прекрасно понимает правила, которые написаны и без "* html..."
[/quote]Цитата:
Originally posted by Aykroyd@May 7 2007, 21:18
Cinic
Это Вы к чему? Масло масляное...
IE прекрасно понимает правила, которые написаны и без "* html..."
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Ну могу вам сказать что левая картинка (c *html)
правая без *html
все это выводится в ИЕ 7.0... :hi:
Можно еще так сделать(предварительно создав класс ie, с height:22px).
Код:<![if !IE]><select><![endif]>
Cinic
В плане дефекта речь идет не о седьмом, а о шестом IE...
В этой связи хотелось бы поинтересоваться, а что Вы понимаете под "* html":
1. Применительно к шестому IE.
2. Применительно к седьмому IE.
знаю, что через "Ж" [Only registered and activated users can see links. Click Here To Register...], поэтому и написал:Цитата:
Пример, который привел garA прекрасно справляется с поставленной задачей. Правда, через "Ж
[Only registered and activated users can see links. Click Here To Register...]Цитата:
если что старшие подправят
и на этом спасибо [Only registered and activated users can see links. Click Here To Register...]Цитата:
но справляется... )
а если серьездно, то хотелось бы знать, может есть более "цивилизованные" методы..
что по этому поводу думает Zigzag и Null? кстати, где они?
[/quote]Цитата:
Originally posted by garA@May 8 2007, 00:17
а если серьездно, то хотелось бы знать, может есть более "цивилизованные" методы..
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Лично мне таковые не ведомы )
[/quote]Цитата:
Originally posted by garA@May 8 2007, 00:17
что по этому поводу думает Zigzag и Null? кстати, где они?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Осмелюсь предположить, что Zigzag до сих пор отмечает получение диплома. )) [Павел, мы тебя теряем )]
А null, по всей видимости, в звездных войнах участвует. )
[/quote]Цитата:
Originally posted by Aykroyd@May 7 2007, 21:53
Cinic
В плане дефекта речь идет не о седьмом, а о шестом IE...
В этой связи хотелось бы поинтересоваться, а что Вы понимаете под "* html":
1. Применительно к шестому IE.
2. Применительно к седьмому IE.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
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'>[Only registered and activated users can see links. Click Here To Register...]</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]Цитата:
Originally posted by mamba@May 7 2007, 18:37
такое вообще делают скриптами(скрытые div и так далее...)
к сожалению, я не программер [Only registered and activated users can see links. Click Here To Register...]
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
вот вам программерское решение, т.к. пока с формами мы мало, что можем сделать, нужно ждать повсеместного распространения xForms
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
[/quote]Цитата:
Originally posted by garA@May 7 2007, 21:17
знаю, что через "Ж" [Only registered and activated users can see links. Click Here To Register...], поэтому и написал:
[Only registered and activated users can see links. Click Here To Register...]
и на этом спасибо [Only registered and activated users can see links. Click Here To Register...]
а если серьездно, то хотелось бы знать, может есть более "цивилизованные" методы..
что по этому поводу думает Zigzag и Null? кстати, где они?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
пока имеем то, что имеем, советую на данный момент не сильно заморачиваться с формами
[/quote]Цитата:
Originally posted by Aykroyd@May 7 2007, 21:26
Лично мне таковые не ведомы )
Осмелюсь предположить, что Zigzag до сих пор отмечает получение диплома. )) [Павел, мы тебя теряем )]
А null, по всей видимости, в звездных войнах участвует. )
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
да из больницы выписался я только...
[/quote]Цитата:
Originally posted by Zigzag@May 13 2007, 15:02
вот вам программерское решение
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Имхо, гадость все это.
В IE и Опере отступы разные, полосы прокрутки в textarea появляются в любом случае. Причем появляются некрасиво. Checkbox и radio-button не выбираются при щелчке мышью непосредственно на них. Только при выборе соответствующего лэйбла. А это не есть правильно...
Мое мнение – уж лучше добиться кроссбраузерной попиксельной точности в отображении полей стандартного вида. Это тоже нелегко. Но вполне реализуемо... )
[/quote]Цитата:
Originally posted by Zigzag@May 13 2007, 15:02
да из больницы выписался я только...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Уже в курсе... (
Больше не болей. [Only registered and activated users can see links. Click Here To Register...]
В общем делема, есть радиокнопка на форме HTML
нужно задать как то ей стиль, а в частности что бы кружочек был не серый по умолчанию,а ,скажем красный.
Что только не делал и стиль привязал
но очертание красное получается квадратика вокруг этой радиокнопки.Код:<input name="vote_check" type="radio" checked value="0" class="radiobutton">
Неужели нельзя сделать круглую красную кнопку ?
Вот, такую хочу, как в примере