Нужна помощь с растяжкой

psywalker · May 14, 2009

Ребят, задача на мой взгляд очень интересная, вобщем есть сайт, шапка, левая колонка и правая. В левой колонке есть меню, под ним Блок,а справа Контент, но вся Загвоздка в том, что Контент и это Левое нижнее меню имеют Закруглённые углы, и ещё вдобавок Фон, соответствующего цвета, Поэтому вопрос:

Как сделать так, чтобы когда например Контент переполняется содержанием и тянется ниже, чтобы этот Левый блок тоже тянулся вместе с Контентом, а за ним и его Фон с уголками, и Наоборот чтобы когда Левый блок переполнялся, то уже контент тянулся за ним?

Вот схема:

Great Rash · May 14, 2009

По моему тут проще всего использовать таблицы.

klierik · May 14, 2009

с таблицами понятно. только область MENU не схлопывается в минимум

psywalker · May 14, 2009

А какже фон с уголками закруглёными растянуть в ячейке? Фон ещё градиент сверху вниз блин

Какие ещё способы кто посоветует?

Edited May 14, 2009 by psywalker

psywalker · May 14, 2009

Мужики, ну что, есть желающие помочь с задачкой?

s0rr0w · May 14, 2009

Мужики, ну что, есть желающие помочь с задачкой?

Левый столбец может менять ширину?

klierik · May 14, 2009

нет. ширина изначально задается фиксированной.

Блок MENU меняет высоту относительно меню в нем.

Блок INFO занимает все оставшееся пространство

Блоки INFO и CONTENT тянут друг друга.

s0rr0w · May 14, 2009

нет. ширина изначально задается фиксированной.
Блок MENU меняет высоту относительно меню в нем.
Блок INFO занимает все оставшееся пространство
Блоки INFO и CONTENT тянут друг друга.

Тогда стоит помухлевать с бэкграундами.

Вообще стоит более точно макет показать.

nvgudz · May 15, 2009

Да, точно интересная задача Понравилась. Решение есть. Для дивов. Только один момент, прошу не критиковать за именно такое решение для ИЕ, ну и также за названия классов, отсутствие спрайтов... ))) Png в бекграунде только для красочности не белее.

Итакс, у нас есть общий бекграунд - градиент по вертикали (fon1.png). Есть хедер, определенной фиксированной высоты. Для того, чтоб добиться "нормального" перемещения уголков вырезаем еще один градиент (menu_bg1.png), отняв сверху от бг_номер 1 высоту хедера. tl,tr,bl,br,ctl,ctr,cbl,cbr - это пнг-ешки уголков (верхний, правый, нижний, левый) меню и контента соотвественно.

Собственно цсс (максимально полный):

