Фиксированая ширина каркаса с резиновыми боками

VIRUS · October 28, 2009

Здравствуйте, целый день промучался с версткой на дивах, цель такая:

Есть дизайн, фиксированая ширина 1000 пикселов по центру браузера. Но в дизайне есть слева и справа дополнительные блоки вокруг центра, ширина каждого блока 300 пикселов. Но они должны обрезаться слева и справа соответственно от ширины браузера. Горизонтальная прокрутка должна появляться только тогда, когда ширина браузера меньше 1000 пикселов. Должно быть валидно (XHTML), работать во всех браузерах (IE 6-8, Firefox, Opera, Safari, Chrome, Netscape Navigator) одинаково. Без использования JavaScript.

Вот что есть на данный момент: http://vws.com.ua/projects/test/

psywalker · October 29, 2009

как вам такой вариант?

Только есть минус - правый и левый блок не растягивается по высоте в зависимости от высоты центрального.

Делал ширину 800 так как у меня моник 17" и мне плохо тестить на 1000

<!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>
	<title>Title</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<style type="text/css">
	body{
		margin:0;
		min-width:800px;
	}
	.left,
	.right{
		float:left;
		width:50%;
		height:100px;
		background:#f00;
		margin:0 -50% 0 0;
	}
	.right{
		float:right;
		margin:0 0 0 -50%;
	}
	.center{
		width:800px;
		overflow:hidden;
		position:relative;
		margin:0 auto;
		background:#ff0;
	}
	</style>
</head>
<body>
	<div class="left"></div>
	<div class="right"></div>
	<div class="center">
		<p>Lorem ipsum dolor sit amet consectetuer malesuada pretium Maecenas Nunc elit. Quisque Morbi malesuada quis mi Phasellus vestibulum magna Mauris penatibus molestie. Suspendisse vel.</p>
		<p>Vivamus mollis lacinia ut Vivamus convallis nunc Nam Vestibulum vel ante. Elit nisl et quam enim a neque ante at neque netus. Porttitor.</p>
		<p>Lorem lobortis augue eros senectus id penatibus quis Phasellus semper ornare. Scelerisque nibh et consectetuer nec natoque Aliquam.</p>
	</div>
</body>
</html>

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

VIRUS · October 29, 2009

Слушай, я даже пока ничё придумать не могу, но возможно мастер Great Rash сможет помочь, у меня то ещё опыта мало совсем. А покажи свой вариант кстати

Вот мой вариант, ссылка в сабже есть:

http://vws.com.ua/projects/test/index.html

Но тут горизонтальная прокрутка

mishka · October 29, 2009

Ачем ненравится тот вариант который Great Rash уже предложил?

Это немного переделанная работа от Great Rash

<!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>
	<title>Title</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<style type="text/css">
	body{
		margin:0;
		min-width:800px;
		_width:expression(document.documentElement.clientWidth < 800 ? "800px" : "auto");
	}
	.left,
	.right{
		float:left;
		width:50%;
		height:100px;
		background:#f00;
		margin:0 -50% 0 0;
		overflow:hidden;
	}
	.right{
		float:right;
		margin:0 0 0 -50%;
	}
	.left-inner{
		margin:0 400px 0 0;
	}
	.right-inner{
		margin:0 0 0 400px;
	}
	.center{
		width:800px;
		overflow:hidden;
		position:relative;
		margin:0 auto;
		background:#ff0;
	}
	</style>
</head>
<body>
	<div class="left">
		<div class="left-inner">left box</div>
	</div>
	<div class="right">
		<div class="right-inner">right box</div>
	</div>
	<div class="center">
		<p>Lorem ipsum dolor sit amet consectetuer malesuada pretium Maecenas Nunc elit. Quisque Morbi malesuada quis mi Phasellus vestibulum magna Mauris penatibus molestie. Suspendisse vel.</p>
		<p>Vivamus mollis lacinia ut Vivamus convallis nunc Nam Vestibulum vel ante. Elit nisl et quam enim a neque ante at neque netus. Porttitor.</p>
		<p>Lorem lobortis augue eros senectus id penatibus quis Phasellus semper ornare. Scelerisque nibh et consectetuer nec natoque Aliquam.</p>
	</div>
</body>
</html>

VIRUS · October 29, 2009

Ачем ненравится тот вариант который Great Rash уже предложил?

Это немного переделанная работа от Great Rash

