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

VIRUS · October 28, 2009

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

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

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

rus · October 29, 2009

Посмотри исходный код как сделано на этом сайте и разбери его.

UPS, не обратил внимание что ветка форума - "для начинающих".

Вобщем теоретически можно сделать так:

основному блоку, который по центру даешь размер 1000px.

в теге html прописываешь картинку бэкграунд и позиционируешь ее например слева и вверх.

в теге body прописываешь картинку бэкграунд и позиционируешь ее например справа и вверх.

Edited October 29, 2009 by rus

psywalker · October 29, 2009

Посмотри исходный код как сделано на этом сайте и разбери его.

Да, но это фон, а интересно бы сделать что-бы по бокам были именно блоки

rus · October 29, 2009

Да, но это фон, а интересно бы сделать что-бы по бокам были именно блоки

Хм..., мне самому интересно как они будут обрезаться слева и справа в соответствии от ширины браузера, если они будут заданного размера?

Мне кажется тут вариант только с процентами.

Edited October 29, 2009 by rus

psywalker · October 29, 2009

Хм..., мне самому интересно как они будут обрезаться слева и справа в соответствии от ширины браузера, если они будут заданного размера?
Мне кажется тут вариант только с процентами.

Вуаля: http://psywalker.ru/Forum/Column/Column_1400px.html

Это набросок, надо усовершенствовать попробовать чуть позже

Edited October 29, 2009 by psywalker

Great Rash · October 29, 2009

В общем тему я старую так и не нашел, поэтому состряпал пример еще раз. Осталось только сделать колонки одинаковой высоты как я понимаю...

<?xml version="1.0" encoding="utf-8"?>
<!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" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		.left,
		.right {
			width: 50%;
			height: 500px;
		}

		.left {
			float: left;
			margin-right: -500px; /* 1000/2=500 */
			background:#fedfed;
		}

		.left-inner {
			margin-right: 500px;
			height: 498px;
			border: red 1px solid;
		}

		.right {
			float: right;
			margin-left: -501px; /* 1000/2=500 + 1px баг ИЕ */
			background: #defdef;
		}

		.right-inner {
			margin-left: 500px;
			height: 498px;
			border: green 1px solid;
		}

		.center {
			position: relative;
			z-index: 1;
			float: left;
			width: 1000px;
			height: 500px;
			background: #efdabc;
		}
	</style>
</head>

<body>

	<div class="left">
		<div class="left-inner"></div>
	</div>
	<div class="right">
		<div class="right-inner"></div>
	</div>
	<div class="center">111</div>

</body>
</html>

psywalker · October 29, 2009

Ахренеть дружище, я тоже сделал свой вариант, надо будем поразбирать их ещё http://psywalker.ru/Forum/Column/Column_1400px.html

rus · October 29, 2009

Great Rash:

А зачем вверху эта строчка:

<?xml version="1.0" encoding="utf-8"?>

?

Ты ведь вроде не подгружаешь туда xml документ...

Edited October 29, 2009 by rus

Great Rash · October 29, 2009

А у меня круче

Я доктайп тупо скопировал отсюда: http://www.w3.org/QA/2002/04/valid-dtd-list.html

Ибо не помню как пишется доктайп. Все время лазить приходится туда и копировать. Хз зачем там эта строчка, но мне она не мешает.

Вообще по идее, чтоб все было кошерно должно быть так:

<meta http-equiv="content-type" content="text/xml;charset=utf-8" />

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

Edited October 29, 2009 by Great Rash

psywalker · October 29, 2009

А у меня круче

хаахах, ну даа, ну ничё, ща я соберусь и чё нить придумаю

Ответь пожалуйста на вопросы:

1) Как для ИЕ6 прописать Минимальную и максимальную ширину ИМЕННО у контейнера, а не у body?

2) Как для ИЕ6 прописать Минимальную и максимальную высоту ИМЕННО у контейнера, а не у body?

Просто все у кого спрашиваю, какую то ересь дают, и ещё при ресайзе ИЕ6 виснет, скажи пожалуйста, как такого же эффекта без зависания добиться в ИЕ6?

		div.wrap { 
			min-width: 1000px; 
			max-width: 1000px;

			min-height: 1000px;
			max-height: 1000px;
		}

Great Rash · October 29, 2009

Про минимальную высоту все просто, надо просто для ИЕ6 задавать высоту. Типа:

.class {
   min-height: 100px;
}

* html .class {
   height: 100px; /* height в ИЕ6 работает как min-height */
}

Justnewone · October 29, 2009

Про минимальную высоту все просто, надо просто для ИЕ6 задавать высоту. Типа:
.class {
   min-height: 100px;
}

* html .class {
   height: 100px; /* height в ИЕ6 работает как min-height */
}

А если оферфлоу? )

psywalker · October 29, 2009

Про минимальную высоту все просто, надо просто для ИЕ6 задавать высоту. Типа:
.class {
   min-height: 100px;
}

* html .class {
   height: 100px; /* height в ИЕ6 работает как min-height */
}

Да это я знаю, но мне принципиально хочется знать, как сделать именно min-height и т. д. вобщем всё вот это, прошу, если будет возможность, напиши код именно для БЛОКА:

		div.wrap {
			min-width: 1000px;
			max-width: 1000px;

			min-height: 1000px;
			max-height: 1000px;
		}

А если оферфлоу? )

А вот тут кстати есть выход, для ИЕ спецом поставить Оверфлоу: Визибл

Edited October 29, 2009 by psywalker

