Резиновая вёрстка с минимальной шириной центра

Yuriy · August 29, 2010

Всем привет! Возникла одна интересная задача, которую пока не смог решить.

Имеется резиновая вёрстка: 2 боковые колонки, фиксированной ширины, и растягивающийся центр.

Проблема в следующем.

Минимальное разрешение экрана для нормального просмотра сайта - 1024х768. Мне нужно сделать так, чтобы центр полностью разместился на экране, имея минимальную ширину примерно в 990px, а боковые колонки чтобы просто "срезались", заняв оставшееся место на экране.

При большем разрешении экрана, соответственно, колонки будут показаны уже больше. А у кого совсем широкий экран - колонки будут на месте, а центр растянется под свободное место.

Думаю, идею изложил ясно.

Итак, вот что имеется:

<!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="ru" lang="ru">

	<head>
		<style>

			body
			{
				margin: 0;
				padding: 0;
			}

			body div
			{
				height: 500px
			}

			#wrap
			{
				width: 100%;
				overflow: hidden;
				position: relative
			}

			#container
			{
				width: 100%;
				min-width: 1280px;
				position: absolute;
				left: 50%;
				margin-left: -50%
			}

			#left
			{
				width: 300px;
				margin-left: -100%;
				background: #008000;
				float: left
			}

			#right
			{
				width: 300px;
				margin-left: -300px;
				background: #000080;
				float: left
			}

			#content
			{
				width: 100%;
				background: #116f92;
				float: left
			}

			#text
			{
				margin: 0 300px
			}

		</style>
	</head>

	<body>

		<div id="wrap">

			<div id="container">

				<div id="content">
					<div id="text">
						 
					</div>
				</div>

				<div id="left"></div>

				<div id="right"></div>

			</div>

		</div>

	</body>

</html>

Как видите, я попытался весь контейнер с колонками и контентом разместить по центру относительно дива, в котором это всё находится. ну и с помощью overflow: hidden боковые колонки бы ушли. Однако, не получается. Не центрируется ничего.

Кто-то верстал подобное? Какие у вас будут идеи для решения задачи? Спасибо!

mishka · August 29, 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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<style type="text/css">
		body{
			margin:0;
			min-width:600px;
			_width:expression(document.documentElement.clientWidth < 600 ? "600px" : "auto");
		}
		#wrapper{
			width:100%;
			position:relative;
			overflow:hidden;
		}
		.w1{
			float:left;
			position:relative;
			left:50%;
		}
		.w2{
			float:left;
			position:relative;
			left:-50%;
		}
		.w3{
			overflow:hidden;
			min-width:800px;
			display:table-cell; /* правит баг в опере */
			_width:expression(document.documentElement.clientWidth < 800 ? "800px" : "auto");
		}
		#content{
			overflow:hidden;
			height:1%;
			padding:0 10px;
		}
		#left{
			width:100px;
			float:left;
		}
		#right{
			width:100px;
			float:right;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div class="w1">
			<div class="w2">
				<div class="w3">
					<div id="left">
						<p>At condimentum lorem volutpat sodales aliquam id nunc Suspendisse orci platea.</p>
					</div>
					<div id="right">
						<p>At condimentum lorem volutpat sodales aliquam id nunc Suspendisse orci platea.</p>
					</div>
					<div id="content">
						<p>Lorem ipsum dolor sit amet consectetuer augue dui Sed Ut Pellentesque. Vel fringilla risus porta sapien nulla facilisis risus ac enim cursus. Vestibulum turpis Quisque nibh.</p>
						<p>Sapien pulvinar elit urna a tempor semper Donec Sed Aenean pede. Ligula sagittis pede dolor mi vitae amet Aenean libero nec ligula. Vel vitae ante porta Curabitur adipiscing Nulla facilisis dolor non est. </p>
						<p>At condimentum lorem volutpat sodales aliquam id nunc Suspendisse orci platea. Suscipit aliquet Curabitur vitae eros morbi eleifend justo non Nunc Vestibulum. Vitae et elit vel.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Edited August 29, 2010 by mishka2

Yuriy · August 29, 2010

Спасибо за ответ! Однако, не совсем то, что я хотел.

У меня разрешение экрана 1024х768. Центральная часть должна быть примерно под 990 px, боковые - по 300. К примеру. Вот что у меня получается при выставлении этой ширины боковым колонкам:

А должно быть примерно так:

Правда эту картинку я получил путём увеличения масштаба в браузере. Но должно быть так.

И интересный момент... Не знаю почему, но вёрстка резиновость теряет при сильном уменьшении масштаба:

Пока подумаю ещё посижу, что делать. Но очень надеюсь, что поможете довести до идеала Ибо за час работы пока результат нулевой...

Спасибо!

mishka · August 29, 2010

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

И что получил - сайт резиновый на всю ширину браузера. Боковые колонки по 100 пикселей, центр минималка - 600пикселей.

При сужении окна боковые колонки прячутся. Остается только центральная. Проверял в FF 3.5, IE6-8, Opera 10.61, Chrome 5, Safari 4.

Тебе что еще и разжевать как это работает, и размеры твои поставить? И может еще даш дизайн, так и сверстать за тебя?

Слабо включить моцк и подставить свои размеры?

Yuriy · August 30, 2010

И что получил - сайт резиновый на всю ширину браузера.