<!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>
	<title>Title</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<style type="text/css">
	body{
		margin:0;
		min-width:800px;
		_width:expression(document.documentElement.clientWidth < 800 ? "800px" : "auto");
	}
	.left,
	.right{
		float:left;
		width:50%;
		height:100px;
		background:#f00;
		margin:0 -50% 0 0;
		overflow:hidden;
	}
	.right{
		float:right;
		margin:0 0 0 -50%;
	}
	.left-inner{
		margin:0 400px 0 0;
	}
	.right-inner{
		margin:0 0 0 400px;
	}
	.center{
		width:800px;
		overflow:hidden;
		position:relative;
		margin:0 auto;
		background:#ff0;
	}
	</style>
</head>
<body>
	<div class="left">
		<div class="left-inner">left box</div>
	</div>
	<div class="right">
		<div class="right-inner">right box</div>
	</div>
	<div class="center">
		<p>Lorem ipsum dolor sit amet consectetuer malesuada pretium Maecenas Nunc elit. Quisque Morbi malesuada quis mi Phasellus vestibulum magna Mauris penatibus molestie. Suspendisse vel.</p>
		<p>Vivamus mollis lacinia ut Vivamus convallis nunc Nam Vestibulum vel ante. Elit nisl et quam enim a neque ante at neque netus. Porttitor.</p>
		<p>Lorem lobortis augue eros senectus id penatibus quis Phasellus semper ornare. Scelerisque nibh et consectetuer nec natoque Aliquam.</p>
	</div>
</body>
</html>

Тут левый блок под центр прячется а не под край браузера

psywalker · October 29, 2009

да вариант ничё вроде, но есть проблема: Нужно, что-бы боковые колонки были по 300пк, а не резиновые

VIRUS А как тебе наглый вариант?

http://psywalker.ru/Forum/Column/Column_1400px3.html

mishka · October 29, 2009

да вариант ничё вроде, но есть проблема: Нужно, что-бы боковые колонки были по 300пк, а не резиновые

Непонял, так резиновые бока иль всеже фиксированные? Как тема называется?

VIRUS · October 29, 2009

да вариант ничё вроде, но есть проблема: Нужно, что-бы боковые колонки были по 300пк, а не резиновые
VIRUS А как тебе наглый вариант?
http://psywalker.ru/Forum/Column/Column_1400px3.html

Наглый я в первую очередь пробовал, но скролл полюбому должен быть если ширина меньше 1000px

Боковые колонки невопрос, пусть будут фиксированой ширины 300px. Главное, что бы прятались под края браузера.

Непонял, так резиновые бока иль всеже фиксированные? Как тема называется?

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

psywalker · October 29, 2009

Наглый я в первую очередь пробовал, но скролл полюбому должен быть если ширина меньше 1000px
Боковые колонки невопрос, пусть будут фиксированой ширины 300px. Главное, что бы прятались под края браузера.
Резиновые имелось ввиду, что они будут прятаться под края браузера

Тогда тут просто нужен CSS Джидай какой нибудь, который решит эту проблему, я пока ещё в учениках нахожусь

VIRUS · October 29, 2009

Так и я ученик, токо начал учить верстку, но если решить такю проблему, как было бы круто...

Кстати вот тут так реализовано:

http://www.rm-online.ru/

Только вытащить от туда я вообще не всилах решение.

psywalker · October 29, 2009

Так и я ученик, токо начал учить верстку, но если решить такю проблему, как было бы круто...
Кстати вот тут так реализовано:
http://www.rm-online.ru/
Только вытащить от туда я вообще не всилах решение.

1) Да, задачка интересная и уверен, что пригодится на будущее, обязательно будем решать дальше

2) На этом сайте сделано фоном, обычный фон на body

VIRUS · October 29, 2009

1) Да, задачка интересная и уверен, что пригодится на будущее, обязательно будем решать дальше
2) На этом сайте сделано фоном, обычный фон на body

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

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

mishka · October 29, 2009

<!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">
		body{
			margin:0;
			min-width:800px;
			_width:expression(document.documentElement.clientWidth < 800 ? "800px" : "auto");
		}
		#wrapper{
			width:100%;
			overflow:hidden;
			position:relative;
		}
		.wrap{
			width:800px;
			margin:0 auto;
			position:relative;
			background:#00f;
		}
		.left,
		.right{
			width:200px;
			background:#f00;
			position:absolute;
			left:-200px;
			top:0;
		}
		.right{
			right:-200px;
			left:auto;
		}
		.center{
			overflow:hidden;
		}
	</style>
