Выравнивание меню из списка. Абсолютное позиционирование. Как?

[setevoi]

Выравнивание меню из списка по центру.

Абсолютное позиционирование.

Как лучше сделать?

CSS:

* { padding: 0; margin: 0; }
img { border: none; }
li { list-style: none; }
a 		{ color: #333; }
a:hover { color: #7dbb24; }
.clear { clear: both; }

#navig {
	position: absolute;
	top: 150px;
	left: 0px;
	right: 0px;
	height: 38px;
	width:100%;
	min-width: 1024px;	
	background: #8a8b8b url(img/bgmenu.gif) repeat-x;
    text-align: center;    
}

#navig ul { text-align: center; margin:0px auto;}
#navig ul li { float: left; font-size: 12px; background: url(img/space.gif) no-repeat center right; padding: 10px 30px 10px; }
#navig ul li a { color: #fff; text-decoration: none; font-size: 12px; }
#navig ul li a:hover { color: #fff; }
#navig ul li.active a { color: #fff; }

HTML:

<div id="navig"> 
<ul>
    <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>

Edited February 16, 2010 by setevoi

[Shugich]

Как выровнять надо?

[psywalker]

ТС, скриншот того, что хочешь получить.

[setevoi]

Как выровнять надо?

надо по центру... сейчас липнет к левому краю

[Justnewone]

надо по центру... сейчас липнет к левому краю

проблема у родителя вашего меню, тут Вы фрагмен нужный не предоставили, дайте ссылку. Вереницу кода не надо, дайте ссылку.

[Shugich]

Ну по аналогии я делал так меню на одном проекте:

HTML:

	<div id="menu">
	  <ul>
		<li><a href="#">Главная</a></li>
		<li><a href="#" class="active">Блог</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>

CSS:

#menu {margin-top: -6px; background: url('./img/menu_bg.png') repeat-x; height: 61px;}
#menu ul {overflow: hidden; width: 950px; margin: 0px auto;}
#menu li a {float: left; font: 12px 'Arial',serif; color: #fff; text-align: center; padding: 18px 3%; display: block; margin-top: 6px;}
#menu li a:hover {color: #084b6b;}
#menu li a.active {color: #084b6b; background: url('./img/menu_active.png') repeat-x; text-decoration: none;}

Edited February 16, 2010 by Shugich

[setevoi]

проблема у родителя вашего меню, тут Вы фрагмен нужный не предоставили, дайте ссылку. Вереницу кода не надо, дайте ссылку.

ссылка на весь код

http://allhumor.ru/t/index.html

[Shugich]

мое решение попробовал применить?

[shvv]

ссылка на весь код

http://allhumor.ru/t/index.html

Нужно равномерно растянуть пункты по горизонтали?

Тогда самое простое - задать ширину в процентах для каждой ссылки.

Или если разная ширина пунктов - сделать таблицей.

[setevoi]

мое решение попробовал применить?

Ваше решение

http://allhumor.ru/t1/index.html

можно использовать для выхода из положения , но это не совсем по середине

Нужно равномерно растянуть пункты по горизонтали?

Тогда самое простое - задать ширину в процентах для каждой ссылки.

Или если разная ширина пунктов - сделать таблицей.

не совсем...

1. пункты меню надо выровнять по центру

2. пункты меню не должны выползать за пределы серых боковин

Edited February 16, 2010 by setevoi

[shvv]

1. пункты меню надо выровнять по центру

2. пункты меню не должны выползать за пределы серых боковин

1. Почему блок с меню абсолютно позиционирован?

2. Почему нельзя его поместить внутрь блока container (чтобы он не выходил за пределы серых границ)?

[setevoi]

1. Почему блок с меню абсолютно позиционирован?

2. Почему нельзя его поместить внутрь блока container (чтобы он не выходил за пределы серых границ)?

1. Мне это решение виделось наиболее простым, но оказалось ... все не так просто

2. теоретически наверно можно

- но полоска меню должна тянутся на 100%

- а вот само меню с пунктами быть посередине, за пределы серых границ требование опционально

Edited February 16, 2010 by setevoi

[shvv]

1. Мне это решение виделось наиболее простым, но оказалось ... все не так просто

2. теоретически наверно можно

- но полоска меню должна тянутся на 100%

- а вот само меню с пунктами быть посередине, за пределы серых границ требование опционально

Тогда пусть остается в body. Просто фон нужно задать для блока c шириной 100%, а в него уже список с меню. Списку задать ширину 1024px и margin: 0 auto;

Для абсолютно позиционированных блоков автоматическое выравнивание не работает.

Ну и вообще это не очень хороший стиль верстки, поскольку блок выпадает из потока.

[lasscal]

<div id="nav">
  <div class="nav-wrap">
	<ul>
	  <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>
</div>

#nav{
	width:100%;
	overflow:hidden;
	position:relative;
	background:#049393;
	position: absolute;
	top: 150px;
	left: 0px;
	height: 38px;
	min-width: 1024px;
	background: #8a8b8b url(img/bgmenu.gif) repeat-x;
}
.nav-wrap{
			position:relative;
			left:50%;
			float:left;
			text-align:center;
}
#nav ul{
	position:relative;
	float:left;
	left:-50%;
	margin:0;
	padding:0;
	list-style:none;
}

Попробуй так, у меня все отцентрировалось

[setevoi]

Попробуй так, у меня все отцентрировалось

спасибо. помогло в ie и ff работает

правда пока не понял как это работает и почему)

[psywalker]

А зачем одному элементу задавать релатив и аболют вместе?

#nav{
	width:100%;
	overflow:hidden;
	position:relative;
	background:#049393;
	position: absolute;
	top: 150px;
	left: 0px;
	height: 38px;
	min-width: 1024px;
	background: #8a8b8b url(img/bgmenu.gif) repeat-x;
}

[lasscal]

А зачем одному элементу задавать релатив и аболют вместе?

Это я по не внимательности загналась