galaydas

Решил как подсказал psywalker спасибо

Спасибо, буду учить ))

Всем привет! Вопрос у меня такой, есть горизонтальное меню с выпадающими подменюшками, все работает, но есть проблема, у родительских li стоит фиксированная ширина 110px, а выпадающие подпункты должны быть вообще без ширины, т.е. display:block float:left или типа того, только так можно поставить отступы справа и будет все красиво, но дочерние li наследуют ширину родительских и получается: Что делать не знаю, как сбросить значение ширины для вложенных li? Нужно решить проблему только с стилях CSS, не влазя в HTML Вот код: <div id="top_menu"> <ul> <li><a href="#">Главная</a></li> <li><a href="#">Памятники</a> <ul> <li><a href="#">Вертикальные формы</a></li> <li><a href="#">Горизонтальные формы</a></li> </ul> </li> <li><a href="#">Гравюра</a> <ul> <li><a href="#">Гравюра на камне</a></li> <li><a href="#">Гравюра на зеркале</a></li> <li><a href="#">Гравюра на металле</a></li> </ul> </li> <li><a href="#">Аэрография</a> <ul> <li><a href="#">Роспись интерьеров</a></li> <li><a href="#">Автотомобилей</a></li> <li><a href="#">Ноутбуков</a></li> <li><a href="#">Бытовой техники</a></li> </ul> </li> <li><a href="#">Контакты</a></li> </ul> </div> /*————-Верхнее меню—————*/ #top_menu { position: relative; margin-top:10px; display:block; right: 50%; float: right; } #top_menu ul { position: relative; right: -50%; list-style:none; padding-left:15px; padding-top:-5px; } #top_menu ul li { display: block; float:left; margin-right:15px; background: url(../img/shadow_menu.jpg) no-repeat bottom center; height:32px; padding-bottom:16px;} #top_menu ul li a { color:#000; text-decoration:none; font-size:16px; display:block; float:left; background:#eee; height:26px; text-align:center; padding-top:6px; margin-right:15px;} #top_menu ul>li { width:110px;} #top_menu ul>li a {width:110px;} #top_menu ul li a:hover {color:#C2A100;} /*— ВЫПАДАЮЩИЕ ПУНКТЫ —*/ #top_menu ul li ul{ float:left !important; font-size:11px; font-weight:normal; position:absolute; background-color:#FFC; padding-right:20px; width:600px; left:-2999px; top:30px; margin-left:10px; opacity:0; } #top_menu ul li ul li { display:block; padding:0 !important; float: left; background: #0CF; !important; text-align:left !important; } #top_menu ul ul a{ white-space:nowrap; background:none !important; } #top_menu ul li:hover ul{ left:0; opacity:1; z-index:1000; } #top_menu ul li ul li:hover a{ color:#000 !important; } #top_menu ul li ul li a{ color:#C2A100; text-decoration: underline !important; text-align:left !important; padding:0 !important; display:block; float:left; padding-bottom:0 !important; }

Всем привет, вот такая у меня проблема, может кто сталкивался, сделал горизонтальное меню, с выпадающими вниз подпунктами Активной ссылке и активному пункту подменю присваивается class active Как можно сделать так, как ЗДЕСЬ, только средствами css или другими скриптами ? Пока что сделал так: <div id="menu_glav"> <ul> <li><a href="index4.html">Gallery</a> <ul> <li><a href="index2.html">Concept</a></li> <li><a href="index2.html">Shows</a></li> </ul> </li> <li><a href="index6.html">Artworks</a> <ul> <li><a href="index2.html">New</a></li> <li><a href="index2.html">Archives</a></li> <li><a href="index2.html">Academy</a></li> </ul> </li> <li><a href="#">CV</a></li> <li><a href="index3.html">News</a></li> <li><a href="#">Mass Media</a> <ul> <li><a href="index2.html">New</a></li> <li><a href="index2.html">Archives</a></li> <li><a href="index2.html">Academy</a></li> </ul> </li> <li><a href="#">Contacts</a></li> </ul> </div> #menu_glav { margin:6px 0 0 0px; font-size:14px; font-weight: bold; float:right;} #menu_glav ul { list-style:none;} #menu_glav ul li { margin:0 30px 0px 0; float:left;} #menu_glav ul li a { color:#666; text-decoration:none; background:url(../img/a_u_hover.png) right no-repeat; padding-right:15px;} #menu_glav ul li a:hover { color: #000; background:url(../img/a_u.png) no-repeat right; text-decoration:none;} #menu_glav ul{ float:left; width:100%; position:relative; margin-bottom:10px; } /*— ВЫПАДАЮЩИЕ ПУНКТЫ —*/ #menu_glav ul ul{ float:left; font-size:12px; font-weight:normal; position:absolute; padding-right:20px; width:100%; left:-9999px; opacity:0; -webkit-transition:0.25s linear opacity; } #menu_glav ul ul li{ padding-top:10px; padding-bottom:20px; padding-left:13px; float: left; margin-right:10px !important; background: url(../img/point_a.png) no-repeat left; } #menu_glav ul ul a{ white-space:nowrap; display:block; background:none !important;} #menu_glav ul li:hover ul{ left:0; opacity:1; } #menu_glav ul li:hover a{ text-decoration: none; background:url(../img/a_u_hover.png) right no-repeat; color:#000; } #menu_glav ul li ul li:hover a{ text-decoration: none; color:#000 !important; } #menu_glav ul li ul li a{ text-decoration: none; color:#666 !important; } #menu_glav .active ul { float:left; font-size:12px; font-weight:normal; position:absolute !important; padding-right:20px; width:100%; overflow:hidden !important; left:0px !important; display:block !important; opacity:1 !important; -webkit-transition:0.25s linear opacity; } #menu_glav ul li ul .active a { color:#F33 !important;} #menu_glav .active a { color:#000;} Не знаю что и делать.

Да, все верно :-) HTML <td id="left_col"> <div id="bg_bg"> <div id="bg_bg_in"> <h3>Заголовок</h3> <p>Текст</p> </div> </div> </td> CSS #left_col { padding-right:45px; background:url(../img/bg_bg.png) top center no-repeat; overflow:hidden; } #bg_bg {background: url(../img/bg_bg2.png) repeat-y ; margin-top:500px; background-position:top center; } #bg_bg_in {position:relative; top:-500px; margin-bottom:-500px;} То что надо, Благодарю за помощь :-) Вроде все и просто, но не сразу доходит. Спасибо!

В каких разных браузерах UL разное по высоте, уточните ? Добавьте в body min-width:640px; тогда при уменьшении экрана вроде не разъезжается

Спасибо за совет, но если поставить margin-top, то смещается вниз и текст тоже. (см ссылку вверху) Вот код: #left_col {padding-right:45px; background:url(../img/bg_bg.png) top center no-repeat;} #bg_bg {background-image: url(../img/bg_bg2.png) ; background-position: center; background-repeat: repeat-y; margin-top:400px;} Может быть я что то не так делаю, если нижнюю картинку не повторять по (Y) то все хорошо позиционируется через background-position, но как только вставляю Y, все.. поехало.. PS. Нижняя картинка вообще другая будет, я просто принцип понять хочу :-)

Вот у меня такая проблема. На этом сайте Страница сайта, в области контента (два background), один no-repeat, другой repeat-y. Можно ли сделать так, что бы второй начинал повторения после первой картинки? Уже все перепробовал, и блоки друг в друга вставлял, не знаю что и делать, важно, что бы при увеличении контента второй bg удлиннялся