Центрирование бэкгроунда

DjTarik · November 11, 2009

Суть проблемы:

html

<body>
<div class="window">
   <div class="sub-window">

   —
   "основное содержимое"
   —

   </div>
</div>
</body>

css

.window {
background: url(window_bg.jpg) repeat-y center top;
}
.sub-window {
width: 1000px;
background: url(sub_window_bg.jpg) no-repeat center top;
}

Имеем два блока на всю ширину экрана. У одной рисунок на 1400px у другой - 1000 по ширине. У первого повторяется по вертикали - у второго фиксирован на 200px по высоте и не повторяется.

Фоны должны пиксель в пиксель стыкаваться при наложении один на другой. Изначально так и происходит. Но при ресайзе окна броузера (когда изменяешь ширину окна) - происходит смещение на 1px. Во всех броузерах.

Давно мучаюсь с этой проблемой (на каждом макете, у которого фон, больше чем на 1000px, т.е. должен появляться только при разрешении > 1000).

Возможно есть какой-нить фикс для этого? Или это считается "нормальным" поведением? И что делать в таких случаях?

Спасибо...

Edited November 11, 2009 by DjTarik

mishka · February 14, 2010

показывай скрин с описанием.

psywalker · February 14, 2010

показывай скрин с описанием.

Медведь, ты предлагаешь нам взяться за дело? :lol:

mishka · February 14, 2010

ну как карта ляжет

psywalker · February 14, 2010

ну как карта ляжет

Ну тоже верно)

DjTarik · February 14, 2010

показывай скрин с описанием.

Так это... =) Задание то же)))

кроссброузерность - IE6>, Opera 9.0> FF2> Chrome и Safari.

Подвал книзу, горизонтальная прокрутка должна появляться при <1000px; Однопиксельного смещения не должно быть. Всё)

Если совсем нужно - скрин нарисую)

Вроде ж Макс уже это сделал - но ссылка пропала. А я не могу вспомнить, как оно там было.

Медведь, ты предлагаешь нам взяться за дело?

ну как карта ляжет

=)))

Я ж говорю - css маньяки)

psywalker · February 14, 2010

Так это... =) Задание то же)))
кроссброузерность - IE6>, Opera 9.0> FF2> Chrome и Safari.
Подвал книзу, горизонтальная прокрутка должна появляться при <1000px; Однопиксельного смещения не должно быть. Всё)
Если совсем нужно - скрин нарисую)
Вроде ж Макс уже это сделал - но ссылка пропала. А я не могу вспомнить, как оно там было.
=)))
Я ж говорю - css маньяки)

Хаа, нет уж, извольте, второй раз я за эту жесть браться не буду, по крайней мере в ближайшее время. Так что уступаю дорогу медведю. :lol:

DjTarik · February 14, 2010

Ну так я так и подумал))) Зря решение не сохранил...((

У меня дизайнер почти постоянно так рисует - буду искать решение... А то все время криво)

mishka · February 14, 2010

Чтото я никак немогу придумать как это решить без overflow-x:hidden; :lol:

ну вот что смог восстановить с прежних решений...

<!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></title>
	<style type="text/css">
		html{height:100%;}
		body{
			margin:0;
			height:100%;
			min-width:800px;
		}
		#wrapper{
			height:100%;
			overflow-x:hidden;
			position:relative;
		}
		#main{
			min-height:100%;
			width:800px;
			margin:0 auto;
			position:relative;
			background:#ff9500;
		}
		* html #main{height:100%;}
		#content{
			width:100%;
			overflow:hidden;
			padding:0 0 60px;
		}
		.r,
		.l{
			width:200px;
			position:absolute;
			top:0;
			bottom:0;
			left:-200px;
			background:#af2cd9;
		}
		.r{right:-200px;left:auto;}
		#footer{
			height:50px;
			width:800px;
			overflow:hidden;
			margin:-50px auto 0;
			position:relative;
			background:#2b95d9;
		}
	</style>
	<!--[if lt ie 7]>
		<style type="text/css">
			.r,
			.l{height:expression(this.parentNode.offsetHeight+'px');}
		</style>
	<![endif]-->
</head>
<body>
	<div id="wrapper">
		<div id="main">
			<div id="content">
				<p>Lorem ipsum dolor sit amet consectetuer montes congue et convallis augue. Et quis nec nulla hac Nullam Vivamus risus id quis sociis. Eros penatibus dolor wisi nisl ac neque vel laoreet laoreet lacus. Ut Donec suscipit at consectetuer nunc sagittis at Sed mi amet. At Donec Curabitur pede ipsum Aenean.</p>
				<p>Tristique penatibus metus laoreet Aenean condimentum tellus facilisis leo libero lacus. Lacus metus dui ornare ipsum ligula tincidunt ut feugiat Vestibulum semper. Pretium sollicitudin velit laoreet auctor nibh et fringilla sed consectetuer at. Libero id tellus Curabitur tincidunt elit at at odio libero semper. Nibh orci cursus tristique convallis magna Curabitur In.</p>
			</div>
			<div class="r"></div>
			<div class="l"></div>
		</div>
		<div id="footer">
			<p>footer</p>
		</div>
	</div>
</body>
</html>

Edited February 14, 2010 by mishka2

psywalker · February 15, 2010

Держи дружище, я нашёл, что ты просил http://psywalker.ru/Forum/Column/shadow_1px.html

DjTarik · February 15, 2010

Чтото я никак немогу придумать как это решить без overflow-x:hidden; :lol:

ну вот что смог восстановить с прежних решений...