</head>
<body>
<div id="wrapper">
	<div class="wrap">
		<div class="left">
			<p>Lorem ipsum dolor sit amet consectetuer tempus nibh dolor interdum.</p>
		</div>
		<div class="right">
			<p>Lorem ipsum dolor sit amet consectetuer magna mauris justo auctor pede. Laoreet Cum lacinia wisi Aliquam nibh id.</p>
		</div>
		<div class="center">
			<p>Lorem ipsum dolor sit amet consectetuer Curabitur laoreet Aenean tellus et. Nunc justo ut consequat et Cum amet Maecenas laoreet Nulla felis. </p>
			<p>In Curabitur id condimentum id Integer dictumst ipsum nunc dictum eget. Nulla et magnis justo justo tincidunt gravida justo Curabitur turpis sagittis. Pellentesque.</p>
			<p>At eu quis ipsum elit Sed pede nec vestibulum morbi Cum. Et fringilla rhoncus pretium id enim lobortis lacus ut leo nunc. Vivamus Donec elit nunc scelerisque.</p>
		</div>
	</div>
</div>
</body>
</html>

Еще раз повторюсь - я делаю не на 1000, а меньше так как мне так удобнее тестить

Edited October 29, 2009 by mishka2

psywalker · October 29, 2009

вот это ахренеть ващее)), круто ты Мих молодец ващее, а решение то было совсем не трудным в принципе, обязательно себе в архив заложу и буду использовать. Думаю это точка или нет? что скажет автор?

Для ИЕ6 надо zoom:1; прописать #wrapper блоку

Edited October 29, 2009 by psywalker

mishka · October 29, 2009

вот это ахренеть ващее)), круто ты Мих молодец ващее, а решение то было совсем не трудным в принципе, обязательно себе в архив заложу и буду использовать. smile.gif Думаю это точка или нет? что скажет автор?

Да я то что... Всю работу сделал ты я ток чуток подправил

Для ИЕ6 надо zoom:1; прописать #wrapper блоку

ненадо! так как ширина есть 100%

а для .center - можна

Edited October 29, 2009 by mishka2

psywalker · October 29, 2009

Да я то что... Всю работу сделал ты я ток чуток подправил

да нее, извольте))) Я даже близко не был, тут полностью твоя работа медведь, за что ты получаешь твёрдую пятёрку. Но далеко не уходи, нам ещё могут понадобится CSS джидаи

rus · October 29, 2009

Мишка:

.right{

width:200px;

background:#f00;

position:absolute;

left:-200px;

top:0;

}

Как это будет выглядеть на широком мониторе?

VIRUS · October 29, 2009

<!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">
		body{
			margin:0;
			min-width:800px;
			_width:expression(document.documentElement.clientWidth < 800 ? "800px" : "auto");
		}
		#wrapper{
			width:100%;
			overflow:hidden;
			position:relative;
		}
		.wrap{
			width:800px;
			margin:0 auto;
			position:relative;
			background:#00f;
		}
		.left,
		.right{
			width:200px;
			background:#f00;
			position:absolute;
			left:-200px;
			top:0;
		}
		.right{
			right:-200px;
			left:auto;
		}
		.center{
			overflow:hidden;
		}
	</style>
</head>
<body>
<div id="wrapper">
	<div class="wrap">
		<div class="left">
			<p>Lorem ipsum dolor sit amet consectetuer tempus nibh dolor interdum.</p>
		</div>
		<div class="right">
			<p>Lorem ipsum dolor sit amet consectetuer magna mauris justo auctor pede. Laoreet Cum lacinia wisi Aliquam nibh id.</p>
		</div>
		<div class="center">
			<p>Lorem ipsum dolor sit amet consectetuer Curabitur laoreet Aenean tellus et. Nunc justo ut consequat et Cum amet Maecenas laoreet Nulla felis. </p>
			<p>In Curabitur id condimentum id Integer dictumst ipsum nunc dictum eget. Nulla et magnis justo justo tincidunt gravida justo Curabitur turpis sagittis. Pellentesque.</p>
			<p>At eu quis ipsum elit Sed pede nec vestibulum morbi Cum. Et fringilla rhoncus pretium id enim lobortis lacus ut leo nunc. Vivamus Donec elit nunc scelerisque.</p>
		</div>
	</div>
