Как такую верстку сделать можно?

«««one»»» · March 15, 2010

Несколько дней назад столкнулся с такой проблемой при верстке, на данный момент мозг уже кипит и плавно переходит в состояние паники

Вот схема:

%7Boption%7D

Проблема в том, чтобы закрепить "блок 2" относительно центра страницы со смещением влево на 100px.

Причем "блок 1" и "блок 3" должны полностью заполнять свободное пространство.

Дальше, при масштабировании сайта "блок 2" должен сохранять свою позицию относительно центра всей страницы.

(сайт резиновый и позиционируется относительно центра)

Не важно как это будет реализовано, дивами или таблицей, главное чтоб работало именно так как описано выше

П.С. я сам больше дизайнер, чем верстальщик

Буду очень благодарен за помощь.

Edited March 24, 2010 by «««one»»»

klierik · March 15, 2010

высота у всех должна быть одинакова?

slicemasta · March 15, 2010

1 и 3 блок по 50% или нет?

в 1 блок всунуть 2 саб блока, одни фиксированной ширины и находиться в правой части, 2й сабблок тянеться внутри.

Verder · March 15, 2010

Ну что-то вроде этого наверное предполагается (высота блоков в 300px для примера взял)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
		<title>primer</title>

		<style type="text/css">

			* {
				margin:0;
				padding:0;
			}

			#wrap {
				width:100%;
			}

			.left-block {
				width:30%;
				float:left;
				height:300px;
				background:#9caec9;
			}

			.right-block {
				width:70%;
				float:left;
				height:300px;
				background:#ff80c0;
			}

			.middle-block {
				width:70px;
				float:right;
				height:300px;
				background:#c9c994;
			}

		</style>

	</head>
	<body>

		<div id="wrap">
			<div class="left-block">
				<div class="middle-block">

				</div>
				</div>
				<div class="right-block"></div>

			</div>
		</div>

	</body>
</html>

«««one»»» · March 15, 2010

Verder большое спасибо, но это не то...

в "блоке 1" и "блоке 3" будет контент располагатся... а "блок 2" должен позиционироваться относительно центра, никак иначе, по другому он смещается при растягивании всего сайта... высота блоков плавающая... в зависимости от контента...

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

я перерыл кучу материала, но подобного нигде не видел... т.е. эти блоки должны быть резиновыми, кроме "блока 2" и позиционироваться относительно центра

Edited March 15, 2010 by «««one»»»

Alastor · March 15, 2010

Verder большое спасибо, но это не то...
в "блоке 1" и "блоке 3" будет контент располагатся... а "блок 2" должен позиционироваться относительно центра, никак иначе, по другому он смещается при растягивании всего сайта... высота блоков плавающая... в зависимости от контента...

Это Verder, просто я рекорд ставлю по количеству "забаниваний" на этом форуме

Ну извини, значит я не так понял. А можно взглянуть более подробную сетку? Где что будет, внутренние блоки и.т.д. Тогда проще будет понять, как сделать именно то, чего ты добиваешься.

SelenIT · March 15, 2010

В качестве варианта для затравки:

