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

VIRUS · October 28, 2009

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

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

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

mishka · October 29, 2009

Для #wrapper релейтив нужен чтобы оверфлов хидден работал, для того чтобы внутренние блоки которые имеют релейтив не вылезли. Если его убрать то появится горизонтальная полоса прокрутки от блока .right. В ие так точно появится

Edited October 29, 2009 by mishka2

psywalker · October 29, 2009

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

да ничё страшного, вобщем способ и правда хороший, мишка молодец

mishka · October 29, 2009

да ничё страшного, вобщем способ и правда хороший, мишка молодец

Хватит меня хвалить. Реально кто проанализирует полностью всю тему, тот скажет(и будет прав на все 100%) что это ты сделал основную часть работы. Процентов так на 95!!! А моя заслуга маленькая. Я ток в конце подправил чуток!

rus · October 29, 2009

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

psywalker · October 29, 2009

Хватит меня хвалить. Реально кто проанализирует полностью всю тему, тот скажет(и будет прав на все 100%) что это ты сделал основную часть работы. Процентов так на 95!!! А моя заслуга маленькая. Я ток в конце подправил чуток!

Мих, я понял о чём ты, щас поглядел и правда ведь, я был рядом, но хрен с ним, оба значит сработались. Вот посмотри что я предлагаю, укоротить вариант до этого:

<!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;}


		div.wrapper{ 
			overflow: hidden;
			min-width: 1000px;
		}

		div.wrap { 
			background: blue;
			position: relative;
			width: 1000px;
			margin: 0 auto;
		}
			div.left,
			div.right { 
				width: 200px;
				background: red;
				float: left;

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

		p { padding: 10px;}

</style>
</head>

<body>		
<div class="wrapper">

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

</div>	




</body>
</html>

rus Ты отличный парень, респект тебе и уважуха

rus · October 29, 2009

rus Ты отличный парень, респект тебе и уважуха

Ну спасибо дружище, уважил старика. :(

psywalker · October 29, 2009

Ну спасибо дружище, уважил старика.

mishka · October 29, 2009

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

Не подскажешь чем так лучше?

VIRUS · October 29, 2009

А я думал, что буду месяцами ждать, пока кто-то на форуме поможет, а тут вот уже какая тема

mishka · October 29, 2009

А я думал, что буду месяцами ждать, пока кто-то на форуме поможет, а тут вот уже какая тема

А это как повезет . Если psywalker берется за решение вопроса то обычно подтягиваются и другие , а это значит что решение почти наверняка будет найдено

psywalker · October 29, 2009

Не подскажешь чем так лучше?

Кода меньше, но чё то в ИЕ6 не работает((

А это как повезет smile.gif. Если psywalker берется за решение вопроса то обычно подтягиваются и другие smile.gif, а это значит что решение почти наверняка будет найдено smile.gif

Этт точно

VIRUS · October 29, 2009

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

mishka · October 29, 2009

Ну давай уже выкладывай, не стесняйся

Edited October 29, 2009 by mishka2

psywalker · October 30, 2009

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

Да, давай, мы должны это увидеть

mishka2

Мишка, я так вчера покрутил, повертел свой короткий вариант и понял, что..да ну его в жопу, может он и ничего, но ИЕ6 чёто не пашет, да и твой как то понадёжнее будет и решил: Что вобщем оставляем твой и точка, дело закрыто, всё..запечатываем!

Edited October 30, 2009 by psywalker

VIRUS · October 30, 2009

Как и обещал, вот результат, из-за чего создана тема: http://gameavp.com.

На днях сделаю AJAX проверки на формы.

mishka · October 30, 2009

так и непонял зачем так мутить надо было? Ведь это же одна картинка на боди

.center {

height:auto;

left:50%;

margin-left:-500px;

overflow:hidden;

position:relative;

width:1000px;

}

почему так центрируешь? ведь ширина то задана фиксированно! Также зачем height:auto ?

.center {

overflow:hidden;

width:1000px;

margin:0 auto;

}

Edited October 30, 2009 by mishka2

VIRUS · October 30, 2009

потому что чуть позже текст может добавиться и высота увеличится

Edited October 30, 2009 by VIRUS

mishka · October 30, 2009

Чегото недопонял... Высота и так увеличивается. Ты же не задал ее жестко в пикселях или емах или пунктах... в чем бы там нибыло. А поумолчанию она и так авто.

VIRUS · October 30, 2009

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

mishka · October 31, 2009

Давай!

Даже более того... Если блоку стоит высота в пикселях, и нет оверфлов хидден, то в ие6 если контента в нем по высоте больше, то он тянется. Именно это используют для того чтобы задать минимальную высоту элементу в ие6. Так как min-height ие6 непонимает.

Edited October 31, 2009 by mishka2

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

Join the conversation

Обсуждения

Important Information