Помощник
|
Горизонтальное меню - выравнивание пунктов по центру. |
sunder
|
Сообщение
#1
|
||
|
|
||
|
|||
Azazaza_hb |
25.2.2012, 23:36;
Ответить: Azazaza_hb
Сообщение
#2
|
|
#menu {display: table;} добавить и width:100% убрать
|
|
|
sunder
|
Сообщение
#3
|
|
|
|
|
sunder
|
Сообщение
#4
|
|
в принципе разобрался в том что вы написали. нужно не совсем так.. это я уже делал. нужно чтоб меню резиновым было, а пункты прямо по центру.
( тоесть чёрная полоска от края до края экрана а главные пункты меню по центру. ) |
|
|
Azazaza_hb |
26.2.2012, 2:38;
Ответить: Azazaza_hb
Сообщение
#5
|
|
вот так можно тогда
<!DOCTYPE html>
<html> <head> <title>CSS3 windows-1251 dropdown menu - demo</title> <meta charset="Utf-8"> <style> #menu, #menu ul { margin: 0; padding: 0; list-style: none; } #menu-wrapper{ border: 1px solid #222; background-color: #111; background-image: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background-image: -webkit-linear-gradient(#444, #111); background-image: -o-linear-gradient(#444, #111); background-image: -ms-linear-gradient(#444, #111); background-image: linear-gradient(#444, #111); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset; } #menu { display: table; margin: 0px auto; } #menu:before, #menu:after { content: ""; display: table; } #menu:after { clear: both; } #menu { zoom:1; } #menu:first-child{ border-left: 1px solid #222; } #menu #first-a{ border-left: 1px solid #444; } #menu li { float: left; border-right: 1px solid #222; -moz-box-shadow: 1px 0 0 #444; -webkit-box-shadow: 1px 0 0 #444; box-shadow: 1px 0 0 #444; position: relative; } #menu a { float: left; padding: 12px 30px; color: #999; text-transform: uppercase; font: bold 12px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #menu li:hover > a { color: #fafafa; } *html #menu li a:hover { /* Только для IE6 */ color: #fafafa; } #menu ul { margin: 20px 0 0 0; _margin: 0; /*Только для IE6*/ opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 9999; background: #444; background: -moz-linear-gradient(#444, #111); background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-box-shadow: 0 -1px rgba(255,255,255,.3); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 -1px 0 rgba(255,255,255,.3); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #menu li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #menu ul ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; /*Только для IE6*/ -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); box-shadow: -1px 0 0 rgba(255,255,255,.3); } #menu ul li { float: none; display: block; border: 0; _line-height: 0; /*Только для IE6*/ -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; box-shadow: 0 1px 0 #111, 0 2px 0 #666; } #menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #menu ul a { padding: 10px; width: 130px; _height: 10px; /*Только для IE6*/ display: block; white-space: nowrap; float: none; text-transform: none; } #menu ul a:hover { background-color: #0186ba; background-image: -moz-linear-gradient(#04acec, #0186ba); background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background-image: -webkit-linear-gradient(#04acec, #0186ba); background-image: -o-linear-gradient(#04acec, #0186ba); background-image: -ms-linear-gradient(#04acec, #0186ba); background-image: linear-gradient(#04acec, #0186ba); } #menu ul li:first-child > a { -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } #menu ul li:first-child > a:after { content: ''; position: absolute; left: 40px; top: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #444; } #menu ul ul li:first-child a:after { left: -6px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 6px solid transparent; border-top: 6px solid transparent; border-right: 6px solid #3b3b3b; } #menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #menu ul ul li:first-child a:hover:after { border-right-color: #0299d3; border-bottom-color: transparent; } #menu ul li:last-child > a { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } </style> </head> <body> <div id="menu-wrapper"> <ul id="menu"> <li><a href="/" id="first-a">Главная</a></li> <li> <a href="">Band</a> <ul> <li> <a href="">О группе</a> <ul> </ul> </li> <li> <a href="">Статьи/Интервью</a> <ul> </ul> </li> <li> <a href="">Дискография</a> <ul> </ul> </li> <li> <a href="">Даты Туров</a> <ul> </ul> </li> </ul> </li> <li> <a href="">Тексты</a> <ul> <li> <a href="">Eisbrecher</a> </li> <li> <a href="">Antikoerper</a> </li> <li> <a href="">Suende</a> </li> <li> <a href="">Eiszeit</a> </li> <li> <a href="">DHMW</a> <ul> <li> <ul> </ul> </li> <li> <ul> </ul> </li> <li> <ul> </ul> </li> </ul> </li> </ul> </li> <li> <a href="">Медиа</a> <ul> <li> <a href="">Аудио</a> <ul> <li> <ul> </ul> </li> <li> <ul> </ul> </li> <li> <ul> </ul> </li> </ul> </li> <li> <a href="">Видео</a> <ul> <li> <a href="">Клипы</a> <ul> </ul> </li> <li> <a href="">Making Off</a> <ul> </ul> </li> <li> <a href="">Live</a> <ul> </ul> </li> <li> <a href="">Интервью</a> <ul> </ul> </li> </ul> </li> <li> <a href="">Фото</a> <ul> <li> <ul> </ul> </li> <li> <ul> </ul> </li> <li> <ul> </ul> </li> </ul> </li> </ul> </li> <li><a href="">Форум</a></li> <li> <a href="">О нас</a> <ul> <li> <a href="">О сайте</a> <ul> </ul> </li> <li> <a href="">Обратная связь</a> <ul> </ul> </li> <li> <a href="">ПРАВИЛА</a> <ul> </ul> </li> <li> <ul> </ul> </li> </ul> </li> </ul> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(function() { if ($.browser.msie && $.browser.version.substr(0,1)<7) { $('li').has('ul').mouseover(function(){ $(this).children('ul').css('visibility','visible'); }).mouseout(function(){ $(this).children('ul').css('visibility','hidden'); }) } }); </script> </body> </html> |
|
|
sunder
|
Сообщение
#6
|
|
Спасибо большое. помогло!
теперь встало несколько попутных проблем.. IE 9 отказывается отображать меню и пункты... во всех браузерах нормально всё, но не в IE.. посмотрите пожалуйста sunde . ru меню установлено правильно, но вот IE его не понимает.. хотя если чистый HTML файл только с меню создать, то всё работает.. В чём может быть проблема? |
|
|
Очень |
26.2.2012, 17:10;
Ответить: Очень
Сообщение
#7
|
|
|
|
|
Azazaza_hb |
26.2.2012, 17:48;
Ответить: Azazaza_hb
Сообщение
#8
|
|
отдельный файл с меню работает в ие, видимо тут в чем-то другом проблема, не подключается скрипт какой-то или конфликты.. хз
|
|
|
sunder
|
Сообщение
#9
|
|
Да видать какой то конфликт.. хотя на копии сайта пробовал убирать вообще все скрипты кроме меню.. всё равно не работает в IE.
В общем запретил доступ к сайту всем пользователям IE, с предложением скачать нормальный браузер. |
|
|
Azazaza_hb |
26.2.2012, 19:45;
Ответить: Azazaza_hb
Сообщение
#10
|
|
ну это жестоко))) ие9 норм браузер)))
|
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Выравнивание картинки по центру между текстом | 10 | NikN | 2637 | 6.1.2021, 23:24 автор: buypushplatform |
|
Выравнивание содержимого footer'a | 0 | press74 | 4999 | 2.7.2019, 18:58 автор: -iiwanc- |
|
Перенести меню | 1 | Викторио_mw | 1470 | 28.8.2018, 0:10 автор: TimurR |
|
Необходимо разрезать и установить Меню для группы ВКонтакте | 2 | boltuk | 3417 | 4.12.2017, 14:44 автор: tezoro |
|
Помогите с меню - переделать в выпадающее | 1 | lepota | 1130 | 4.12.2017, 13:29 автор: yury_mw |
Текстовая версия | Сейчас: 26.4.2024, 7:56 |