</div>
</body>
</html>

Еще раз повторюсь - я делаю не на 1000, а меньше так как мне так удобнее тестить

Отличное решение, работает во всех браузерах (кроме неактуального IE5.5 )

Спасибо огромное, хоть свою задачу я решил с фоном выровняным по центру, но это решение в архив для анализа

P.S.: Сегодня к вечеру, выложу релиз того, что я своял, раз уж такая тема завелась

psywalker · October 29, 2009

Мишка:
.right{
width:200px;
background:#f00;
position:absolute;
left:-200px;
top:0;
}
Как это будет выглядеть на широком мониторе?

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

mishka · October 29, 2009

Вот конечный результат, с учетом правильной последовательности блоков

<!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">
		body{
			margin:0;
			min-width:800px;
			_width:expression(document.documentElement.clientWidth < 800 ? "800px" : "auto");
		}
		#wrapper{
			width:100%;
			overflow:hidden;
			position:relative;
		}
		.wrap{
			width:800px;
			margin:0 auto;
			position:relative;
			background:#00f;
		}
		.left,
		.right{
			width:200px;
			background:#f00;
			position:absolute;
			left:-200px;
			top:0;
		}
		.right{
			right:-200px;
			left:auto;
		}
		.center{
			overflow:hidden;
			_zoom:1;
		}
	</style>
</head>
<body>
<div id="wrapper">
	<div class="wrap">
		<div class="center">
			<p>Lorem ipsum dolor sit amet consectetuer Curabitur laoreet Aenean tellus et. Nunc justo ut consequat et Cum amet Maecenas laoreet Nulla felis. </p>
			<p>In Curabitur id condimentum id Integer dictumst ipsum nunc dictum eget. Nulla et magnis justo justo tincidunt gravida justo Curabitur turpis sagittis. Pellentesque.</p>
			<p>At eu quis ipsum elit Sed pede nec vestibulum morbi Cum. Et fringilla rhoncus pretium id enim lobortis lacus ut leo nunc. Vivamus Donec elit nunc scelerisque.</p>
		</div>
		<div class="left">
			<p>Lorem ipsum dolor sit amet consectetuer tempus nibh dolor interdum.</p>
		</div>
		<div class="right">
			<p>Lorem ipsum dolor sit amet consectetuer magna mauris justo auctor pede. Laoreet Cum lacinia wisi Aliquam nibh id.</p>
		</div>
	</div>
</div>
</body>
</html>

psywalker · October 29, 2009

Отлично медведь, просто супер!

mishka · October 29, 2009

Мишка:
.right{
width:200px;
background:#f00;
position:absolute;
left:-200px;
top:0;
}
Как это будет выглядеть на широком мониторе? smile.gif

непонял вопрос.

На самом деле будет здорово если сделать чтобы центральная часть растягивала по высоте боковые части

psywalker · October 29, 2009

На самом деле будет здорово если сделать чтобы центральная часть растягивала по высоте боковые части

Ну уже пошла темаа, теперь будут приукрашивать идею..вот мастераа, аа какииеее

rus · October 29, 2009

непонял вопрос.

.right - позиционируется относительно #wrapper

#wrapper - имеет 100% ширину, так?

у .wrap - ширина фиксированная 1000px (у тебя 800 - это понятно).

А вот теперь представь если монитор стоит 17 дюймов и рядом же стоит 19 или 22 дюйма, представил?

Этот абсолют будет всегда стоять на одном и том же месте и при увеличении экрана, он так же останется на месте, а это значит что появится зазор между .right и .wrap, по логике должен появиться зазор...

psywalker · October 29, 2009

.right - позиционируется относительно #wrapper
#wrapper - имеет 100% ширину, так?
у .wrap - ширина фиксированная 1000px (у тебя 800 - это понятно).
А вот теперь представь если монитор стоит 17 дюймов и рядом же стоит 19 или 22 дюйма, представил?
Этот абсолют будет всегда стоять на одном и том же месте и при увеличении экрана, он так же останется на месте, а это значит что появится зазор между .right и .wrap, по логике должен появиться зазор...

Рустамыч, ты не прав

.right - позиционируется относительно .wrap

rus · October 29, 2009

Рустамыч, ты не прав
.right - позиционируется относительно .wrap

Ой! Не разглядел что у .wrap тоже стоит релатив.

Sign In

Фиксированая ширина каркаса с резиновыми боками

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

70 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

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