Hijacker

Возникла еще одна похожая проблема. Я бы присвоил родительскому <div> overflow:hidden, но внутри этого родителя выпадающее меню, и его не будет видно <div id="bar2"> <div class="loginplusLP_94"></div> <div class="iceVmCartModule" id="vm_module_cart"> <div class="lof_vm_top">...</div> ... </div> </div> #bar2{background:#d0cfcb;border-bottom:#c3c3c1 1px solid;padding:15px} #bar2>div{float:left;max-width:40%} #bar2>div:last-child{float:right} #vm_module_cart { width:200px; position:relative;} #vm_module_cart .lof_vm_top { width:100%; height:40px;} #vm_module_cart .lof_vm_top .lof_top_1, #vm_module_cart .lof_vm_top .lof_top_2 { clear:both;} /* Cart dropdown */ #vm_module_cart .lof_vm_bottom { background:#eee; left: 0; padding-bottom: 5px; position: absolute; overflow:hidden; top: 70px; width: 100%; z-index: 1000;} #vm_module_cart .lof_vm_bottom .lof_item { margin:5px 7px 7px; padding:0 0 7px; position:relative; overflow:hidden;} .lof_vm_bottom_btn { position:relative; overflow:hidden; padding-bottom:2px; margin:0 7px 2px} http://jsfiddle.net/NnDUT/4/ Заранее благодарен за помощь.

#right{overflow:hidden} спасло положение. Спасибо!

2 npofopr, ну если стилей много, то почему бы не уменьшить существенно размер css-файла?) 2 ils & wwt, убрал <div class="clr"></div> и сделал <div class="orderby-displaynumber clr"> - помогло, СПАСИБО, высоту принимает) Только теперь выяснилось почему принимало именно ту высоту. Слева модули... не знаю как, но они вылазят на правую часть. Помогите! Как убрать влияние блоков слева на правую сторону? 1. вывод с левыми блоками 2. без них <div class="clr" id="content"> <div id="left"> <aside> <div class="mod"> <div> <div class="modhead">VM - Shopping cart</div> <div class="modbody"> <div id="vmCartModule" class="vmCartModule ">...</div> </div> </div> </div> </aside> </div> <div id="right"> <div class="category-desc">Hand Tools</div> <div class="browse-view"> <div class="orderby-displaynumber clr"> <div class="orderby">...</div> <div class="display-number">...</div> </div> </div> </div> #content{padding:25px 0;background:url(../images/shadow-content.png) top center no-repeat} #left{float:left;width:250px} #right{margin:0 15px 0 265px} /*modules*/ .mod{background:url(../images/shadow-mod.png) bottom right no-repeat;padding:0 0 12px;margin:0 0 20px} .mod>div{background:#fbfbfb;border:1px solid #eee;border-radius: 0 5px 5px 0} .modhead{border-bottom:1px solid #eee;font-size:26px;padding:15px} .modbody{border-top:1px solid #fff; padding:15px}

Здравствуйте. Есть проблема - родительский элемент <div class="orderby-displaynumber"> не принимает высоту внутренних элементов... Приходится писать костыль типа height:30px (но так не годится), с .clr{clear:both;overflow:hidden;} он принимает непонятную высоту (хотя Firebag не показывает, что его растягивает) <div class="orderby-displaynumber"> <div class="orderby"> <div class="orderlistcontainer"><div class="title">Сортировать по</div><div class="activeOrder"><a href="..." title=" +/-">Название +/-</a></div>...</div> <div class="orderlistcontainer"><div class="title">Производитель: </div><div class="Order"> Manufacturer</div></div> <div class="clr"></div> </div> <div class="display-number">Показано 1 - 4 из 4<br><select>...</select></div> <div class="clr"></div> </div> .orderby-displaynumber{background:#ссс;margin:10px 0;padding:15px} .orderby{width:70%;float:left} .display-number{width:30%;text-align:right;float:left} .clr{clear:both;overflow:hidden} результат - без указания высоты (верхнее), без последнего <div class="clr"></div> (внизу) Пожалуйста помогите с проблемой, или дайте ссылку на статью с фиксом. Заранее благодарен.

Люди!

я не про... может обьясните, что нужно добавить? Куда нужно добавить експершн, и что в нем писать? Я так понял нужно div#opacity { background: #FFF; bottom: 0; opacity: 0.5; position: absolute; top: 0; width: 300px; height: 250px; filter: expression( runtimeStyle.filter = 'alpha(opacity='+currentStyle.opacity*50+')' ) filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ filter: alpha(opacity=50); /* IE +*/ -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */ opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */ } Верно?

Хм, получилось о_О , до этого по похожему примеру пробовал - нифига не получалось.) Спасибо. Вот исх. коды, всё ли правильно выполнено? <table id="headpanel"> <tr> <td id="headpanel_l">...</td> <td id="headpanel_r"> <div id="opacity"></div> <div id="headpanel_reset"> <div id="search">поиск</div> <div id="time">часы</div> <div id="headinfo">название сайта</div> </div> </td> </tr> </table> #headpanel_r { width: 300px; position: relative; } div#opacity { background: #FFF; bottom: 0; opacity: 0.5; position: absolute; top: 0; width: 300px; height: 250px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ filter:alpha(opacity=50); /* IE +*/ -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */ opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */ } div#headpanel_reset { position: relative; z-index: 1; } Никаких скриптов не нужно? На каких браузерах будет работать?

