Вопрос по раскладке

igamity · May 6, 2009

Добрый вечер, уважаемые!

Несколько дней безрезультатно бьюсь над следующей задачей: есть потребность сделать следующую раскладку или как это правильно называется:

Сейчас это сделано так:

	<div id="container">
		<div id="blok1">1</div>
		<div id="b23-container">
			<div id="blok2">2</div>
			<div id="blok3">3</div>
		</div>
		<div id="b45-container">
			<div id="blok4">4</div>
			<div id="blok5">5</div>
		</div>
	</div>

и css:

#container {
	position: absolute;
	top: 63px;
	width: 100%;
	height: 100%;
	border: 1px solid #aaaaff;
	background-color:#eeeeff;
}

#blok1 {
	position: absolute;
	top: 1px;
	bottom: 1px;
	left: 1px;
	width: 225px;
	border: 1px solid #aaaaff;
	background-color: #ffffff;
}

#b23-container {
	position: absolute;
	top: 1px;
	bottom: 1px;
	left: 229px;
	width: 425px;
}

#blok2 {
	height: 221px;
	margin-bottom: 1px;
	border: 1px solid #aaaaff;
	background-color: #ffffff;
}

#blok3 {
	height: 222px;
	border: 1px solid #aaaaff;
	background-color: #ffffff;
}

#b45-container {
	position: absolute;
	top: 1px;
	bottom: 1px;
	right: 1px;
	left: 655px;
}

#blok4 {
	height: 221px;
	margin-bottom: 1px;
	border: 1px solid #aaaaff;
	background-color: #ffffff;
}

#blok5 {
	height: 222px;
	border: 1px solid #aaaaff;
	background-color: #ffffff;
}

Однако изначально идея состояла в том, чтобы жеско задавать размеры только внешнего блока, а так же ширину блоков blok1 и b23-container, а все остальное должно быть относительно. При попытке так сделать, внутренние блоки, за счет margin и border, вылезают за границы внешнего блока, да и не получается кросброузерного решения...

Есть ли возможность все же сделать так, как описано в предыдущем абзаце?

lancer · May 6, 2009

Что должно быть относительно чего и в какой зависимости от родителя. Ничего непонятно.

Изобразите графически.

Edited May 6, 2009 by lancer

psywalker · May 6, 2009

igamity Так пойдёт? http://psywalker.ru/div-box.html :rolleyes:

<!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>Div</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
	div#wrap {
		 width: 806px;
		 border: 1px solid #000;
		 overflow: hidden;
		 height: 1%;
	}
		 div.box-left { 
					float: left;
					width: 200px;
					height: 300px;
					background:#9CC;
					border: 1px solid #00F;
		 }
		 div.box-topLeft { 
					float: left;
					width: 300px;
					height: 150px;
					background:#9C6;
					border: 1px solid #00F;
		}
		div.box-top-right { 
					float: left;
					width: 300px;
					height: 150px;
					background: #9F9;
					border: 1px solid #00F;
		}
		div.box-leftBtm { 
					float: left;
					width: 300px;
					height: 150px;
					background: #C03;
					border: 1px solid #00F;
		}
		div.box-rightBtm { 
					float: left;
					width: 300px;
					height: 150px;
					background: #63C;
					border: 1px solid #00F;
		}
</style>
</head>

<body>
   <div id="wrap">
	   <div class="box-left">LEFT BOX</div>
	   <div class="box-topLeft">Box Top Left</div>
	   <div class="box-top-right">Box Top Right</div>
	   <div class="box-leftBtm">Box Left Bottom</div>
	   <div class="box-rightBtm">Box Right Bottom</div>
   </div>
</body>
</html>

Edited May 6, 2009 by psywalker

igamity · May 7, 2009

Что должно быть относительно чего и в какой зависимости от родителя. Ничего непонятно.
Изобразите графически.

На картинке 5 внутренних блока (белые) и 1 внешний (голубой). Хотелось бы жестко задавать размеры только те, которые обозначены размерными линиями, остальные размеры должны получаться автоматически, ну т. е. должны задаваться в процентах и/или отступами.

igamity Так пойдёт? http://psywalker.ru/div-box.html

Спасибо, так сейчас фактически и сделано, у Вас размеры всех блоков явно и жестко заданы, а от этого как раз и хочется отойти.

Edited May 7, 2009 by igamity

psywalker · May 7, 2009

igamity

Это как минимум невозможно хотябы потому, что Откуда например правые нижние блоки будут знать, какой ширины им быть?

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

igamity · May 7, 2009

igamity
Это как минимум невозможно хотябы потому, что Откуда например правые нижние блоки будут знать, какой ширины им быть?
Такие вещи тогда уж лучше делать таблицей, и не париться, там ячейки сами высчитывают размер, как раз как вы хотите

Да, примерно так себе и представлял ответ... Просто подумал, может я чего не знаю и есть какие-то волшебные решения :rolleyes: Спасибо!

Nekromancer · May 7, 2009

Да, примерно так себе и представлял ответ... Просто подумал, может я чего не знаю и есть какие-то волшебные решения wink.gif Спасибо!

это волшебное решение называется JavaScipt. Но лучше таблицами в данном случае..

Sign In

Вопрос по раскладке

Question

igamity

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

lancer

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

igamity

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

igamity

Link to comment

Share on other sites

Nekromancer

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information