div верстка меню (в линию таблицей)

[Sotnya]

Добрый вечер!

Не забрасывайте яблоками, верстаю впервые по самоучителю.

Столкнулся со следующей проблемой: пытаюсь сделать меню в хедере над основным контентом.

Сайт верстаю в html из под css (я правильно выразился?

В html у меня записано следующее:

<div id="header">
	 <div id="logo">
		 <a href="/"><img src="img/logo.png" class="iePNG" alt="Сайт" /></a>
		</div>
		<div id="gor-menu">

		 <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>
			</ul>

		</div><!-- #gor-menu-->
</div><!-- #header-->

Общий div хеддер, в нем внутри логотип и менюха.

В css это выглядит следующим образом:

#header {
height: 244px;
background-image:url(img/header.gif);
background-repeat:no-repeat;
}

#logo {
width:290px;
height:155px;
position:relative;
top:20px;
left:60px;
}
#gor-menu {
width:882px;
height:42px;
background-image:url(img/gor-menu.gif);
position:relative;
top:42px;
left:55px;
}
#gor-menu li {
display:inline;
border:1px solid blue;
}
#gor-menu li:hover {
background-color:#3F0;
}
#gor-menu a {
color:#FFF;
font-family:Georgia, "Times New Roman", Times, serif;
text-decoration:none;
font-size:16px;
}

Теперь, собственно, проблема:

Мне нужно разместить 6 кнопочек в рамке border по ширине всего меню (882px) и по высоте (42px).

Сейчас у меня абра-кадабра какая-то. Кнопки прижаты к левому верхнему краю...

Спасибо.

Edited April 6, 2013 by alexriz
для кода используйте тег CODE

[Sotnya]

По высоте получилось выровнять.

Сделал это следующим образом: дописал в css

#gor-menu li {

display:inline;

border:0px solid blue;

padding:13px;

position:relative;

top:10px;

}

Теперь кнопки соответствуют по высоте фону моего меню.

Осталась последняя проблема, а именно - растянуть кнопки по всей длине меню. Сейчас они у меня вжаты по длине текста. Мне нужно задать всем кнопкам одинаковую длину и что бы текст в них был выровнен по центру.

Спасибо!

[spdif]

так задайте, если надо

...

width: 100px; /ширина/

но ширина будет если:

display: inline-block;

text-align: center; /выравнивание/

[npofopr]

http://www.xiper.net/collect/html-and-css-tricks/navigation/rubber-menu.html

http://www.xiper.net/collect/html-and-css-tricks/navigation/rubber-blocks-menu.html

[Sotnya]

Спасибо большое!

[Sotnya]

Почти все получилось!

Остался маленький штрих, вот думаю как его победить. Решение где-то рядом, но ввиду отсутствия опыта, просидаю в его решении.

У меня строка меню, которой задан графический фон. В строке вписаны 6 разделов, которые идут друг за другом в виде блоков. При наведении на ссылку блок меняет цвет (в дальнейшем еще планирую звуковой эффект добавить).

По Вашим подсказкам у меня все эллементы выстроились в одну строку, по высоте отструктурировались по велечине div рамки, все работает, но осталось одно но..., а именно отступ справа и слева в 60px. Выглядит это следующим образом:

Вопрос заключается в том, как мне удалить отступы слева и справа у блоков "Главная" и "Контакты"?

P.S. На всякий случай линкую код, которым прописал эллементы:

HTML

<div id="header">
	 <div id="logo">
		 <a href="/"><img src="img/logo.png" class="iePNG" alt="Сайт " /></a>
	 </div>
	 <div id="gor-menu">

		 <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>
		 </ul>

	 </div><!-- #gor-menu-->
</div><!-- #header-->

CSS

[/u]
[u]#logo {
width:290px;
height:155px;
position:relative;
top:20px;
left:60px;
}[/u]
[u]#gor-menu {
width:882px;
height:42px;
background-image:url(img/gor-menu.gif);
position:relative;
left:55px;
}[/u]
[u]#gor-menu ul {
text-align:center;
overflow:hidden;
height:42px;
cursor:default;
margin: 42px;
}[/u]
[u]#gor-menu li {
display:inline-block;
border:0px solid;
padding:12px;
width:106px;
}[/u]
[u]#gor-menu li:hover {
background-color:#3F0;
}[/u]
[u]#gor-menu li a {
display:inline-block;
color:#FFF;
font-family:Georgia, "Times New Roman", Times, serif;
text-decoration:none;
font-size:16px;
}[/u]
[u]

Edited April 7, 2013 by Sotnya

[npofopr]

код лучше выкладывать на http://jsfiddle.net/ и подобные сервисы