<!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></title>
	<style type="text/css">
		html{height:100%;}
		body{
			margin:0;
			height:100%;
			min-width:800px;
		}
		#wrapper{
			height:100%;
			overflow-x:hidden;
			position:relative;
		}
		#main{
			min-height:100%;
			width:800px;
			margin:0 auto;
			position:relative;
			background:#ff9500;
		}
		* html #main{height:100%;}
		#content{
			width:100%;
			overflow:hidden;
			padding:0 0 60px;
		}
		.r,
		.l{
			width:200px;
			position:absolute;
			top:0;
			bottom:0;
			left:-200px;
			background:#af2cd9;
		}
		.r{right:-200px;left:auto;}
		#footer{
			height:50px;
			width:800px;
			overflow:hidden;
			margin:-50px auto 0;
			position:relative;
			background:#2b95d9;
		}
	</style>
	<!--[if lt ie 7]>
		<style type="text/css">
			.r,
			.l{height:expression(this.parentNode.offsetHeight+'px');}
		</style>
	<![endif]-->
</head>
<body>
	<div id="wrapper">
		<div id="main">
			<div id="content">
				<p>Lorem ipsum dolor sit amet consectetuer montes congue et convallis augue. Et quis nec nulla hac Nullam Vivamus risus id quis sociis. Eros penatibus dolor wisi nisl ac neque vel laoreet laoreet lacus. Ut Donec suscipit at consectetuer nunc sagittis at Sed mi amet. At Donec Curabitur pede ipsum Aenean.</p>
				<p>Tristique penatibus metus laoreet Aenean condimentum tellus facilisis leo libero lacus. Lacus metus dui ornare ipsum ligula tincidunt ut feugiat Vestibulum semper. Pretium sollicitudin velit laoreet auctor nibh et fringilla sed consectetuer at. Libero id tellus Curabitur tincidunt elit at at odio libero semper. Nibh orci cursus tristique convallis magna Curabitur In.</p>
			</div>
			<div class="r"></div>
			<div class="l"></div>
		</div>
		<div id="footer">
			<p>footer</p>
		</div>
	</div>
</body>
</html>

Держи дружище, я нашёл, что ты просил http://psywalker.ru/Forum/Column/shadow_1px.html

Да, ребята, это то, что нужно... Пойду разбирать и доделывать... Спс.. Потом отпишусь)

psywalker · February 15, 2010

Да, ребята, это то, что нужно... Пойду разбирать и доделывать... Спс.. Потом отпишусь)

Давай, удачи :lol:

mishka · February 15, 2010

Макс, чтот я смотрю твой пример в ие7... и там бг футера дергается :lol:

Ну а в моем примере используется overflow-x:hidden

Edited February 15, 2010 by mishka2

DjTarik · February 15, 2010

Макс, чтот я смотрю твой пример в ие7... и там бг футера дергается
Ну а в моем примере используется overflow-x:hidden

А я уже сделал все, что хотел - и не дергается, и без оверфлоу)))

Буду еще тестировать...

mishka · February 15, 2010

Ну дык делись тогда :lol:

psywalker · February 16, 2010

А я уже сделал все, что хотел - и не дергается, и без оверфлоу)))
Буду еще тестировать...

Да, давай заделись дружище, интересно :lol:

DjTarik · February 17, 2010

Ну, там всё просто - смещение происходит тогда, когда центрирование идёт с помощью margin: 0px auto;

Таким образом - просто центрируем позиционированием.

P.S. Вот тока я не понял, зачем у тебя, Максим, там блок <div class="shadow_wrap"></div>

И ещё - у меня что-то в FF2 не растягивается до конца тень, если текста мало... Проверь, если не в лом...

psywalker · February 17, 2010

Ну, там всё просто - смещение происходит тогда, когда центрирование идёт с помощью margin: 0px auto;
Таким образом - просто центрируем позиционированием.
P.S. Вот тока я не понял, зачем у тебя, Максим, там блок <div class="shadow_wrap"></div>
И ещё - у меня что-то в FF2 не растягивается до конца тень, если текста мало... Проверь, если не в лом...

1) Блок зачем, уже не помню

2) ФФ2 для меня не существует уже давно.

Birdy · February 18, 2010

Оффтоп! Извиняюсь...

psywalker Подпись улыбнула

psywalker · February 18, 2010

Оффтоп! Извиняюсь...
psywalker Подпись улыбнула

Ты не первый и не последний

DjTarik · February 18, 2010

1) Блок зачем, уже не помню
2) ФФ2 для меня не существует уже давно.

Слушай, а ты не мог бы перечисли ВСЕ браузеры и их версии, под которые ты тестируешь? Не в лом, плиз)))

psywalker · February 18, 2010

Слушай, а ты не мог бы перечисли ВСЕ браузеры и их версии, под которые ты тестируешь? Не в лом, плиз)))

ФФ3+, Сафари3+, Хром, ИЕ6-8,Опера 9.2+

DjTarik · February 18, 2010

ФФ3+, Сафари3+, Хром, ИЕ6-8,Опера 9.2+

Тоже, что и у меня, вот я теперь уже задумался - FF2? Стоит забыть уже?

psywalker · February 18, 2010

Тоже, что и у меня, вот я теперь уже задумался - FF2? Стоит забыть уже?

Покажи мне самую оптимистическую статистику по фф2

DjTarik · February 18, 2010

Покажи мне самую оптимистическую статистику по фф2

ну, процент очень мал) это и так ясно...

Короче - можно смело забить на неё?

psywalker · February 18, 2010

ну, процент очень мал) это и так ясно...
Короче - можно смело забить на неё?

давно уже

Sign In

Центрирование бэкгроунда

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

75 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