[GreenBrick]

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

Код меню

<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;
}

[свернуть]

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

[kickboxer]

CSS код и разметку не обязательно сюда выкладывать, это не php.

Код:

#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;
padding: 0px 27px;
text-align: center;
text-decoration: none;
}

[GreenBrick]

kickboxer, спасибо, но это не то что я хотел, если я изменю название одного из пунктов, вновь придется править отступы. Необходимо следующее. К примеру если останется всего 3 пункта меню, то они должны автоматически растянуться по всей ширине блока, то есть, пункты должны быть резиновыми.

[Dolmatov]

kickboxer, спасибо, но это не то что я хотел, если я изменю название одного из пунктов, вновь придется править отступы. Необходимо следующее. К примеру если останется всего 3 пункта меню, то они должны автоматически растянуться по всей ширине блока, то есть, пункты должны быть резиновыми.

Пиши в icq 396706 помогу

---------- Сообщение добавлено 20:27 ---------- Предыдущее 19:53 ----------

Если я правильно понял, .top-menu{ width:100%;

a LI пропиши например: width:15%;

[kickboxer]

Ну тогда вот написал скриптик (работает от 1 до 6 пунктов меню):

Код:

		<script type="text/javascript">
			var countLi = $('#cssmenu>ul>li').length;
			if (countLi == 1) {
				$('#cssmenu>ul>li').css('width', '100%');
			}
			else if (countLi == 2) {
				$('#cssmenu>ul>li').css('width', '50%');
			}
			else if (countLi == 3) {
				$('#cssmenu>ul>li').css('width', '310px');
			}
			else if (countLi == 4) {
				$('#cssmenu>ul>li').css('width', '25%');
			}
			else if (countLi == 5) {
				$('#cssmenu>ul>li').css('width', '20%');
			}
			else if (countLi == 6) {
				$('#cssmenu>ul>li').css('width', '155px');
			}
		</script>

Но нужно тогда селектору #cssmenu li a обнулить падинги, ну или паддинги оставить, но тогда нужно будет посчитать на какое кол-во пикселей/процентов поделить каждый блок.

[Kartograff]

kickboxer, Ваш скрипт можно сократить до 3х строчек:)

Код:

<script type="text/javascript">
	var countLi = $('#cssmenu>ul>li').length;
	var widthLi = 930/countLi;
	$('#cssmenu>ul>li').css('width', widthLi);
</script>

Или вообще до одной:

Код:

<script type="text/javascript">
        $('#cssmenu>ul>li').css('width', 930/$('#cssmenu>ul>li').length);
</script>

Просто писать столько условий в коде не очень красиво.

[kickboxer]

Kartograff, действительно)
просто if - это первое, что в голову пришло)

[GreenBrick]

kickboxer,Kartograff. Ребят похоже я что-то делаю не так, падинги обнулял, скрипт не подхватывается

[kickboxer]

GreenBrick, совсем забыл сказать:
скрипт нужно расположить ниже блока меню в коде (например, перед </body>), ну или обернуть скрипт в функцию

Код:

jQuery(document).ready(function() {
 сюда скрипт
});

и тогда он будет выполняться после загрузки страницы.

[GreenBrick]

kickboxer, Kartograff. Ребятки, большое человеческое. Помогли! Проблема решена :)