|
|
Модератор форума: dotbot |
Сообщество uCoz » Архивариус » Корзина » Горизонтальное меню (Проблема с шириной меню) |
Горизонтальное меню |
на МОЕМ сайте есть горизонтальное меню, не моу понять, как сделать, чтобы оно растягивалось на 100%
Код /*новая менюшка*/ .menu a { text-decoration: none; color: black; /*цвет текста*/ text-shadow: 0 1px ; font-weight: ; font-size: 14px; float: left; display: block; } .menu a:hover { color: #276a85; text-shadow: 0 1px #e1eff5; } /*цвет текста клика*/ .drop-down a { float: none; min-width: 90px; } .menu a { display: block; padding: 10px 15px; } .drop-down-menu { float: left; display: block; } .menu-title { cursor: default; padding: 10px 15px; } .activate { display: none; position: absolute; cursor: pointer; width: 100%; height: 50px; margin: 0 0 0 -15px; opacity: 0; } @media only screen and (min-width: 100%) { .drop-down-menu:hover .drop-down { display: block; } .drop-down { position: absolute; } } @media only screen and (max-width: 100%) { .menu a, .drop-down-menu { float: none; } .activate { display: block; } } /* Skin */ .menu a, .drop-down-menu { background: black; background: -webkit-gradient(linear, left top, left bottom, from(orange), to(orange)); /**/цвет кнопок background: -moz-linear-gradient(top, black, black); } .menu a:hover, .drop-down-menu:hover { background: black; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF8C00), color-stop(100%,#FF8C00)); background: -moz-linear-gradient(top, #feffff 0%, #a2cfe0 100%); } .drop-down a { background: black; } .drop-down a:hover { background: #111; } @media only screen and (min-width: 800px) { .first { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .last { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .drop-down .last { border-radius: 0; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } } @media only screen and (max-width: 799px) { .menu { background:black ; background: -webkit-gradient(linear, left top, left bottom, from(#44a7cf), to(#317794)); background: -moz-linear-gradient(top, black, #317794); } :checked ~ .menu-title { background: #495261; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#495261), color-stop(100%,#38404b)); background: -moz-linear-gradient(top, #495261 0%, #38404b 100%); } .menu a, .drop-down-menu { background: none; } .drop-down a { background: #222; } } /* IE */ .ie8 .drop-down-menu:hover .drop-down { display: block; } .ie8 .drop-down { position: absolute; } .drop-down { max-height: 0; overflow: hidden; } .ie8 .drop-down-menu:hover .drop-down { max-height: 200px; } @media only screen and (min-width: 800px) { .drop-down-menu:hover .drop-down { max-height: 200px; } } @media only screen and (max-width: 100%) { .activate:checked ~ .drop-down { max-height: 200px; } } .drop-down, .menu a, .drop-down-menu { -webkit-transform: translateZ(0); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } Продвижение сайтов
Сообщение отредактировал Дядька - Понедельник, 25 Авг 2014, 13:38:04
|
Дядька, в стилях что вы предоставили, строка номер 20 замените на:
Код padding: 10px 17.7px; |
Странная конструкция меню у вас.... куда проще делать через список:
Код <ul class="menu"> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a> </li> </ul> Добавлено (25 Авг 2014, 16:43:10) Код ul.menu{ display: block; } ul.menu li{ padding: 5px; list-style: none; display: inline-block; } ul.menu li a{ background: pink; color: #fff; } Добавлено (25 Авг 2014, 16:44:18) Как то раз мне показалось что меня повысили, но это было красиво высказанное увольнение. (с) Симпcоны
|
верно, конструкция очень, не удобна для дальнейшей настройки под себя. И подогнать по текущей конструкции меню под 100% не просто, проще вовсе переделать меню.
|
| |||
| |||