forum.okis.ru http://forum.okis.ru/ |
|
Горизонтальное меню http://forum.okis.ru/viewtopic.php?f=10&t=3957 |
Страница 1 из 1 |
Автор: | Vladislav [ 24 май 2013, 19:01 ] |
Заголовок сообщения: | Горизонтальное меню |
Привет всем,может кто помочь разобрать код,что бы Горизонтальное меню встало как следует под шапкой сайта. Не могу самостоятельно разобраться где в коде двигать местоположение меню. Код: #mainmenu{ position:relative; background:#444444; height:30px; margin:20px 0; padding:0; float:left; width:100%; z-index:100 /* для отображения подпунктов поверх остальных блоков */ } #mainmenu ul { clear:left; position:relative; right:50%; height:30px; float:right; text-align:center; font:15px Arial, Helvetica, sans-serif; list-style:none; padding:0; margin:0 } #mainmenu ul li { position:relative; left:50%; float:left; height:30px; padding:0; margin:0 } #mainmenu ul li a { border-left:1px solid #666; display:block; color: #fff; text-decoration: none; padding:5px 15px } #mainmenu ul li:first-child a {border:none} #mainmenu ul li:hover a, #mainmenu ul li.hover a, #mainmenu ul li.active a {color:#fff} #mainmenu ul li:hover, #mainmenu ul li.hover, #mainmenu ul li.active {background: #666} /* Выпадающие пункты */ #mainmenu ul li ul { position:absolute; left:0; top:30px; font-size:12px; display:none; list-style:none; padding:0; margin:0; width:150px } #mainmenu ul li ul li { background-color:#666; position:relative; left:0; display:list-item; float:none; height:auto; margin:0; text-align:left; } #mainmenu ul li ul li a { border-bottom:1px solid #999 !important; padding:6px 5px; border:none } #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover { background-color:#444 } #mainmenu ul li:hover ul, #mainmenu ul li.hover ul{display:block} Меню конечно не маленькое но по большей мере я разобрал его для будущих дел, а вот переместить в нужное место не знаю как, не могу понять,слишком много разной информации в и-нете на эту тему. Может кто-то сможет подсказать видя этот код,как можно было бы поступить ? Сайт: http://www.mediator-uk.okis.ru Спасибо.. |
Автор: | buy-aqua [ 24 май 2013, 19:28 ] |
Заголовок сообщения: | Re: Горизонтальное меню |
Вы разобрались, что какую то часть надо вставлять в меню Реклама, а какую в CSS. И в самом конце код Код: #mainmenu{ position: absolute; top:-70px; left: 120px; width:900px; } попробуйте) |
Автор: | buy-aqua [ 24 май 2013, 19:32 ] |
Заголовок сообщения: | Re: Горизонтальное меню |
Как пример это меню: ЭТО В CSS Код: #menu {padding:0; margin:0; list-style:none; width:700px; height:45px; position:absolute; top:150px; left:300px;} #menu li {position:relative; float:left;} #menu li a {display:block; height:45px; width:100px; padding:0; float:left; color:#fff; text-decoration:none; font-family:Verdana, , sans-serif; font-size:14px; text-align:center; cursor:pointer; background: url(/img/mirzasteklom_ru/button-off.png);} #menu li a b {position:relative; top:12px; font-weight:normal;} * html #menu li a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_twelve/button-off.png', sizingMethod='scale');} #menu li a:hover, #menu li a:active, #menu li a:focus, .home #menu li#home a, .single #menu li#single a, .dropdown #menu li#dropdown a, .dropline #menu li#dropline a, .flyout #menu li#flyout a, .support #menu li#support a, .contact #menu li#contact a {background: url(/img/mirzasteklom_ru/button-on.png) no-repeat right top; cursor:pointer; color:#fff;} * html #menu li a:hover, * html #menu li a:active, * html #menu li a:focus, * html .home #menu li#home a, * html .single #menu li#single a, * html .dropdown #menu li#dropdown a, * html .dropline #menu li#dropline a, * html .flyout #menu li#flyout a, * html .support #menu li#support a, * html .contact #menu li#contact a {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_twelve/button-on.png', sizingMethod='scale');} #menu li a:hover b, #menu li a:active b, #menu li a:focus b, .home #menu li#home a b, .single #menu li#single a b, .dropdown #menu li#dropdown a b, .dropline #menu li#dropline a b, .flyout #menu li#flyout a b, .support #menu li#support a b, .contact #menu li#contact a b {cursor:pointer; top:8px; padding-right:3px;} #menu{ position: absolute; top:-70px; left: 120px; width:900px; } ЭТО В РАЗДЕЛ РЕКЛАМЫ (под меню сайта) Код: <ul id="menu">
<li id="home" class="first"><a href="open.freedom-vrn.ru"><b>Главная</b></a></li> <li id="single"><a href="open.freedom-vrn.ru"><b>Новости</b></a></li> <li id="dropdown"><a href="open.freedom-vrn.ru"><b>Регистрация</b></a></li> <li id="dropline"><a href="open.freedom-vrn.ru"><b>Галерея</b></a></li> <li id="flyout"><a href="open.freedom-vrn.ru"><b>О нас</b></a></li> <li id="support"><a href="open.freedom-vrn.ru"><b>Карта сайта</b></a></li> <li id="contact" class="last"><a href="open.freedom-vrn.ru"><b>Контакты</b></a></li> </ul> |
Автор: | Vladislav [ 24 май 2013, 21:21 ] |
Заголовок сообщения: | Re: Горизонтальное меню |
buy-aqua спасибо большое,я понял ![]() |
Страница 1 из 1 | Часовой пояс: UTC + 3 часа [ Летнее время ] |
Powered by phpBB® Forum Software © phpBB Group http://www.phpbb.com/ |