css верстка, блоки, нужна помощь

alHaos · November 30, 2010

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

Дано четыре блока в две колонки. хочу чтобы при изменении высоты блока 4, высота колонок оставалась одинаковой при этом блок 1 и 3 своих размеров не меняли, а высота левой колонки изменялось за счет высоты блока 2.

Edited November 30, 2010 by alHaos

Great Rash · November 30, 2010

1) реализуйте 2-х колоночный макет с колонками одинаковой высоты

2) в левой колонке реализуйте прижатый книзу подвал (блок №3)

Фразы "прижать подвал книзу" и "двухколоночный макет" отлично гуглятся.

alHaos · November 30, 2010

1) реализуйте 2-х колоночный макет с колонками одинаковой высоты
2) в левой колонке реализуйте прижатый книзу подвал (блок №3)
Фразы "прижать подвал книзу" и "двухколоночный макет" отлично гуглятся.

Thx.

Mr Loga · December 1, 2010

Макет в 2 колонки, а левая колонка это "стандартный шаблон" шапка-контент-подвал. Не вижу тут особых затруднений, если какой то блок встает не туда куда надо, или что то еще, то конкретизируйте вопрос.

alHaos · December 2, 2010

Макет в 2 колонки, а левая колонка это "стандартный шаблон" шапка-контент-подвал. Не вижу тут особых затруднений, если какой то блок встает не туда куда надо, или что то еще, то конкретизируйте вопрос.

Что-то трудно мне все это дается...

Итак: двух-колоночный макет делаю через table-row table-cell (на ИЕ класть хотеть)

<body>
	<div id="container_1">
	<div id="container_2">
		<div id="block_1">
			<p>block_1</p>
		</div>
		<div id="block_2">
			<p>block_2 p1</p>
			<p>block_2 p2</p>
			<p>block_2 p3</p>
		</div>
	</div>
	</div>
</body>

#container_1{
	width: 960px;
	display: table-cell;
}

#container_2{
	display: table-row;
}

#block_1{
	width: 480px;
	display: table-cell;
	background-color: lightblue;
	text-align: center;
}

#block_2{
	width: 480px;
	display: table-cell;
	background-color: pink;
	text-align: center;
}

вот теперь не пойму как в блок #block_1 всунуть два блока один прижатый к верху другой книзу.

Mr Loga · December 2, 2010

Блоку 2 position: absolute; bottom: 0; left: 0;

Edited December 2, 2010 by Mr Loga

alHaos · December 2, 2010

Блоку 2 position: absolute; bottom: 0; left: 0;

<body>
	<div id="container_1">
	<div id="container_2">
		<div id="block_1">
			<div id="block_1_1">
				<p>block_1_1</p>
			</div>
			<div id="block_1_2">
				<p>block_1_2</p>
			</div>
		</div>
		<div id="block_2">
			<p>block_2 p1</p>
			<p>block_2 p2</p>
			<p>block_2 p3</p>
		</div>
	</div>
	</div>
</body>

#container_1{
	width: 960px;
	display: table-cell;
}

#container_2{
	display: table-row;
}


#block_1{
	width: 480px;
	display: table-cell;
	background-color: lightblue;
	text-align: center;
}

#block_1_1{
	width: 480px;
	background-color: lightgray;
	text-align: center;
}

#block_1_2{
	width: 480px;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: fuchsia;
	text-align: center;
}


#block_2{
	width: 480px;
	display: table-cell;
	background-color: pink;
	text-align: center;
}

Так блок #block_1_2 прижат к нижнему левому углу окна, а мне надо к нижнему левому углу блока #block_1

Mr Loga · December 2, 2010

Так блок #block_1_2 прижат к нижнему левому углу окна, а мне надо к нижнему левому углу блока #block_1

А ты пробовал?

Edited December 2, 2010 by Mr Loga

Great Rash · December 2, 2010

http://www.jsfiddle.net/QRrtr/

alHaos · December 2, 2010

А ты пробовал?

No comment.

to Great Rash, Спасибо комрад.

alHaos · December 3, 2010

http://www.jsfiddle.net/QRrtr/

Оказалось "почти" то что надо...

Маленькое уточнение:

Мне нужен макет с одинаковой высотой колонок регулируемой контентом блока 4, сейчас если в блок четыре добавить контент высота которого в экран не укладывается он уходит вниз а блоки 1,2,3 так и остаются на месте, а надо чтобы колонки были одинаковой высоты даже если контент больше чем экран.

Edited December 3, 2010 by alHaos

rafandos · December 8, 2010

Всем хай. Помогите пожалуйста, уже долго мучаюсь в казалось бы простой ситуации.

Есть див внутри два дива с картинками, отделяю #kartinka сверху на 100px а он прилип к верхней части родителя, зато родитель со всем содержимым двигается на 100px вниз. Как быть чтобы родитель остался на месте а kartinka отодвинулась сверху?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Проверка PHP</title>

<!--

body {margin:0; padding:0;}

#menu {width:700px;

height:700px;

margin:0 auto;

padding:0;

background-color:#FFFFFF;

}

#kartinka { width:150px;

height:136px;

background-image:url(img/1.jpg);

margin:100px 0px 0px 20px;

padding:0;

position:relative;

}

#kartinka2 {width:150px;

height:136px;

background-image:url(img/2.jpg);

margin:10px 0px 0px 20px;

padding:0;

}

-->

</style>

</head>

</div>

</body>

</html>

Mr Loga · December 8, 2010

Всем хай. Помогите пожалуйста, уже долго мучаюсь в казалось бы простой ситуации.
Есть див внутри два дива с картинками, отделяю #kartinka сверху на 100px а он прилип к верхней части родителя, зато родитель со всем содержимым двигается на 100px вниз. Как быть чтобы родитель остался на месте а kartinka отодвинулась сверху?

Сделай так: допиши в #menu

padding-top: 1px;

Я не совсем понял как это, но ты поставь отступ для менюшки в 1px и она начинает работать.

rafandos · December 8, 2010

Заработало блин вод ведь а - интуицию надо развивать ) Спасибо

Sign In

css верстка, блоки, нужна помощь

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