Верстка резиновых блоков

vladimir_lwlx · November 2, 2010

Добрый день. Вопрос следующий: возможно ли такую верстку (см. рис.) реализовать на чистом CSS+HTML, и как?, (я реализовал но с помощью javascript, узнавая offset.width ширину блока с контентом и соответственно увеличивая резиновый блок под ним)

Edited November 2, 2010 by vladimir_lwlx

psywalker · November 2, 2010

Лови дружище

<!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>3 Колонки</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body { min-width: 500px;}
	div { height: 100px;}
	#wrap1 { 
		margin: 5px; 
		position: relative;
		float: left;
		left: 50%;

	}
	#wrap2 { 
		float: left;
		left: -50%;
		position: relative;
		padding: 5px;
		border: 1px solid #000;
	}
	div.left { 
		position: absolute; 
		width: 200px; 
		background: red;
		left: 5px;
		top: 5px;
	}
	div.right { 
		position: absolute; 
		width: 200px; 
		background: red;
		right: 5px;
		top: 5px;
	}	
	div.content { 
		background: blue; 
		position: absolute;
		left: 210px;
		right: 210px;
		top: 5px;
	}
	div#s { 
		height: 80px; 
		margin: 10px 100px 0;
		position: relative;
		z-index: 2;
		background: #fff;
		opacity: 0.7;
		filter:alpha(opacity=70);

	}
</style>

<!--[if IE 6]>
<style type="text/css">
	div#s {display: inline; float: left;}
	body {width:expression(document.documentElement.clientWidth < 500 ? "500px" : "auto");}
div.content{width: expression(this.parentNode.offsetWidth-210-213+'px');}
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css">
	div#s { margin-top: 15px;height: 80px;}
</style>
<![endif]-->
</head>

<body>

<div id="wrap1">
<div id="wrap2">
	<div id="s">
		<p>	Soon our new web shop 
				will be launche again with 
				new design and great 
				featurearmed with many 
				new products and the 
				</p>		
	</div>	
	<div class="left"></div>
	<div class="right"></div>
	<div class="content"></div>
</div>			
</div>

</body>
</html>

vladimir_lwlx · November 3, 2010

Круто, красава! Благодарю!, А ты вначале написал код - я его и не понял (с 4-мя дивами, или может быть ты не совсем понял задачу

)) ), ушел в раздумья, - вернулся - тут другое

Edited November 3, 2010 by vladimir_lwlx

psywalker · November 3, 2010

Круто, красава! Благодарю!, А ты вначале написал код - я его и не понял (с 4-мя дивами, или может быть ты не совсем понял задачу )) ), ушел в раздумья, - вернулся - тут другое

Да, вначале я просто невнимательно прочитал задание. Много буков было) А потом всё таки решил осилить и соорудил решение

vladimir_lwlx · November 5, 2010

psywalker, дружище, а ты не знаешь случайно возможно ли в этой ситуации, теперь div#s (или <p> внутри него) выровнять по вертикали - по центру (по скольку он тянется ширину И в высоту), - стандартными способами я перепробовал всяко, у меня почему-то не получается((( и через абсолютное позиционирование (но он тогда как бы "выбивается" что-ли из потока и верстка разваливается), и vertical-align, (добавляя строчной элемент), и таблицой тоже?

Edited November 5, 2010 by vladimir_lwlx

psywalker · November 5, 2010

Дружище, для тебя всё что угодно

<!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>3 Колонки</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body { min-width: 500px;}
	div { height: 100px;}
	#wrap1 {
		margin: 5px;
		position: relative;
		float: left;
		left: 50%;

	}
	#wrap2 {
		float: left;
		left: -50%;
		position: relative;
		padding: 5px;
		border: 1px solid #000;
	}
	div.left {
		position: absolute;
		width: 200px;
		background: red;
		left: 5px;
		top: 5px;
	}
	div.right {
		position: absolute;
		width: 200px;
		background: red;
		right: 5px;
		top: 5px;
	}	
	div.content {
		background: blue;
		position: absolute;
		left: 210px;
		right: 210px;
		top: 5px;
	}
	div#s {
		height: 80px;
		margin: 10px 100px 0;
		display: table;
		position: relative;
		z-index: 2;
		background: #fff;
		opacity: 0.7;
		filter:alpha(opacity=70);


	}
	div#s p { display: table-cell;vertical-align: middle; }
</style>

<!--[if IE 6]>
<style type="text/css">
	div#s {display: inline; float: left;}
	body {width:expression(document.documentElement.clientWidth < 500 ? "500px" : "auto");}
div.content{width: expression(this.parentNode.offsetWidth-210-213+'px');}
	div#s p {margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");}
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css">
	div#s { margin-top: 15px;height: 80px;}
	div#s p {margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");}
</style>
<![endif]-->
</head>

<body>

<div id="wrap1">
<div id="wrap2">
	<div id="s">
		<p>	Soon our new web shop
				will be launche again with
				new design and great
				featurearmed with many
				new products and the
				</p>		
	</div>	
	<div class="left"></div>
	<div class="right"></div>
	<div class="content"></div>
</div>			
</div>

</body>
</html>

vladimir_lwlx · November 5, 2010

Во-во, я примерно таким же путем шел, но чо-то не получалось, я обраблял табличкой.

psywalker · November 5, 2010

Рад был помочь.

vladimir_lwlx · November 5, 2010

del

psywalker · November 5, 2010

del

vladimir_lwlx · November 5, 2010

clavin · November 5, 2010

В IE7 разметка почему-то дёргается и неравномерно изменяет размеры даже если javascript не включен

Edited November 5, 2010 by clavin

Sign In

Верстка резиновых блоков

Question

Link to comment

Share on other sites

11 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

Join the conversation

Обсуждения

Important Information