qazibum

Нет вариантов сделать элемент обтекаемым у которого position:absolute; ?

Да, на счет float я погорячился А display: block; разве не нужно указать для элемента a (для ссылки), чтобы он стал блочным элементом? Хотя и без этого вроде работает, но не уверен за все браузеры. У меня получилось установить справа внизу присвоив родительскому элементу position:relative; а самому элементу, как вы и написали position:absolute; bottom:0; right:0; А вот с обтеканием понятия не имею как сделать.

На странице, в блоке Х выводится элемент, изображение в ссылке <a id="foto" href="/3.jpg"><img src="/3.jpg"></a> Нужно, чтобы этот элемент всегда, вне зависимости от того, где он находится в блоке Х, отображался в правом-нижнем углу блока Х. В блоке Х могут быть и другие элементы, но это не должно влиять на отображение элемента. Кроме того, что все остальное должно обтикать этот элемент. Как сделать css'ом? Может я туплю, что-то голова уже плохо варит. a#foto{ float:right; margin:0; padding:0; display:block; position:absolute; }

Так и сделал, спасибо.

На локалке. Короче, поговорка "утро вечера мудренее" работает. Но что мудрости не до конца хватило Получился такой код, не весь, самый важный ul.menu li.active:after{ content:url(../images/after.png); } ul.menu li:hover:after{ content:url(../images/after.png); } ul.menu li.active:hover:after{ content:url(../images/after.png); } ul.menu li+li.active:before{ content:url(../images/before.png); position:absolute;display:block; } ul.menu li+li:hover:before{ content:url(../images/before.png); position:absolute;display:block; } ul.menu li.active+li:hover:before{ content:url(../images/before2.png); position:absolute;display:block; margin:0 0 0 -14px; } Теперь работает все, кроме положения, когда активна вторая кнопка и наводишь мышь на первую. В этом случае картика, которая подставляется справа к первой кнопке ul.menu li:hover:after{ content:url(../images/after.png); } смещает вторую кнопку и между ними образуется косая полоска другого цвета. Это нормально при условии, что вторая кнопка не активна. Т.е. надо прописать условие для первой кнопке, когда вторая активна. Вот как это сделать в css? Прописать условие для второй кнопке, когда активна первая - нет проблем ul.menu li.active+li:hover:before А для первой, когда активна вторая? Сделал гифку

position:absolute;display:block; примененный к бефору, улучшили ситуацию. Сейчас при наведение картинки прыгают, когда бефорам или афтером добавляются боковые.

Можно пример такого решения? Не получается у меня. То before ведет себя как after, то скачут.

А нет, все нормально. Второй раз юхаю эти элементы, не научился еще хорошо. wildhind, psywalker спасибо большое!

