Расположение блоков

Lazar · July 12, 2007

Есть блок ширина которого неизвестна(с id=pageMenu). В этот блок помещается ещ? n-е количество блоков с сылками. Надо чтобы все эти n блоков полностью заняли объ?м блока с id=pageMenu

Код:

#pageMenu{

margin: 0px auto;

position: relative;

height: 15px;

display: block;

text-align: center;

border: 1px solid red;

}

#pageMenu .menu{

margin: 0px auto;

background: white;

display: block;

float: left;

cursor: hand;

width: 25%;

text-decoration: none;

border: 1px solid red;

}

При такой записи я взял n=4 при этом если дописать /*border: 1px solid red;*/ что я и сделал , то 4-й блок переносится на другую строку, чего я не хочу..

Вобщем, надо чтобы все эти n блоков полностью заняли обэ?м блока с id=pageMenu

html:

WM · July 13, 2007

Сперва, предлагаю начать вс? с чистого листа и действовать так:

<!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=windows-1251" />
<title>Untitled Document</title>

<style type="text/css">

#pageMenu {
	background: #FAE7E7;
	/* float: left; */ /* выводит див меню из потока, чтобы из него не вылазили флоатнутые пункты меню <li> */
}

ul {
	background: #CFE6B9;
	margin: 0;
	list-style-type: none;	
}

ul li {
	background: #E7D6B8;
	float: left;	
	width: 25%;
}

ul li a {
	border: 1px solid #A037BB;
	background: #E1BAEB;
	text-decoration: none;
	display: block;
	text-align: center;
}

.clearing {
	clear: left;	/* ещ? один метод, чтобы вывведенные из потока пункты <li> не вылазили за границу pageMenu */
	height: 0px;
	overflow: hidden;
}
</style>

</head>

<body>

<div id="pageMenu">
	<ul>
		<li><a href="#">menu 1</a></li>
		<li><a href="#">menu 2</a></li>
		<li><a href="#">menu 3</a></li>
		<li><a href="#">menu 4</a></li>
	</ul>
	<div class="clearing"><!-- либо использовать этот clearing див, либо его убрать и задать float: left для #pageMenu --></div>
</div>

</body>
</html>

Затем ? исправлять оставшиеся косяки отображения. Коих я пока вижу три:

1. Совершенно особенное отношение Firefox к спискам (а точнее ? к отступу слева, где был маркер). Самому интересно узнать, как это лечить.

2. Нежелание ИЕ реагировать на display: block; у .

3. Бешенное "попиксельное" моргание и перенос последнего

[*] строчкой ниже/выше, при уменьшении размера окна ИЕ.

Пусть меня поправят эксперты, ежели я в ч?м-то ошибся.

П.С. Все background: #color ? для наглядности.

Lazar · July 13, 2007

PacMan · July 13, 2007

Не мучай моск. Делай таблицей.

Lazar · July 13, 2007

нужно имено дивами..

PacMan · July 13, 2007

Табличный дизайн дивами?

Минусы:

увеличивается объем кода

увеличивается время разработки

есть риск получить некроссбраузерное решение

болит голова и хочется когонить убить

Ну раз нужно, то чтож...

Sign In

Расположение блоков

Question

Lazar

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

WM

Link to comment

Share on other sites

Lazar

Link to comment

Share on other sites

PacMan

Link to comment

Share on other sites

Lazar

Link to comment

Share on other sites

PacMan

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information