Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 04.09.2011, 13:25   #1
Kolik317
Пользователь
 
Регистрация: 14.08.2009
Сообщений: 64
По умолчанию Резиновое меню списком внутри DIV

Есть DIV, резиновый
Код:
#hmenu {  z-index:1; height: 50px; background:url(hmenu.png); margin-left: 239px;  margin-right: 20px; right: 20px; border-radius: 8px;}
Внутри него должно быть меню, из 5ти элементов, каждый по 20% соответственно. Когда ставлю 20 - менюшка уезжает за ДИВ, тоесть считает 20% от всего окна. Как её заставить встраиваться в див?
Наверно какие-то параметры display надо прописать, но пока не понимаю.
Kolik317 вне форума Ответить с цитированием
Старый 04.09.2011, 14:01   #2
TranceSmile
Смайлик :)
Форумчанин
 
Аватар для TranceSmile
 
Регистрация: 12.12.2010
Сообщений: 445
По умолчанию

Выложите весь код с меню.
Самый перспективный framework Yii (c)
TranceSmile вне форума Ответить с цитированием
Старый 04.09.2011, 14:16   #3
Kolik317
Пользователь
 
Регистрация: 14.08.2009
Сообщений: 64
По умолчанию

Код:
<!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>
Можно и без дива вообще, главное чтобы меню было с отступами как у этого дива.
Kolik317 вне форума Ответить с цитированием
Старый 05.09.2011, 19:27   #4
Kolik317
Пользователь
 
Регистрация: 14.08.2009
Сообщений: 64
По умолчанию

Вопрос решился на другом форуме, надо было просто диву прописать position:relative.
Но появился новый вопрос.
Если у меня в таком меню некоторые кнопки из 2х слов, при сужении второе слово перескакивает и такая менюшка утолщается. Какие варианты? использовать неразрывные пробелы, или для пунктов где два слова сразу вставлять разрыв строки между словами и задавать свой паддинг для этого пункта? Может есть еще какие варианты? чтобы слово автоматически при сужении переносилось и менюшка не разъезжалась)
Kolik317 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скругленные края для кропнутой картинки внутри div kosmos.ehp HTML и CSS 7 15.06.2011 01:46
Горзонтальное резиновое меню, 6 элементов, зазор Kolik317 HTML и CSS 2 15.05.2011 20:37
как выровнить div внутри другого div'a по вертикали по центру Arassir HTML и CSS 4 12.03.2011 20:01
Как растянуть div внутри ячейки таблицы? Benderbej HTML и CSS 6 28.08.2010 21:59
Позиционирование двух плавающих DIV внутри одного DIV allocator HTML и CSS 5 22.07.2009 13:48