X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Резиновое меню, во всю ширину блока
brick
brick
Topic Starter сообщение 31.10.2013, 22:40; Ответить: brick
Сообщение #1


Частый гость
**

Группа: User
Сообщений: 97
Регистрация: 18.2.2013
Из: Воронеж
Поблагодарили: 17 раз
Репутация:   0  


Здравствуйте, у меня следующая проблема. Сайт _http://dota2cookies.u7870681.cp.regruhosting.ru/
Мне необходимо растянуть меню на всю ширину блока - 930px. Но не просто подгоном попиксельно, а именно растянуть на всю ширину. Предположим, если будет 3 пункта меню, то они равномерно должны распределиться по всей длине блока. Думаю понятно объяснил.
html код меню
Развернуть/Свернуть

<div class="top-menu">
<div id='cssmenu'>
<ul>
<li class='active'><a href="'#"><span>ГЛАВНАЯ</span></a></li>
<li class='has-sub'><a href="'#"><span>О ПРОЕКТЕ</span></a></li>
<li class='has-sub'><a href="'#"><span>ПОДАТЬ ЗАЯВКУ</span></a></li>
<li class='last'><a href='#'><span>ОТБОРОЧНЫЕ ЭТАПЫ</span></a>
<ul>
<li><a href='#'><span>ПЕРВЫЙ ЭТАП</span></a></li>
<li><a href='#'><span>ВТОРОЙ ЭТАП</span></a></li>
<li class='last'><a href='#'><span>ТРЕТИЙ ЭТАП</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>ВОПРОСЫ</span></a>
<li class='last'><a href='#'><span>СОТРУДНИЧЕСТВО</span></a>
</ul>
</div>
<div style="clear: both;"></div>
</div>

css код меню
Развернуть/Свернуть

.top-menu{
position: absolute;
bottom: 0px;
border-bottom: 6px solid #bf251c;
width: 930px;
}
#cssmenu {
border: none;
border: 0px;
margin: 0px;
padding: 0px;
font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
width: 930px;
}
#cssmenu ul {
background: #1f1f1f;
height: 35px;
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu li {
float: left;
padding: 0px;
}
#cssmenu li a {
background: #1f1f1f url('seperator.png') bottom right no-repeat;
display: block;
font-weight: normal;
line-height: 35px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
#cssmenu > ul > li > a {
color: #cccccc;
}
#cssmenu ul ul a {
color: #cccccc;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
background: #bf241c url('hover.png') bottom center no-repeat;
color: #FFFFFF;
text-decoration: none;
}
#cssmenu li ul {
background: #333333;
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 200px;
z-index: 200;
}
#cssmenu li:hover ul {
display: block;
}
#cssmenu li li {
background: url('sub_sep.png') bottom left no-repeat;
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px;
}
#cssmenu li:hover li a {
background: none;
}
#cssmenu li ul a {
display: block;
height: 35px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
background: #bf241c url('hover_sub.png') center left no-repeat;
border: 0px;
color: #ffffff;
text-decoration: none;
}
#cssmenu p {
clear: left;
}

Код немного кривоват, так как пытался переделать, но как видите не очень. Надеюсь на вашу помощь...

Сообщение отредактировал brick - 31.10.2013, 22:43


--------------------
Разработка современных и удобных сайтов — InLix
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Hallboy222
Hallboy222
сообщение 31.10.2013, 22:46; Ответить: Hallboy222
Сообщение #2


Любитель идей
*******


Группа: Active User
Сообщений: 2582
Регистрация: 27.5.2010
Из: Москва
Поблагодарили: 872 раза
Репутация:   149  


Для этого есть специальный скриптик, сейчас минут через 15 Вам его найду.
Горизонтальное меню по всей ширине
P.S. Благодарность автору блога в виде бека, и ему приятно и ТС польза.

Сообщение отредактировал Hallboy222 - 31.10.2013, 22:48
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как привязать меню к кнопке <nav> ?
2 pippak 876 Вчера, 15:57
автор: Nell
Открытая тема (нет новых ответов) Необходимо разрезать и установить Меню для группы ВКонтакте
2 boltuk 559 4.12.2017, 14:44
автор: tezoro
Открытая тема (нет новых ответов) Помогите упростить меню сайта
8 alik2039 703 7.11.2017, 9:55
автор: alik2039
Открытая тема (нет новых ответов) Заменить в шаблоне (WP) шапку и меню
0 Infe 442 21.6.2017, 15:46
автор: Infe
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыНужно нарисовать меню
2 vitosbaltos 693 20.1.2017, 14:15
автор: Shandanakar


 



RSS Текстовая версия Сейчас: 12.12.2017, 13:05
Дизайн