Да, как на последнем скрине - особенно.

Ладно, спасибо большое за помощь. Буду додумывать.

P. S. Грубить было совсем не обязательно. Ты совсем не знаешь, кто твой собеседник.

mishka · August 30, 2010

Да уж, дома на 17" было все замечательно. А вот на большом мониторе действительно на всю ширину не растягивается.

Ну тогда у меня идеи как это разрулить чисто версткой закончились, покачто. Вечером еще подумаю как разрулить.

Yuriy · August 30, 2010

Буду очень благодарен.

А на счёт размеров - это я действительно на сонную голову не разобрался - откуда и что. Сейчас всё понял.

Edited August 30, 2010 by Yuriy

klierik · August 30, 2010

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

psywalker · August 30, 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>Block</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
	html { overflow: auto; height: 100%;}
	body { 
		overflow-x: hidden; 
		min-width: 1000px;
		width: 100%;
		_width:expression(document.documentElement.clientWidth < 1000 ? "1000px" : "auto");
		zoom:1;
		min-height: 100%;
	 }



		div.wrap { 
			background: blue;
			position: relative;
			width: 1000px;
			margin: 0 auto;
			zoom:1;


		}
			div.left,
			div.right { 
				width: 200px;
				background: red;
				position: absolute;
				top: 0;

			}
				div.right { right: -200px;}
				div.left { left: -200px;}

		p { padding: 10px;}

</style>
</head>

<body>		


 	<div class="wrap">
		<div class="left">
			<p>Сколько раз вы оказывались в ситуации, что печатая сложный пароль, вы путались, сбивались и забывали, на каком символе вы остановились? И что вы делали? Стирали уже набранные 14 знаков и набирали по новой, так ведь? А всё почему? Потому что ваш пароль скрывается за звёздочками. А нужны ли они?</p>

			<p>Сколько раз вы оказывались в ситуации, что печатая сложный пароль, вы путались, сбивались и забывали, на каком символе вы остановились? И что вы делали? Стирали уже набранные 14 знаков и набирали по новой, так ведь? А всё почему? Потому что ваш пароль скрывается за звёздочками. А нужны ли они?</p>
		</div>
		<div class="right">
			<p>Сколько раз вы оказывались в ситуации, что печатая сложный пароль, вы путались, сбивались и забывали, на каком символе вы остановились? И что вы делали? Стирали уже набранные 14 знаков и набирали по новой, так ведь? А всё почему? Потому что ваш пароль скрывается за звёздочками. А нужны ли они?</p>
			<p>Сколько раз вы оказывались в ситуации, что печатая сложный пароль, вы путались, сбивались и забывали, на каком символе вы остановились? И что вы делали? Стирали уже набранные 14 знаков и набирали по новой, так ведь? А всё почему? Потому что ваш пароль скрывается за звёздочками. А нужны ли они?</p>
		</div>
			<p>Сколько раз вы оказывались в ситуации, что печатая сложный пароль, вы путались, сбивались и забывали, на каком символе вы остановились? И что вы делали? Стирали уже набранные 14 знаков и набирали по новой, так ведь? А всё почему? Потому что ваш пароль скрывается за звёздочками. А нужны ли они?</p>

	</div>





</body>
</html>

mishka · August 30, 2010

overflow-x: hidden; для ие8 равносильно overflow: hidden;

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

Короче нужен маленький скриптик

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

Edited August 30, 2010 by mishka2

mishka · August 30, 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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<style type="text/css">
		body{
			margin:0;
			min-width:600px;
			_width:expression(document.documentElement.clientWidth < 600 ? "600px" : "auto");
		}
		#wrapper{
			width:100%;
			position:relative;
			overflow:hidden;
		}
		.w1{
			float:left;
			position:relative;
			left:50%;
			width:100%;
			min-width:800px;
			_width:expression(document.documentElement.clientWidth < 800 ? "800px" : "auto");
		}
		.w2{
			float:left;
			position:relative;
			left:-50%;
			width:100%;
		}
		#content{
			overflow:hidden;
			height:1%;
			padding:0 10px;
		}
		#left{
			width:100px;
			float:left;
		}
		#right{
			width:100px;
			float:right;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div class="w1">
			<div class="w2">
				<div id="left">
					<p>At condimentum lorem volutpat sodales aliquam id nunc Suspendisse orci platea.</p>
				</div>
				<div id="right">
					<p>At condimentum lorem volutpat sodales aliquam id nunc Suspendisse orci platea.</p>
				</div>
				<div id="content">
					<p>Lorem ipsum dolor sit amet consectetuer consequat Vestibulum vitae mi Morbi. Sem et quis tempor at et urna Vestibulum pellentesque eu Nam. Pharetra sed nec Aliquam nibh elit Vivamus Donec Suspendisse convallis nibh. Consequat pellentesque fringilla lacinia condimentum Ut leo id gravida.</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Edited August 30, 2010 by mishka2

psywalker · August 30, 2010

Медведь, отлично всё. Красавчик

mishka · August 30, 2010

Медведь, отлично всё. Красавчик

Спасибо ). Меня случайно осенило, непойму чего вчера час думал - непридумал ))

Yuriy · August 30, 2010

mishka2

Огромнейшее спасибо! Идеально работает

Sign In

Резиновая вёрстка с минимальной шириной центра

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