html, body {margin:0; padding:0; color: #000;font:12px  Helvetica, sans-serif; background:#014250 url(../images/fon1.png) repeat-x;  }
/* обнуляем элементы, чтоб не мучаться */
img{border: 0;}
a{color:#044170;text-decoration:underline;}
a:hover{text-decoration:none; }
a img{border: none;}
div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em,  q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-family: inherit;
list-style-type: none;
}
/* общий валидный хак-фикс */
.clearfix:after {	content: ".";	display: block;	clear: both;	visibility: hidden;	line-height: 0;	height: 0;}
.clearfix{	display: inline-block;}
*html .clearfix{ display: inline-block; }
html[xmlns] .clearfix{	display: block;}
* html .clearfix{	height: 1%;}

.header{ height: 80px; background:#cecece; color: #fff; text-align: center; overflow: hidden; line-height: 80px; }/* хедер */
.info_bg {  background: #980000; } /* то что тянеться слева внизу */
.content_bg { background: #ddf2d8;} /* то что тянеться справа */
.info {color: #fff; padding: 10px; }

/* колонки для всех браузеров */
.outer_block { display:table; border-spacing: 0; } /* контейнер для колонок */
.b_left_content,.b_right_content,.b_middle_content { display: table-cell; height: 100%; vertical-align: top;} /* три колонки */

.b_left_content_padd,.b_left_content_padd1{ width: 170px; } /* распорка для левой колонки */
.b_left_content_padd1{ background:#014250 url(../images/menu_bg1.png) repeat-x; padding-bottom: 25px; } /* прозрачные уголки на бекграунде + отступ снизу менюхи */
.b_right_content_padd { background:#014250 url(../images/menu_bg1.png) repeat-x; }/* прозрачные уголки на бекграунде контента */
.b_middle_content_padd{ width: 15px; height: 5px; overflow: hidden;}/* распорка для средней колонки, тут с ограниченной высотой */
.b_right_content{ width:100%; }

/* контейнера для уголков */
.b_rounded{min-height: 5px; }
*html .b_rounded { height: 5px; }
.for_top_bottom_corners{padding: 5px 0;  }
.for_top_corners{padding: 5px 0 0 0;  }

.b_top_block,.b_bott_block{display:block; position: relative; width:100%;height:5px; overflow: hidden;}
.b_top_block *,.b_bott_block * { display: block }
.b_top_block { top: 0;  }
.b_bott_block { bottom: 0;  }
/* /контейнера для уголков */

/* уголки с фоном между ними */
.repeat_x{ margin: 0 5px; height: 100%; }
.tl,.bl { position: absolute;left:0;  width: 5px; height: 5px; }
.tr,.br { position: absolute;right:0; width: 5px; height: 5px; }
.menu_left .tl { background: url(../images/tl.png) }
.menu_left .tr { background: url(../images/tr.png) }
.menu_left .bl { background: url(../images/bl.png) }
.menu_left .br { background: url(../images/br.png) }
.content .tl { background: url(../images/ctl.png) }
.content .tr { background: url(../images/ctr.png) }
.content .bl { background: url(../images/cbl.png) }
.content .br { background: url(../images/cbr.png) }

.menu_left .repeat_x,.menu_inner{ background: #fff; }
.menu_inner li { padding-bottom: 3px; }

.content .repeat_x,.content_inner { background: #ddf2d8; }
.menu_inner,.content_inner { padding: 0 10px; }
/* /уголки с фоном между ними */

/* хакаем ИЕ (в жизни проще выносить в цсс для ИЕ) - колонки для ИЕ */

*html .outer_block,*html .b_left_content,*html .b_right_content,*html .b_middle_content { display: block; }
*html .b_left_content,*html .b_middle_content { float: left; }
*html .ie .b_left_content,*html .ie .b_middle_content,*html .ie .b_right_content { height: expression((parentNode.offsetHeight)); }
*html .b_left_content { width: 170px; }
*html .b_right_content { width: auto; }

*+html .outer_block,*+html .b_left_content,*+html .b_right_content,*+html .b_middle_content { display: block;}
*+html .b_left_content,*+html .b_middle_content { float: left;}
*+html .ie .b_left_content,*+html .ie .b_middle_content,*+html .ie .b_right_content { height: expression((parentNode.offsetHeight)); }
*+html .b_left_content { width: 170px; }
*+html .b_right_content { width: auto;}

/* фильтры для 6 осла */
*html .tl,*html .bl,*html .tr,*html .br{ background: none!important; }
*html .menu_left .tl {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tl.png', sizingMethod='crop');}
*html .menu_left .tr {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tr.png', sizingMethod='crop');}
*html .menu_left .bl {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bl.png', sizingMethod='crop');}
*html .menu_left .br {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/br.png', sizingMethod='crop');}
*html .content .tl {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ctl.png', sizingMethod='crop');}
*html .content .tr {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ctr.png', sizingMethod='crop');}
*html .content .bl {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/cbl.png', sizingMethod='crop');}
*html .content .br {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/cbr.png', sizingMethod='crop');}

и html (специально по несколько классов, чтоб не запутаться в параметрах и свойствах окончательно)

<!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" xml:lang="en" lang="en">
<head>
	<title>Тянем-потянем, а вытянуть не можем</title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<link rel="stylesheet" href="css/css.css" type="text/css" />
</head>
<body>
<div class="header"><h2>header</h2></div>
<div class="outer_block ie">
	<div class="b_left_content info_bg">
		<div class="b_left_content_padd1">
			<div class="b_rounded menu_left clearfix">
				<span class="b_top_block"><span class="tr"></span><span class="tl"></span><span class="repeat_x"></span></span>
				<ul class="menu_inner">
					<li><a href="">MEnu Item</a></li>
					<li><a href="">MEnu2 Item</a></li>
					<li><a href="">MEnu333 Item</a></li>
					<li><a href="">MEnu4 Item</a></li>
					<li><a href="">MEnu56cxc Item</a></li>
					<li><a href="">MEnu56cxc Item</a></li>
				</ul>
				<span class="b_bott_block"><span class="br"></span><span class="bl"></span><span class="repeat_x"></span></span>
			</div>
		</div>
		<div class="b_rounded menu_left" style="margin-top:-5px;"><span class="b_bott_block"><span class="tr"></span><span class="tl"></span><span class="repeat_x"></span></span></div>
		<div class="info">Моё любимое инфо Мона и с кружочками</div> А здесь просто текст на красном фоне. Без отступов. Уголки для этого визуального блока можна не задавать Чтоб не потерять пиксели снизу, вместо уголков добавить полоску. style="margin-top:-5px;" - только для наглядности.
	</div>
	<div class="b_middle_content"><div class="b_middle_content_padd"></div></div>
	<div class="b_right_content content_bg">
		<div class="b_right_content_padd">
			<div class="b_rounded content clearfix">
				<span class="b_top_block"><span class="tr"></span><span class="tl"></span><span class="repeat_x"></span></span>
					<div class="content_inner">
						Похоже, здесь был контент <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Похоже, здесь был контент<br />
						Похоже, здесь был контент <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Похоже, здесь был контент<br />
						Похоже, здесь был контент <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Похоже, здесь был контент<br />
						Похоже, здесь был контент <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Похоже, здесь был контент<br />
					</div>
			</div>
		</div>
	</div>
</div>
<!-- нижние уголки или линии, как вам угодно -->
<div class="outer_block">
	<div class="b_left_content">
		<div class="b_left_content_padd"><div class="b_rounded menu_left clearfix"><span class="b_bott_block"><span class="br"></span><span class="bl"></span><span class="repeat_x"></span></span></div></div>
	</div>
	<div class="b_middle_content clearfix"><div class="b_middle_content_padd"></div></div>
	<div class="b_right_content">
			<div class="b_rounded content clearfix">
				<span class="b_bott_block"><span class="br"></span><span class="bl"></span><span class="repeat_x"></span></span>
			</div>	
	</div>
</div>
<!-- /нижние уголки или линии, как вам угодно -->

</body>
</html>

Edited May 15, 2009 by nvgudz

psywalker · May 15, 2009

nvgudz

Дружище , Спасибище тебе,но есть проблема: Когда заполняется Контент, то Левая колонка тянется за ним, а вот когда Наоборот заполняется Левая колонка, то Контент остаётся на месте, и не тянется за Левой колонкой, а нужно, чтобы всё при переполнении содержания тянуло друг друга

nvgudz · May 15, 2009

nvgudz
Дружище , Спасибище тебе,но есть проблема: Когда заполняется Контент, то Левая колонка тянется за ним, а вот когда Наоборот заполняется Левая колонка, то Контент остаётся на месте, и не тянется за Левой колонкой, а нужно, чтобы всё при переполнении содержания тянуло друг друга

Спасибо, что заметил

строчка в цсс

.content_bg { background: #ddf2d8;} /* то что тянеться справа */

после

.info_bg {  background: #980000; } /* то что тянеться слева внизу */

стерлась...

Приношу извенения. Все исправлено.

П.с.: для работы, а не наглядности, коды цсс и хтмл можно хорошо сократить.

Sign In

Нужна помощь с растяжкой

Question

Link to comment

Share on other sites

10 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

Join the conversation

Обсуждения

Important Information