Помогите с вёрсткой слоями!

ruit · April 21, 2010

Не могу сделать верхнее меню резиновое в слоях, чтоб растягивался автоматический!

С табличной всё просто даёшь таблице 100% и спишь спокойна))

Помогите пожалуйста!

<tr>

<td><a href="#">Новости</a></td>

<td><a href="#">Свадьба</a></td>

<td><a href="#">Семейные праздники</a></td>

<td><a href="#">Детские праздники</a></td>

<td><a href="#">Корпаротивы</a></td>

<td><a href="#">Кейтеринг</a></td>

<td><a href="#">Форум</a></td>

</tr>

</table>

Мне нужно чтоб меню растягивалось на всё пространство.)

Подскажите как можно реализовать это?

stars · April 21, 2010

Смотрим

<!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" lang="ru" xml:lang="ru">
<head>
	<title>test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<meta http-equiv="Content-Style-Type" content="text/css"/>
	<meta name="Resource-Type" content="Document" />
	<style type="text/css">
		* {
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		}
		html, body {
		height:100%;
		width:100%;
		}
		.main {
			width: 100%;
			height: 30%;
			background: black;
		}
	</style>
</head>
<body>
<div class="main"></div>
</body>
</html>

идея заключается в том что если вы диву делаети 100% то у родителя тоже должна быть указана ширена(% или px не важно)

PoshtarBoba · April 21, 2010

Мне нужно чтоб меню растягивалось на всё пространство.)
Подскажите как можно реализовать это?

Чтоб пропорционально растягивался каждый пункт меню - дивами (без скриптов) так вроде не сделаешь.

Обычно такое меню делают списком с прилипанием к левой или правой стороне.

<ul class="menu">
  <li class="active"><a href="#">Новости</a></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>

ul.menu { width:100%; height:32px; background-color:#ff0; list-style:none;}
ul.menu li { float:left; margin:0 2px 0 0;}
ul.menu li a { display:block; margin:0; padding:4px 12px; background-color:#fa0;}
ul.menu li a:hover, ul.menu li.active a { color:#fff; background-color:#750;}

SelenIT · April 21, 2010

Можно пропорционально растянуть пробелы между пунктами. Не самый красивый пример навскидку:

<!doctype html>
<title>test</title>
<style>
.menu { text-align: justify; }
.menu a { display: inline-block; border: 1px solid; padding: 1em; }
a:hover { text-decoration: none; color: green; }
a.end { width: 100%; height: 0; overflow: hidden; padding: 0; border: 0; }
</style>
<!--[if lte IE 7]>
<style>
.menu a { display: inline; zoom: 1; }
</style>
<![endif]-->
<div class="menu">
  <a href="#">Новости</a>
  <a href="#">Свадьба</a>
  <a href="#">Семейные праздники</a>
  <a href="#">Детские праздники</a>
  <a href="#">Корпоративы</a>
  <a href="#">Кейтеринг</a>
  <a href="#">Форум</a>
  <a class="end"></a>
</div>

Не список, потому что LI с фактическим display:inline-block странно воспринимаются IE6-7...

psywalker · April 22, 2010

Можно пропорционально растянуть пробелы между пунктами. Не самый красивый пример навскидку:
<!doctype html>
<title>test</title>
<style>
.menu { text-align: justify; }
.menu a { display: inline-block; border: 1px solid; padding: 1em; }
a:hover { text-decoration: none; color: green; }
a.end { width: 100%; height: 0; overflow: hidden; padding: 0; border: 0; }
</style>

<div class="menu">
  <a href="#">Новости</a>
  <a href="#">Свадьба</a>
  <a href="#">Семейные праздники</a>
  <a href="#">Детские праздники</a>
  <a href="#">Корпоративы</a>
  <a href="#">Кейтеринг</a>
  <a href="#">Форум</a>
  <a class="end"></a>
</div>
Не список, потому что LI с фактическим display:inline-block странно воспринимаются IE6-7...

Т.е. списком не прокатит такой вариант?

SelenIT · April 22, 2010

psywalker, если делать списком - в IE7 (включая IE8-притворщика) и ниже пробелов между элементами списка не будет, они тупо игнорируют закрывающий </li>. А здесь эти пробелы критичны...

psywalker · April 22, 2010

psywalker, если делать списком - в IE7 (включая IE8-притворщика) и ниже пробелов между элементами списка не будет, они тупо игнорируют закрывающий </li>. А здесь эти пробелы критичны...

Не, ну тогда это не выход. Вариант не имеет под собой семантики, где нужно явно использовать UL>LI. Если есть вариант достойный, скинь в личку плиз

mishka · April 22, 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>nav</title>
	<style type="text/css">
		.menu{
			border-collapse:collapse;
			border:0;
			width:100%;
			table-layout:fixed;
		}
		.menu td{padding:0;}
		.menu a{
			display:block;
			text-align:center;
			background:#dd9700;
			border:1px solid #000;
		}
		.menu a:hover{background:#3897ff;}
	</style>
</head>
<body>
	<table class="menu">
		<tr>
			<td><a href="#">link</a></td>
			<td><a href="#">link</a></td>
			<td><a href="#">link</a></td>
			<td><a href="#">link</a></td>
		</tr>
	</table>
</body>
</html>

Лучшего варианта для подобных целей незнаю, если джс неюзать конечно

если делать списком - в IE7 (включая IE8-притворщика) и ниже пробелов между элементами списка не будет, они тупо игнорируют закрывающий </li>. А здесь эти пробелы критичны...

Что за пробелы? Можешь поподробнее со скринами?

Edited April 22, 2010 by mishka2

psywalker · April 22, 2010

Да, таблицей конеш хороший вариант, но неинтересный, хотелось-бы конечно увидеть стоящий вариант, не табличный

Кстати Медведь, а это для чего table-layout:fixed; ?

mishka · April 22, 2010

Кстати Медведь, а это для чего table-layout:fixed; ?

Чтобы ячейки были одинаковой ширины

Edited April 22, 2010 by mishka2

psywalker · April 23, 2010

Чтобы ячейки были одинаковой ширины

Да вроде и так нормально? Или это для ИЕ спецом?

mishka · April 23, 2010

"И так нормально" пока текст одинавковой шширины во всех ячейках. Ты разный текст введи, и все увидишь.

ruit · April 23, 2010

Как я понял ни одного достойного варианта нет! Сделаю таблицой и всё)))) А то долговто получается уйдёт на всё)))

SelenIT · April 23, 2010

Что за пробелы? Можешь поподробнее со скринами?

Между тегами. Был про это топик на Хабре (я сам долго не верил, пока не поэкспериментировал).

Sign In

Помогите с вёрсткой слоями!

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