[74ivan74]

На сайте существуют границы самого сайта.
В данных границах имеется меню

*{
margin:0;
padding:0;
}
body{
background:#fff;
color:#666;
font:12px/18px Tahoma, Arial, Helvetica, sans-serif;
}
#menu{
width:100%;
}
#menu ul{
list-style:none;
}
#menu li{
list-style:none;
display:block;
float:left;
}
#menu li a{
display:block;
float:left;
height:66px;
color:#fff;
text-transform:uppercase;
font-size:13px;
font-weight:bold;
background:url(/images/images/menu_007_left.jpg) no-repeat left;
line-height:43px;
padding:0 0 0 7px;
text-decoration:none;
}
#menu li a span{
display:block;
float:left;
background:url(/images/images/menu_007_right.jpg) no-repeat right;
height:66px;
color:#fff;
line-height:43px;
padding:0 14px 0 6px;
}
#menu li a:hover{
display:block;
float:left;
background:url(/images/images/menu_007_left_h.jpg) no-repeat left;
height:66px;
}
#menu li a:hover span{
display:block;
float:left;
background:url(/images/images/menu_007_right_h.jpg) no-repeat right;
color:#fff;
height:66px;
}
#menu li a.current{
display:block;
float:left;
height:66px;
color:#fff;
text-transform:uppercase;
font-size:13px;
font-weight:bold;
background:url(/images/images/menu_007_left_h.jpg) no-repeat left;
line-height:43px;
padding:0 0 0 7px;
text-decoration:none;
}
#menu li a.current span{
display:block;
float:left;
background:url(/images/images/menu_007_right_h.jpg) no-repeat right;
height:66px;
color:#fff;
line-height:43px;
padding:0 14px 0 6px;
}

PHP код:

<div id="menu">
    <ul>
        <li><a href="#" class="current"><span>home</span></a></li>
        <li><a href="#"><span>about us</span></a></li>
        <li><a href="#"><span>services</span></a></li>
        <li><a href="#"><span>solutions</span></a></li>
        <li><a href="#"><span>contact us</span></a></li>                                
    </ul>
</div> 


вопрос в том, как сделать так, чтобы меню растягивалось по всей ширине, т.е. не возникало проблемм с пустой границей до конца меню, если в меню мало категорий или меню изменяется на каждой странице (текст уменьшается или увеличивается)?

Сейчас проблемма в том, что до конца полосы остается пустое место.

[redreem]

попробуй в каждом <li> сделать так: <li style="width:18-20%">, либо переверстай его таблицей или блоками с процентными width-ами, либо скриптом делать пересчет ширины каждой менюшки после загрузки. без скрипта все равно придется жертвовать несколькими пикселями в последней менюшке, так как есть все эти паддинги, бордеры, маргины в пикселях, которые будут давать дополнительное значение ширины.

[74ivan74]

сделал <li style="width:18-20%"> вообще ничего не изменилось, странно, даже не съехало

[redreem]

не <li style="width:18-20%">, а <li style="width:18%"> например или <li style="width:20%">
18-20 - это диапазон. тебе надо выбрать самому число, потому что от него зависит будет ли съезжать последнее меню на следующую строчку.

Добавлено через 24 минуты

добавляй сразу в стиль

#menu li{
list-style:none;
display:block;
float:left;
width:18%;
}

должно работать. только у тебя сразу возникнет проблема с видом кнопок - я так понял они у тебя фиксированной картинкой. переделывать придется на повторяющийся паттерн и добавлять repeat-x.

[74ivan74]

Нет, так вообще все съехало, а можно сам html по центру задать, там справа мало места остается, так будет слева и справа, более-менее хорошо смотреться будет?

<div align="center" id="menu"> не отцентровало (

[redreem]

в смысле "съехало"? в опере есть Dragon Fly, вызывается по Ctrl+Shift+I - в нем можно тыкать в блоки и видеть каких они размеров и как расположены - посмотри. поставь 17% если последний пункт переехал на следующую строчку.

[74ivan74]

Я пробовал разные значения, все съезжает аж в 3 столбика
вот меню, что пытаюсь сделать http://webmastermix.ru/files/css-bla.../slide_bb.html

[redreem]

вот вариант - добавь после менюшки такой скрипт:

<script type="text/javascript">
		mEl=document.getElementById('menu');
		liEl=document.getElementsByTagName('li');
		mW=mEl.parentNode.offsetWidth;
		itemW=Math.floor(mW/liEl.length);
		lastItemW=mW-itemW*(liEl.length-1);
		for (var i=0;i<liEl.length;i++) liEl[i].style.width=itemW+'px';
		liEl[liEl.length-1].style.width=lastItemW+'px';
</script>

и поменяй стиль:

#menu ul{
list-style:none;
padding:0px 0px;
}

[74ivan74]

сейчас растинуло на всю ширену, но в категориях где 2 слова, второе слово снисло вниз и между плашками в меню пробелы.

[redreem]

работает - вот

Добавлено через 1 минуту

а чтоб не сносило вместо about us пиши

about us