|
|
Модератор форума: Yuri_G |
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Резиновое меню |
Резиновое меню |
Всем привет, очень прошу помощи.
Верстаю себе сайт с шаблона №1257. Можете глянуть led-complekt.ru. Вверху там есть меню - то что мне нужно, но беда в том, что оно не отрезинено. То есть не по всей ширине блока.А нужно чтобы по всей. И при добавлении нового пункта меню, оно также успешно резинилось. Я "тру-кодер", разбирался долго, читал маны и рекомендации о том, что нужно сделать через таблицу, но так и не смог настроить CSS как нужно. Очень прошу - пожалуйста, исправьте код, чтобы меню стало резиновым( Код /* Menus */ nav { padding: 0; text-align: center; background: #138bd0; /*border-bottom: 1px solid #3281d3;*/ box-shadow: 0 1px 0 #1a1c1d; width: 100%; display: table; } nav ul.uMenuRoot { list-style: none outside none; margin: 0 auto; padding: 0; } nav ul ul { background: none repeat scroll 0 0 #f5f5f5; left: -1px; opacity: 0; position: absolute; top: 100%; transition: all 0.2s ease-out 0.15s; visibility: hidden; white-space: nowrap; z-index: 1; text-align: left; } nav > ul > ul {border-left: 1px solid #00448a;} nav ul ul ul { left: 100%; padding-left: 1px; top: 0; } nav ul.uMenuRoot > li { list-style: none; display: inline-block; margin: 0; padding: 0; position: relative; border-left: 1px solid #ffffff; } nav ul.uMenuRoot > li:first-child {border: none;} nav ul.uMenuRoot > li:last-child {border-right: 1px solid #ffffff;} nav ul.uMenuRoot > li.has-submenu:hover {border-left: 1px solid #00448a;} nav ul.uMenuRoot > li > ul {border-left: 1px solid #00448a;} nav li { float: left; list-style: none outside none !important; position: relative; } nav li.has-submenu > a:after { content: "+"; display: block; position: absolute; right: 5px; top: 0; } nav li a:hover + ul { opacity: 1; visibility: visible; } nav li:hover > ul { opacity: 1; visibility: visible; } nav li li {float: none;} nav li li a {padding: 0 20px; display: block; line-height: 40px; text-decoration: none; color: #555;} nav li li:hover {background: #f5f5f5;} nav li li:hover > a, nav li li:hover a:hover {background: #e3e3e3; color: #000; text-decoration: none;} /* ----- */ /* Site Menus */ ul.uMenuRoot > li > a { font-size: 100%; text-decoration: none; display: block; color: #fff; padding: 0 20px; margin: 0 0 0 0; line-height: 35px; } nav li:hover > a, ul.uMenuRoot > li > a:hover, ul.uMenuRoot > li > .uMenuItemA { background: #0269b1; /*background-image: -webkit-linear-gradient(bottom, #138bd0, #094c96); /* For Chrome and Safari */ /*background-image: -moz-linear-gradient(bottom, #138bd0, #094c96); /* For old Fx (3.6 to 15) */ /*background-image: -ms-linear-gradient(bottom, #138bd0, #094c96); /* For pre-releases of IE 10*/ /*background-image: -o-linear-gradient(bottom, #138bd0, #094c96); /* For old Opera (11.1 to 12.0) */ background-image: #138bd0, #094c96; /* Standard syntax; must be last */ } .show-menu { position: absolute; top: 30px; right: 30px; width: 50px; height: 20px; cursor: pointer; background: #00448a; display: none; color: #fff; text-align: center; font-size: 80%; padding: 5px 10px; font-weight: bold; } .show-menu:hover {background: #e5e5e5;color: #000;} /* --------- */ |
Cruze, уточните, пожалуйста, детальней, что имеется в виду "отрезинилось": http://screencast.com/t/jXzTZEkjw ?
|
Cruze, для редактирования шаблонов необходимо иметь хотя бы базовые знания в HTML (язык разметки WWW документов) и CSS (Cascading Style Sheets) технологиях.
Перед любыми изменениями в шаблоне всегда сохраняйте резервную копию (бекап шаблона) (http://screencast.com/t/IsFYahlM0) Попробуйте убрать свойство float: left - (Дизайн - Управление дизайном (СSS) - строка 170) - http://screencast.com/t/0CTuq4nvIadu Пункты меню выровняются по центру блока, а новый пункт появится также по центру на следующей строке. |
| |||
| |||