Горизонтальное меню на <li> для резиновых сайтов. Проблема с броузерами.

Rapp_colince · November 3, 2008

Всем доброго времени суток. Такая проблема:

Нужно сделать резиновый сайт с горизонтальным меню. Сделал шапку и меню. Проблема в том, что горизонтальное меню, основанное на LI, может бесконечно ужиматься, пока все LI не заползут друг на друга. Соответственно, мне нужно задать некий предел, до которого можно ужиматься (зависит от того, насколько ужимается шапка. Если-бы дело было с таблицами, то я бы просто вставил в каждый LI распорку (белую картинку нужной мне длинны и высотой в 1PX) и тогда-бы ячейка не ужималась, но когда я вставляю распорку в LI, ужимается. Так ведет себя FireFox. В IE6 распорки действуют, но всплывает другая проблема: Если сжимать страницу так, чтобы пункты меню не помещались, то, вместо того, чтобы появиться горизонтальному скроллингу, пункты меню сползают на следующую строчку.

Как заставить из нормально отображаться?

Страницу выложил по адресу: www.new.s-c-s.ru/

Для наглядности, отправляю код

<html><body><style>
body {
	padding: 0px;
	margin: 0px;
/*	//overflow-x: hidden;*/
}
#head {
	width: 100%;
	height: 275;
	padding: 0;
	margin: 0;
	float: none;
	background: #999999 url(../img/head_3.jpg) repeat-x;
	1text-align: center;
}
#head_rasp {
	width: 1010;
	height: 275;
	padding: 0;
	margin: 0;
}
#head_flash {
	float: left;
	background: #dddddd url(../img/head_flash.jpg) no-repeat;
	width: 725px;
	height: 275px;
}
#head_2 {
	float: left;
	background: #999999 url(../img/head_2.jpg) no-repeat;
	width: 278px;
	height: 275px;
}
#head_contacts {
	position: absolute;
	top: 185px;
	left: 780px;
	width: 150 px;
	height: 65px;
}
#menu_div {
	width: 12.5%;
	height: 42px;
	background: blue;
	padding: 0 0;
}
ul.menu {
	margin: 0;
	padding: 0;
	width: 800%;
	position: relative;
	margin-right: -800%;
	text-align: center;
}
#menu li {
	float: left;
	list-style: none;
	background: #ffffb0 url(../img/menu_bg.jpg) repeat-x;
	height: 42px;
	width: 12.5%;
	border: 0px solid silver;
	margin: 0;
	padding: 0;
	text-align: center;
	z-index: 0;
}
</style>
	<div id="head">
		<div id="head_rasp" align="right">
			<div id="head_flash"></div>
			<div id="head_2"></div>
			<div id="head_3"></div>
		</div>
	</div>	
	<div id="head_contacts"><img src="img/rasporka.jpg" width="150" height="1"><br>тел: +7(495) 6620356<br>e-mail: <a href="mailto: info@t-show.ru">info@t-show.ru</a></div>
	<div id="menu_div">
		<ul id="menu" class="menu">
			<li><a href="#">О компании</a></li>
			<li><a href="#">Наши новости</a></li>
			<li><a href="#">Партнерские программы</a></li>
			<li><a href="#">Шоу клуб</a></li>
			<li><a href="#">Подбор персонала</a></li>
			<li><a href="#">Наша команда</a></li>
			<li><a href="#">Статьи</a></li>
			<li><a href="#">Контакты</a></li>
		</ul>
	</div></body></html>

Edited November 3, 2008 by Rapp_colince

Sign In

Горизонтальное меню на <li> для резиновых сайтов. Проблема с броузерами.

Question

Rapp_colince

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Forums

Important Information