Резиновое меню списком внутри DIV

Kolik · September 4, 2011

Есть DIV, резиновый

Внутри него должно быть меню, из 5ти элементов, каждый по 20% соответственно. Когда ставлю 20 - менюшка уезжает за ДИВ, тоесть считает 20% от всего окна. Как её заставить встраиваться в див?

Наверно какие-то параметры display надо прописать, но пока не понимаю.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style>

#hmenu {  z-index:1; height: 50px; background:red; margin-left: 239px;  margin-right: 20px; right: 20px; border-radius: 8px;}

ul.menu{

	margin		: 0;
	padding		: 0;
	display		: table;
	width		: 100%;
	border-left	: 1px solid #fff;
	position	: absolute;
	z-index		: 100;
}
.menu li{
	display		: table-cell;
	width		: 20%;
	border-right	: 1px solid #fff;
	text-align:center;

}
*html .menu li{
	display		: inline;
	zoom		: 1;

}
.menu a:link, .menu a:hover, .menu a:visited{
	display		: block;

	padding		: 5px 10px;
	font		: 12px verdana;

	text-decoration	: none;
}
.menu a:hover{
	background      : red;	
}

</style>
</head>

<body>
<div id="hmenu">
<ul class="menu">
<li><a href="#">asd</a></li>
<li><a href="#">asd</a></li>
<li><a href="#">asd</a></li>
<li><a href="#">asd</a></li>
<li><a href="#">asd</a></li>

</ul>
</div>
</body>
</html>

Можно и без дива вообще, главное чтобы меню было с отступами как у этого дива.

Заранее спасибо.

Edited September 5, 2011 by Kolik

PanSoul · September 5, 2011

Если честно, то не совсем понял суть вопроса, но посмею предположить, что добавив в #hmenu{position:relative} всё станет норм (:

Softlink · September 5, 2011

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

http://jsfiddle.net/4DFdT/

psywalker · September 5, 2011

Kolik,

Кто ж объядиняет display:table и position: absolute? Изначально мат. часть подучите.

ul.menu{

margin : 0;

padding : 0;

display : table;

width : 100%;

border-left : 1px solid #fff;

position : absolute;

z-index : 100;

Softlink · September 5, 2011

Kolik,
Кто ж объядиняет display:table и position: absolute? Изначально мат. часть подучите.
ul.menu{
margin : 0;
padding : 0;
display : table;
width : 100%;
border-left : 1px solid #fff;
position : absolute;
z-index : 100;

на заметку:

position в сочетании с display:table работает в хроме, опере и даже в ИЕ9. А вот ФФ display:table интерпретирует именно как таблицу, и position там не работает. Да и вообще с table-cell надо поаккуратней быть.

psywalker · September 5, 2011

Kolik,
Кто ж объядиняет display:table и position: absolute? Изначально мат. часть подучите.
ul.menu{
margin : 0;
padding : 0;
display : table;
width : 100%;
border-left : 1px solid #fff;
position : absolute;
z-index : 100;
на заметку:
position в сочетании с display:table работает в хроме, опере и даже в ИЕ9.

Ну? А работает-то как? Какой результат?

Softlink · September 5, 2011

Ну? А работает-то как? Какой результат?

Внутри table и table-cell можно позиционировать элементы от родителя, ФФ же считает все только по окну браузера, как в таблице короче.

psywalker · September 5, 2011

Ну? А работает-то как? Какой результат?
Внутри table и table-cell можно позиционировать элементы от родителя, ФФ же считает все только по окну браузера, как в таблице короче.

Ааа, ну это я в курсе. ФФ делает правильно в этом плане. Но я лично, считаю эту правильность - плохой)

А вообще я имел ввиду не это. Я говорил, что нельзя назначать одному элементу сразу абсолют и дисплей-тэйбл.

Kolik · September 5, 2011

Простите что непонятно изложил суть вопроса

сделать обычное горизонтальное меню во всю ширину сайта.

Вся изначальная закавырка в том и была, что надо сделать не во всю длину ))) Слева менюшка должны была быть на уровне с боковым меню, и справа отступ нужен ))

Всем большое Спасибо за советы, первые два поста очень помогли .

И еще вопрос. Если у меня в таком меню некоторые кнопки из 2х слов, при сужении второе слово перескакивает и такая менюшка утолщается. Какие варианты? использовать неразрывные пробелы, или для пунктов где два слова сразу вставлять разрыв строки между словами и задавать свой паддинг для этого пункта? Может есть еще какие варианты? чтобы слово автоматически при сужении переносилось и менюшка не разъезжалась)

http://jsfiddle.net/4DFdT/

Vertical-align просто не кандыбает...

Edited September 5, 2011 by Kolik

psywalker · September 5, 2011

.menu li{

display : table-cell;

width : 20%;

border-left : 1px solid #fff;

text-align:center;

vertical-align: middle;}

?

Kolik · September 5, 2011

.menu li{
display : table-cell;
width : 20%;
border-left : 1px solid #fff;
text-align:center;
vertical-align: middle;}
?

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

http://jsfiddle.net/4DFdT/10/

psywalker · September 5, 2011

так не пойдёт? http://jsfiddle.net/4DFdT/12/

Kolik · September 5, 2011

Спасибо огромное, то что надо. Сам бы пол года допирал...

psywalker · September 5, 2011

Спасибо огромное, то что надо. Сам бы пол года допирал...

Sign In

Резиновое меню списком внутри DIV

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information