Уголок должен меняться в зависимости от состояния пункта меню. Видите на рисунке, в первом посте, он разный. А в чём проблема по состоянию менять фон у псевдика? Да вроде ни в чем. Только у меня не получается задать свойства только для первого и второго элемента списка. Всего элементов пять, а уголок только на первом и втором. li+li+li:after{content:none;} - не работает. Точнее работает, но одновременно и li:after{content:url(ugol.png) работает.

Уголок должен меняться в зависимости от состояния пункта меню. Видите на рисунке, в первом посте, он разный.

В меню есть одно место где дизайнер нарисовал косую линию. Линия разделяет пункты меню. Меню имеет три состояния: холодное, при наведение, активное. У всех трех состояний разные бэкграунды. Все нормально за исключением этой косой линии. Установленная ширина пункта меню не позволяет нормально подставить нужный фон при наведение и когда пункт активен. Вот рисунок Белая линия на проблемном месте это разделитель пунктов, пунктам задана ширина и из-за этого при наведение изображение подставляется только на заданную ширину, остается уголочек без нужного фона. Вроде понятно? Как сделать, чтобы фон подставлялся правильно? Без js, желлательно только css.

в том, что меню изначально выдает текст. это все равно, что клеить обои поверх старых, вместо того, чтобы содрать их и поклеить качественно. потратит больше времени - но в будущем разберется как эта цмс генерирует списки меню и сделает все намного быстрее. это не ко мне вопрос, а к автору тему. возможно используются мудреные шрифты и(или) эффекты при наведении. С одной стороны правильнее убрать текст в меню, чтобы без костылей. С другой стороны для сео полезнее оставить, но тогда скрыть грамотно. CMS joomla, я знаю как там убрать текст из меню, но хотелось бы по хитрому сделать Картинка из-за дизайна, там шрифты и два эффекта при наведение и активное меню. Сработало, так и оставлю Спасибо.

Делается на cms, спрятать проще visibility работает, но не хотелось бы. Мало ли ПС не так поймут. z-index хочу, но почему-то не получается. Вот такой код. <html><head><style> div#menu{ background: url(m.png); height: 28px; width: 300px; position: relative; z-index: 2; } ul.menu{ list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; } ul.menu li{ float: left; position: relative; z-index: 1; } ul.menu a{ display: block; width: 150px; position: relative; z-index: 1; } ul.menu a span{ position: relative; z-index: 1; } </style></head><body> <div id="menu"> <ul class="menu"> <li><a href="/"><span>123</span></a></li> <li><a href="/"><span>456</span></a></li> </ul> </div> </body></html>

Делаю меню, которое должно быть картинкой, на картинки нарисованный текст. Само меню, ссылки - текстовые. Поместил картинку, а на ней текст ссылок. Теперь задача спрятать этот текст, чтобы был виден только текст, который на картинке. Цветом не получится, картинка разноцветная, задать 1px - видно. Как делать в таких случаях? МОжет быть можно сделать так, чтобы картинка была над текстом, наверху? Чтобы текст под ней прятался.

Тупой вопрос, но мне надо быстро разобраться что к чему. javascript только начал учить, другие языки не знаю. Могу сделать сайт на cms, верстка - не проблема, пока не требуется js. Сейчас мне надо понять что такое ajax и с чем его едят. Как я понял ajax это как бы отвитвление javascript'а, правильно? И если знать javascript, то ajax будет легко освоить, так? Какое отношение имеет jquery к ajax? Какие материалы лучше использовать при освоение ajax для моего уровня знаний? Буду благодарен за поробный ответ и/или ссылку.

Есть еще способы? Тот, что по ссылке не подходит. С помощью -webkit-appearance: none; удалось объяснить хрому, а ie, opera не понимают. Добавил div под select и задал ему position:absolute; margin-top:-30px; Он прям на селекте, но он главнее селекта, т.е. селект не работает, когда нажимаешь на него. Можно как-нибудь сделать, чтобы div был над селектом, что background работал, но чтобы селект откликался на нажатие?

Там если переделывать, то проще что-то другое придумать. Можно ли скрипт написать так, чтобы он повторно передавал в input значение из option? Или как-то без select передавал значение из option, чтобы изменения в select ни как не отражались на input?

Ее нельзя убирать, она обновляет (ajax) следующий селект. Если убрать, то этот блок теряет смысл. Проблема, наверное, в том, что нижние два селекта выводятся одной функцией. Выбираешь первый селект, второй обновляется (загружается) и ставит в option начальное значение, соответственно в первом тоже меняется на начальное. Вот вся функция, она два селекта выводит. function list_harakt($parameters, $selected_param=array(), $item_name, $parameter_label, $vid='', $disabled = '', $prefix='') { echo "<div id=\"bislif\"><select class=\"inpbox\" "; echo "name=\"" . $item_name ."[]\" onchange=\"this.parentNode.getElementsByTagName('input')[0].value = this.options[this.selectedIndex].text;".$prefix."typeChange()\">\n"; echo "<option value=\"\">Выбрать " . $parameter_label . "</option>\n"; foreach ($parameters as $parameter) { if ($parameter != '') { $selected = ''; if (!empty($selected_param) && in_array($parameter, $selected_param)) $selected = "selected=\"selected\""; echo "<option value=\"" . urlencode($parameter) . "\" " . $selected . ">" . $parameter . "</option>\n"; } } echo "</select><div class=\"input_wrapper\"><input id=\"bisin\" type=\"text\" name=\"noname\" value=\"Выбрать " . $parameter_label . "\"></div></div>\n"; }

Отправил ссылку на емейл.

Вот в этом топике решение для стилизации select. Все хорошо работает за исключением одного селекта, которому не получается передать значение выбранного option. У этого селекта option прописан не на прямую в коде, а вот так " . $parameter_label . " В инпуте я прописал вот так <input id=\"bisin\" type=\"text\" name=\"noname\" value=\"Выбрать " . $parameter_label . "\"> там слеши надо ставить перед ковычками. Первое он передает, а если выбрать что-то из списка, то на секунду это значение остается, а после закрытия списка принимает первое значение, которое было. значение value в input передается вот так onchange="this.parentNode.getElementsByTagName('input')[0].value = this.options[this.selectedIndex].innerHTML;" и этот onchange="this.parentNode.getElementsByTagName('input')[0].value = this.options[this.selectedIndex].text;" Подскажите, как изменить код, чтобы корректно работало? Чтоб выбранные значения оставались.

Доброго времени суток. Делаю select с измененным видом. Заменяю изображениями, без js, только css. Вчера придумал способ, но он не работает в chrome и opera. Код такой <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru" > <head><style> #mod1 { margin:200px 0 0 350px; padding:0; width:250px; height:210px; } #mod1 select { border:0; padding:5px 0 0 0; width: 247px; height: 27px; background: url(bistrl3.png) 90% 0 no-repeat; } #mod3 { margin:10px 0 0 0; padding:0 0 0 7px; background: url(bistrl1.png) 0 0 no-repeat; } #mod4 { background: url(bistrl2.png) repeat-x; width: 225px; height: 27px; overflow: hidden; } </style></head><body> <div id="mod1"><div id="mod3"><div id="mod4"> <select class="inpbox"> <option value="">Выбрать</option> <option value="1">1111111111111</option><option value="2">2222222222222</option><option value="3">3333333333333</option> </select> </div></div></div> </body></html> В chrome отображается очень коряво, третья и вторая картинки не видны. Третья чуть-чуть совсем. Я загрузил архив, там 3 пикчи и html - Скачать файл prim.zip

Можно, сейчас придумаю что-нибудь. А как бы вы сделали? psywalker, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

chrome странно width воспринимает. Если в #cn3 вместо width:5.2%; поставить width:5%; то получиться щель. А в firefox, например, дробная ширина ломает блоки. Теперь вопрос - как в css указать конкретно для chrome этот стиль? И почему так происходит? <html> <head> <style type="text/css"> body {background: #333;} #centr { float:left; width:60%; margin:0px; background: #000; } #cont { min-height:100px; padding:0px; } #cn1 { background: #fff; height:20px; width:5%; float:left; } #cn2 { background: #fff; height:20px; width:90%; float:left; } #cn3 { background: #fff; height:20px; width:5.2%; float:right; } </style> </head> <body> <div id="centr"> <div id="cont"></div> <div id="cn1"></div><div id="cn2"></div><div id="cn3"></div> </div> </body> </html>

Обратись ко-мне на почту. Разберёмся. psywalker09@gmail.com Спасибо, но только что решил проблему. Надо было поставить position:relative; для body.

Ребят, подскажите плиз, как сделать выдвигающуюся панель не прозрачной и чтобы Slide Panel, на которую нажимать надо для открытия/скрытия, была активна даже когда под ней текст на странице. Я эту панель вот здесь взял - http://anton.shevchuk.name/javascript/mootools-for-beginners/ а тут пример ее работы - http://anton.shevchuk.name/wp-demo/mootools-for-beginners/simple-slide-panel.html Только начиная осваивать Javascript