Помогите построить небольшой макет дивами

freesoul · February 10, 2011

Привет

есть небольшой код

<div id="body">
		<div id="leftcol">
			<div id="leftsidea"></div>
			<div id="leftsideb"></div>
			<div id="leftsidec"></div>
		</div>
		<div id="bodycenter">
				 text
		</div>
		<div id="rightside"></div>
	</div>

и css

#leftcol{
	width:145px;
	float:left;
	height:100%;
}
#body{
	text-align: center;
	width:1300px;
	float:left;
}
#leftsidea{
	text-align: left;
	width:145px;
	background-image: url('../images/leftside.png');
	background-repeat: repeat-y;
	float:left;
}
#leftsideb{
	text-align: left;
	width:145px;
	height:34px;
	background-image: url('../images/leftmid.png');
	background-repeat: no-repeat;
	float:left;
}
#leftsidec{
	text-align: left;
	height:100px;
	width:145px;
	background-image: url('../images/leftmid2.png');
	background-repeat: no-repeat;
	float:left;
}
#bodycenter{
	width:1095px;
	text-align: center;
	background-color:#f2f4f2;
	float:left;
}
#rightside{
	text-align: right;
	width:60px;
	height:100%;
	background-image: url('../images/rightside.png');
	background-repeat: repeat-y;
	float:left;
}

не выходит у меня никак repeat-y по вертикали

Хочу получить

Edited February 10, 2011 by freesoul

Great Rash · February 10, 2011

#rightside{
	text-align: right;
	width:60px;
	height:100%;
	background-image: url('../images/rightside.png');
	background-repeat: repeat-y;
	float:left;
}

Родителю этого контейнера не задана высота, поэтому ему не от чего брать height: 100%; Задайте высоту родителю и все заработает.

freesoul · February 10, 2011

Высота определяется кол-вом контента в блоке #bodycenter{

Задал ему Height:100%; Но ничего не изменилось =\ как-же ж ему высоту брать

psywalker · February 10, 2011

Высота определяется кол-вом контента в блоке #bodycenter{
Задал ему Height:100%; Но ничего не изменилось =\ как-же ж ему высоту брать

Погоди высоту задавать. Для начала сделай главный контейнер и растяни его на всю высоту, далее ему назначь уже нужный фон.

freesoul · February 10, 2011

или я уже запутался или вы меня неправильно поняли)

Давайте попробуем упростить задачку:

<div id="body">
		<div id="leftsidea">
		</div>
		<div id="bodycenter">
		</div>
		<div id="rightside"></div>
	</div>

и css к нему

html{heigh:100%;}
body{heigh:100%;}
#body{
	text-align: center;
	width:1300px;
	float:left;
}
#leftsidea{
	height:100%;
	width:145px;
	background-image: url('../images/leftside.png');
	background-repeat: repeat-y;
	float:left;
}

#bodycenter{
	width:1095px;
	height:100%;
	float:left;
}
#rightside{
	width:60px;
	height:100%;
	background-image: url('../images/rightside.png');
	background-repeat: repeat-y;
	float:left;
}

Рассуждая логически:

Идет блок #body, ему ничего не нужно кроме фикс ширины

Далее левый блок #leftsidea - иммеет фон, который должен повторяться по вертикали и иметь такую же высоту как #bodycenter, в который забиваем текст, много текста, его высота растет!

И третий блок аналогичный 1-му, нужно чтобы его высота была такой, как у #bodycenter

Как же сделать, чтобы правая и левые блоки подстраивались по высоте ... кроме как не hight:100%;

Edited February 10, 2011 by freesoul

psywalker · February 10, 2011

Вот смотри

#body{

text-align: center;

width:1300px;

min-height: 100%;

}

Great Rash · February 10, 2011

Чтобы работала высота 100% у родителя должна тоже быть задана высота. Хоть в лепешку расшибитесь, но это так. Вы задали 100% для <body>, но для #body высота не задана, по этому всем его потомкам не от чего брать высоту. 100% от ничего будет тоже ничего. Вот и не работает у вас нифига.

freesoul · February 10, 2011

Не работает и все тут =(

Пашет только если в #body Явно задать высоту в px.

Не работает даже min-height ни в %, ни px

Ведь как-то ж делают, чтобы левая и правая колонки подстраивались под высоту средней.... как в table

Edited February 10, 2011 by freesoul

Great Rash · February 10, 2011

Короче. Такой макет, который вам надо получить, сделать без гемора можно только таблицей. Что я вам и советую. Прекратите извращаться и делайте таблицей.

psywalker · February 10, 2011

Короче. Такой макет, который вам надо получить, сделать без гемора можно только таблицей. Что я вам и советую. Прекратите извращаться и делайте таблицей.

А может быть месье предпочитает гемор?

Vlad · February 10, 2011

Да забудьте вы уже про height: 100%, зачем вы себе проблемы придумываете. Считайте, что нет у слоев такой функции, она противоречит их идеологии!

Great Rash · February 10, 2011

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

freesoul · February 10, 2011

С таблицами проще, но ИЕ все портит, никак не могу под него подстроить

Кто поможет - буду оч признателен

Добро пожаловать(: http://forum.htmlbook.ru/index.php?showtopic=24540

Sign In

Помогите построить небольшой макет дивами

Question

Link to comment

Share on other sites

12 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

Join the conversation

Обсуждения

Important Information