Я так понял, что РГБа более простой и кроссбаузерный способ заливки одним цветом? В статье написано что он воспринимается только последними версиями браузеров, а как же быть со старыми версиями? http://swetlanabayer.ru/blog/opacity/ - решение фильтром вылечит только ИЕ, или и другие браузеры? И почему применяется градиент, а не обычный фильтр? ЗЫ. Я склонен больше к кроссбраузерности чем к валидности.

Здравствуйте! Искал темы и в нете и на этом форуме, так и не решился ни на один из вариантов, либо решил - но не получалось. Раньше сталкивался с прозрачностью, но она была на верхних слоях, сейчас же мне нужно, что бы родительский элемент был полупрозрачным, а все элементы внутри - нормальные. Пытался играть со слоями свойством z-index, но безуспешно. <table id="headpanel"> <tr> <td id="headpanel_l">...</td> <td id="headpanel_r"> <div id="headpanel_reset"> <div id="search">поиск</div> <div id="time">часы</div> <div id="headinfo">название сайта</div> </div> </td> </tr> </table> #headpanel_r { width: 300px; background: #FFF; opacity: 0.3; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); } #headpanel_reset { opacity: 1.0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); } Этот код конечно не работает, но можно ли как-то в этом духе отменить прозрачность от дочерних элементов (поиск, часы и имя сайта), при этом с поддержкой старых браузеров??? ПНГ-24 вариант, но я так понял проблемы появляются у юзверей ИЕ до 7-й версии? Или обьясните мне, тупому, как вылечить ИЕ от невосприятия ПНГ? Заранее благодарю!

спасибо! полезная штука.... filter:progid:dximagetransform.microsoft.alphaimageloader(src='/images/bg.png', sizingMethod=''); синтаксис правильный?

<div id="maintable"> <div id="mainbg"> </div> <div id="maincontent"> <div id="logo"> </div> <div></div> <div id="bottom"></div> </div> </div> #maintable { width: 90%; min-width: 780px; max-width: 1500px; height: 100%; } #mainbg { background: #FFF; height: 100%; opacity: 0.7; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); position: relative; z-index: 1; } #maincontent { height: 100%; position: relative; z-index: 2; } Как теперь фон растянуть во всю высоту блока maintable? Подскажите пожалуйста!

а при чем здесь ширина? От этого что-то изменится? И да, я о ИЕ и 4-м и 5-м и 6-м.... всё верно.

а как же Ослики до 7-й версии??? они же пнг по моему не поддерживают.

прошу прощения.... никогда по слоям не раскладывал(((( какие атрибуты нужно прописать в html и css?

#header h1 { display: block; } #header span { display: block; float: right; } попробуй это... или на крайний случай вставь таблицу... многим помагает)))) #header h1 { display: block; } #header span { display: block; float: right; } попробуй это... или на крайний случай вставь таблицу... многим помагает))))

Здравствуйте! Идея в чем - внизу на фоне документа есть рисунок, а главный блок должен быть на 70 процентов непрозрачным. html: <div id="bg"> <div id="maintable"> <div id="logo"> </div> <div></div> </div> </div> css: body { background: #FFFFFF url(../images/bg.jpg) bottom no-repeat; height:auto !important; height:100%; } #bg { background: #FFF; opacity: 0.7; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); height: 100%; } #maintable { opacity: 1.0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); } #logo { background: url(../images/logo.jpg) no-repeat left top; height: 200px; } картинка логотипа не 100% видима, как впрочем и все элементы внутри #bg, возвращение #maintable { opacity: 1.0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); } не помагает.

Вопрос чуть изменился: <td id="menu"> <ul class="menu"> <li class="item1"><a href="#"><span>1</span></a></li> <li class="item3"><a href="#"><span>2</span></a></li> <li class="item4"><a href="#"><span>3</span></a></li> <li class="active item5" id="current"><a href="#"><span>4</span></a></li> </ul> </td> как сделать при помощи CSS горизонтатьное, ростянутое на всю ширину меню?

Неужели никто не знает, как справится? Пожалуйста, помогите!

не подскажешь, где это можна сделать?

плохо.... хотелось бы кроссбраузерности((((

Я не могу html код изменить.... только CSS

Вариант, но может быть случай, когда через ЦМСку добавится еще один пункт меню, тогда 33.3% не будет "удовлетворять". Если что, падинг можно сделать через padding-top и padding-bottom.

Здравствуйте уважаемые форумчане! Сейчас пробую освоить одну CMS, и для изменения стиля навигационного меню, можно редактировать только CSS. Вывод html (фиксирован): <td id="menu"><table width="100%" cellspacing="1" cellpadding="0" border="0"> <tr><td nowrap="nowrap"> <a id="active_menu" class="mainlevel" href="1">ссылка</a> <a class="mainlevel" href="2">ссылка2</a> <a class="mainlevel" href="3">ссылка3</a> </td></tr> </table> </td> нужно, что бы три ссылки растянулись по всему <td id="menu"> равномерно. текущий css (на что меня хватило): #menu table{ height: 30px; width: 1000px; } #menu tr td { display: block; width: 100%; margin: 0px; } #menu .mainlevel{ display: block; float: right; height: 16px; padding: 7px; background: url(../images/navigation.png) 0 -30px; border: #333 1px solid; font-size: 16px; ... } Пожалуйста помогите!