Great Rash · October 29, 2009

Гугль говорит, что тут лишь экспрешны помогут.

psywalker · October 29, 2009

Гугль говорит, что тут лишь экспрешны помогут.

Вот я уже гуглил 50 раз и всё что он мне выдаёт, зависает в ИЕ6, тоесть Браузер зависает, я по этому к тебе и обратился, так как ты ересь не напишешь

rash · October 29, 2009

Great Rash:
А зачем вверху эта строчка:
<?xml version="1.0" encoding="utf-8"?>
?
Ты ведь вроде не подгружаешь туда xml документ...

XHTML-документ по совместительству является и XML-документом, но XML-декларация, бывает, мешает ИЕ в стандартный режим переключиться.

Great Rash · October 29, 2009

rash - да это я знаю quirks mode и все такое... хотя у меня действительно ни разу с ИЕ проблем не было из-за XML-декларации.

psywalker - скрипты может? А я говорил, что экспрешны не гуд...

Edited October 29, 2009 by Great Rash

psywalker · October 29, 2009

Great Rash:
А зачем вверху эта строчка:
<?xml version="1.0" encoding="utf-8"?>
?
Ты ведь вроде не подгружаешь туда xml документ...

Объявление XML (XML Declaration) является специальной инструкцией по обработке документа (processing instruction), определяющей версию стандарта XML и кодировку символов. В принципе, стандарт XML позволяет не указывать данное объявление, поскольку для любого XML-документа кодировка UTF-8 предусматривается по умолчанию. А если к тому же учесть, что любая инструкция по обработке документа неминуемо вгоняет шестую версию некоторого браузера в quirks mode, использовать данное объявление на сегодняшний день и вовсе не рекомендуется.

Great Rash

1)

psywalker - скрипты может? А я говорил, что экспрешны не гуд...

Дружище прошу тебя если можно и то и то, вот это будет вообще супер, а я уже выберу тогда сам

2) А вот кстати мой доработанный вариант, просто интересно, чем он хуже твоего, смотри какие плюсы:

1. Всего 4 блока (у тебя 5)

2. Явно меньше кода, чем у тебя

3. Колонки от друг друга не зависят, делай с ними чё хош, никаких высот и т. д.

4. Боковые колонки можно сделать любой ширины, как раз сколько нужно, как у автора

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

Считаю мой способ лучше

Edited October 29, 2009 by psywalker

mishka · October 29, 2009

http://psywalker.ru/Forum/Column/Column_1400px2.html
Считаю мой способ лучше

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

Great Rash · October 29, 2009

psywalker у тебя блоки подлазят под основной, а у меня боковые блоки резиновые.

А вообще, товарищ топикстартер, рассудите нас и скажите чей способ лучше? Товарищи читающие (сочувствующие), прошу вашего мнения тоже.

psywalker попробуй сохранить этот файл как min-width.htc

<public:attach event="oncontentready" onevent="oncontentready('noname')" />
<script type="text/javascript">
	function oncontentready(classID) {
		if (!this.className.match(classID)) {
			this.className = this.className.concat(' ', classID);
			var curMW = parseInt(this.currentStyle.minWidth);

			if (document.body.clientWidth < curMW) {
				this.style.width = curMW + "px";
			} else {
				this.style.width = "auto";
			}
		}
	}
</script>

и применить его вот так:

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
	<title>template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		.test {
			min-width: 500px;
			behavior: url('min-width.htc');
		}
	</style>

	<script type="text/javascript">

	</script>
</head>
<body>

	<div class="test"></div>

</body>
</html>

и скажи работает ли в ИЕ6 без глюков?

Можно нафигачить таких блоков побольше...

psywalker · October 29, 2009

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

Так это же ерунда всё, обычная хрень, тупо дописать пару строк и всё

	body { 
		min-width: 1000px; 
		position: relative;

	}

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

Great Rash

Спасибо, щас попробую

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

Делаю файлик, скопировал в него тупо:

<public:attach event="oncontentready" onevent="oncontentready('noname')" />
<script type="text/javascript">
	function oncontentready(classID) {
		if (!this.className.match(classID)) {
			this.className = this.className.concat(' ', classID);
			var curMW = parseInt(this.currentStyle.minWidth);

			if (document.body.clientWidth < curMW) {
				this.style.width = curMW + "px";
			} else {
				this.style.width = "auto";
			}
		}
	}
</script>

Далее предложили сохранить, тупо скопировал: min-width.htc и сохранил, далее в html:

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
	<title>template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		.test {
			min-width: 500px;
			behavior: url('min-width.htc');
			background: red;
		}
	</style>

	<script type="text/javascript">

	</script>
</head>
<body>

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

</body>
</html>

Edited October 29, 2009 by psywalker

VIRUS · October 29, 2009

Вуаля: http://psywalker.ru/Forum/Column/Column_1400px.html
Это набросок, надо усовершенствовать попробовать чуть позже

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

psywalker · October 29, 2009

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

Наверное ты имел ввиду этот: http://psywalker.ru/Forum/Column/Column_1400px2.html ,ну я понял, интересненькое у тебя заданьице тогда. Нужно подумать

VIRUS · October 29, 2009

Наверное ты имел ввиду этот: http://psywalker.ru/Forum/Column/Column_1400px2.html ,ну я понял, интересненькое у тебя заданьице тогда. Нужно подумать

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

Уже второй день голову ломаю и всю ноч не спал.

psywalker · October 29, 2009

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

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

mishka · 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>

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