<!doctype html>
<style>
.left_bg { background: #ccf; min-width: 400px; overflow: hidden; }
.right_bg { float: right; background: #fcc; width: 50%; padding-left: 30px; border-left: 70px solid #ccc; }
.left { float: left; width: 100%; margin-left: -100%; }
.left .content { padding: 10px 100px 10px 10px; }
.middle { float: left; width: 70px; background: #ccc; margin-left: -100px; }
.middle .content { padding: 10px; }
.right { float: left; width: 100%; margin-left: -30px; }
.right .content { padding: 10px; margin-right: -30px; }
</style>
<div class="left_bg">
	<div class="right_bg">
	<div class="left">
		<div class="content">
		<p>Left column content</p>
		</div>
	</div>
	<div class="middle">
		<div class="content">
		<p>Mid. col. content</p>
		</div>
	</div>
	<div class="right">
		<div class="content">
		<p>Right column long text content</p>
		</div>
	</div>
	</div>
</div>

Правда, проверял пока только в FF3.6...

klierik · March 15, 2010

try this please...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>

	<title>domain :: main page</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<style type="text/css">

	body {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 0.625em;	/* default page font size is 10px (1em) */
		position:relative;
	}
	html, body {height:100%;}

		body,div,dl,dt,dd,ul,ol,li,form,table,tr,td,
		h1,h2,h3,h4,h5,h6,pre,p,span,b,i,
		input,textarea, fieldset { margin: 0; padding: 0; /*outline: none;*/ }

		p { font-size:1.1em; padding: .25em; line-height:15px; }

		.g-clear {clear:both;}
		.g-line {
			position:absolute; left:50%; top:0; z-index:99;
			margin-left:-1px;
			height:100%; width:1px;
			background:#aaa;
		}

		div.case { margin:1em 5em; padding: 5em 0; background:#eee; border:1px solid #ddd; border-width: 0 1px 1px 0; }
			div.holder {overflow:hidden; }

		div.l-left {float: left; position:relative; width: 50%; }
		div.l-right {float:left; width:50%; }
			div.data {height:20em;}
			div.l-left-data { padding-right:10em; background:#99cbd3; }
			div.l-right-data { position:relative; margin-left:-3em; background:#d39999;}

		div.l-inset { position:absolute; top:0; right: 3em; width:7em; }
			div.l-inset-data { background:#c3d399; }


	</style>

	<!--[if IE]>
	<style type="text/css">

		html {font-size: 101%;}

		/*
		* @bugfix IE6
		*/
		* html div.holder { zoom:1; }
		* html div.l-left { margin-right:-100%; }
		* html div.l-right { float:none; margin-left: 50%; width: auto; }

	</style>	
	<![endif]-->

</head>
<body>

<div class="g-line"></div>

	<div class="case"><div class="holder">

		<div class="l-left"><div class="l-left-data data">

			<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>

			<div class="l-inset"><div class="l-inset-data data"></div></div>

		</div></div>

		<div class="l-right"><div class="l-right-data data">
			<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
		</div></div>

	</div></div>

</body>
</html>

«««one»»» · March 16, 2010

klierik Работает спасибо огромное тебя можно смело называть маньяком верстки =)))))

«««one»»» · March 16, 2010

под ИЕ8 правда косяк... но попробую сам решить проблему

«««one»»» · March 16, 2010

Под Ие исправил zoom:0;

=)

Ещё раз огромное спасибо =) я теперь догнал как надо было делать =))))

psywalker · March 17, 2010

klierik Работает спасибо огромное тебя можно смело называть маньяком верстки =)))))

1) В ИЕ 6-7 смотрел?

2) А такой вариант чем не устраивает например?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>

	<title>domain :: main page</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<style type="text/css">
		*{ margin: 0; padding: 0;}
		html,body { height: 100%;}

		#wrap { min-height: 100%; position: relative; margin: 0 100px; overflow: hidden;}
		.wrap1 { background: #999; padding: 50px 0; margin-top: 20px; }
		.wrap2 { 
			background: #FF9; 

			height: 200px;
			overflow: hidden;
		}
		.border { 
			position: absolute; 
			left: 50%;
			width: 1px;
			height: 100%; 
			margin-left:-2;
			border-right: 1px solid #000;
		}
		.left {
				background: #6FF;
				overflow: hidden;


		}
		.right { background: #F96; float: right; width: 50%; margin-left: 70px; padding-left: 30px;}
		.leftWrap { }
	</style>

	<!--[if IE]>
	<style type="text/css">
		*html #wrap { height: 100%;}
		*html .left  { zoom:1;}
		*html body { width:expression(document.documentElement.clientWidth <700 ? "700px" : "auto");}

	</style>	
	<![endif]-->

</head>
<body>

	<div id="wrap"><div class="border"></div>

		<div class="wrap1"><div class="wrap2">

			<div class="right"><div style=" margin-left: -30px;">
			 <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>		   

			</div></div>

			  <div class="left">
			 <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>		   
			</div>	 
		</div></div>

	</div>

</body>
</html>

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