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

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

DjTarik · November 12, 2009

Неужели никто не расскажет, почему так происходит?

Я даж страничку набросал:

http://tarik.kasperovich.ru/test/index_04.html

Типичный случай, когда надо сделать тени, которые будут появляться про разрешении > 1000px;

В Опере и IE хорошо видно, что справа появляется красная полоска в 1 пиксель... А ее быть не должно...

s0rr0w · November 12, 2009

Неужели никто не расскажет, почему так происходит?
Я даж страничку набросал:
http://tarik.kasperovich.ru/test/index_04.html
Типичный случай, когда надо сделать тени, которые будут появляться про разрешении > 1000px;
В Опере и IE хорошо видно, что справа появляется красная полоска в 1 пиксель... А ее быть не должно...

Нечетные числа плохо делятся на два. Поэтому 3 / 2 будет 1. вот тебе и разница в 1 пиксель.

mishka · November 12, 2009

Плохой пример привел конечно...

невидно смещения, ты бы хоть бордер какой нить сделал...

или задний фон каким нибудь полосатым

а чтобы небыло смещения надо бг вешать не на боди, а на див, и центрировать его с помощью релейтивов.

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

DjTarik · November 12, 2009

Нечетные числа плохо делятся на два. Поэтому 3 / 2 будет 1. вот тебе и разница в 1 пиксель.

Логично. =) Тогда получается, что все правильно? Так и должно быть и это не баг?

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

Так я пробовал вешать фон на див, который растянут по всей ширине экрана, а в нем еще один див - margin: 0px auto; - та же фигня...

Что ты подразумеваешь под "центрировать его с помощью релейтивов"?

mishka · November 12, 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>
	<title>test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	body{
		margin:0;
		min-width:1000px;
		_width:expression(document.documentElement.clientWidth < 1000 ? "1000px" : "auto");
	}
	#wrapper{
		position:relative;
		overflow:hidden;
	}
	.wrap1{
		position:relative;
		left:50%;
		width:1040px;
	}
	.wrap2{
		position:relative;
		left:-50%;
		background:#eaaf00;
		width:1000px;
		padding:0 20px;
	}
	#main{
		width:100%;
		overflow:hidden;
		background:#3a76ca;
	}
	</style>
</head>
<body>
<div id="wrapper">
	<div class="wrap1">
		<div class="wrap2">
			<div id="main">
				<p>Lorem ipsum dolor sit amet consectetuer metus ullamcorper elit vel habitasse. Consequat et id nunc Aenean.</p>
				<p>Vitae congue eros adipiscing Curabitur pellentesque ut eu eros quis ipsum. Sollicitudin quam faucibus elit interdum vel vel quis tincidunt interdum interdum. Maecenas dictum.</p>
				<p>Tellus Lorem lacus cursus felis ante nunc ac magna eget ac. Dui eu porttitor adipiscing Sed Pellentesque lobortis vel auctor.</p>
				<p>Nunc vitae consequat malesuada quam felis nulla Nam Curabitur porttitor Vestibulum. Id tincidunt quis ornare.</p>
				<p>Dignissim euismod Pellentesque eros auctor eros urna a pretium cursus Nam. Neque.</p>
				<p>Senectus justo congue ante quis augue tempus ridiculus ac interdum.</p>
				<p>Senectus pharetra vel Aenean hendrerit non id volutpat massa interdum sed. Convallis turpis.</p>
				<p>Pellentesque tellus sapien congue a elit Ut sapien pulvinar convallis mauris. Phasellus malesuada nec felis ut vitae Phasellus.</p>
				<p>Elit Quisque arcu enim congue Nulla ac nunc Sed Aliquam.</p>
				<p>Malesuada Pellentesque nisl vel eu dui Nam Vestibulum quam eget id. Urna.</p>
			</div>
		</div>
	</div>
</div>
</body>
</html>

Edited November 12, 2009 by mishka2

DjTarik · November 12, 2009

Спасибо за вариант, завтра попробую разобрать и отпишу, что там да как...

DjTarik · November 13, 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>
	<title>test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	html {
				height: 100%;
		}
		body{
				height: 100%;
		margin:0;
		min-width:1000px;
		_width:expression(document.documentElement.clientWidth < 1000 ? "1000px" : "auto");
	}
	#wrapper{
		position:relative;
		overflow:hidden;

				min-height: 100%;
				height: auto !important;
				height: 100%;

				background: red url(img/index_04/body_bg.gif) repeat-y center top;
	}
	.wrap1{
		position:relative;
		left:50%;
		width:1000px;
	}
	.wrap2{
		position:relative;
		left:-50%;
		width:1000px;
	}
	#main{
		width:100%;
		overflow:hidden;
		background:#3a76ca;
	}
	</style>
</head>
<body>
<div id="wrapper">
	<div class="wrap1">
		<div class="wrap2">
			<div id="main">
				<p>Lorem ipsum dolor sit amet consectetuer metus ullamcorper elit vel habitasse. Consequat et id nunc Aenean.</p>
				<p>Vitae congue eros adipiscing Curabitur pellentesque ut eu eros quis ipsum. Sollicitudin quam faucibus elit interdum vel vel quis tincidunt interdum interdum. Maecenas dictum.</p>
				<p>Tellus Lorem lacus cursus felis ante nunc ac magna eget ac. Dui eu porttitor adipiscing Sed Pellentesque lobortis vel auctor.</p>
				<p>Nunc vitae consequat malesuada quam felis nulla Nam Curabitur porttitor Vestibulum. Id tincidunt quis ornare.</p>
				<p>Dignissim euismod Pellentesque eros auctor eros urna a pretium cursus Nam. Neque.</p>
				<p>Senectus justo congue ante quis augue tempus ridiculus ac interdum.</p>
				<p>Senectus pharetra vel Aenean hendrerit non id volutpat massa interdum sed. Convallis turpis.</p>
				<p>Pellentesque tellus sapien congue a elit Ut sapien pulvinar convallis mauris. Phasellus malesuada nec felis ut vitae Phasellus.</p>
				<p>Elit Quisque arcu enim congue Nulla ac nunc Sed Aliquam.</p>
				<p>Malesuada Pellentesque nisl vel eu dui Nam Vestibulum quam eget id. Urna.</p>
			</div>
		</div>
	</div>
</div>
</body>
</html>

Все равно при центрировании смещается... Или я чего-то недопер? O_o

psywalker · November 13, 2009

DjTarik

А я не понял, чё вы мутите? можешь скрин показать с объяснениями

mishka · November 13, 2009

Все равно при центрировании смещается... Или я чего-то недопер?

Ты видел куда я бекграунды цеплял?

И куда ты их поцепил?

Зачем html и body задаешь высоту 100% - хочешь футер вниз прижать?

Тут это немного сложнее будет.

psywalker · November 13, 2009

Ты видел куда я бекграунды цеплял?
И куда ты их поцепил?
Зачем html и body задаешь высоту 100% - хочешь футер вниз прижать?
Тут это немного сложнее будет.

Да нихрена не будет, я предлагаю вообще тупо полоску сделать 1100пк по ширине, где на концах будет тень, повесить её на центральный блок и растягуть его с помощью min-height: 100%; обычным способом, да и всё. Ну а дальше всё также, всю эту хрень в контейнер с Оверфлухой и минимальной шириной 1000пк, да и выровнить по середине

mishka · November 13, 2009

ну что же, внимательно прочитай задание, и сделай.

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

Очередной интересный топик намечается

psywalker · November 13, 2009

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

Так, так, так, мне стало интересно Медведь, неужели очередные соревнования намечаются

1) Ну тогда расскажите мне поподробнее со скринами и прочими объяснениями, чтоже всё таки нужно получить в итоге, а ещё мне интересно уточнить проблемы, которые вы описывали?

2) А пока вопрос: http://tarik.kasperovich.ru/test/index_04.html - Вот тут я вижу, что при ресайзе в ИЕ6-7 например из под правой тени появляется красная вертикальная полоса, в этом проблема?

3) Напишите условия задачи и мне нужны картинки тени!

DjTarik · November 13, 2009

Ты видел куда я бекграунды цеплял?
И куда ты их поцепил?
Зачем html и body задаешь высоту 100% - хочешь футер вниз прижать?
Тут это немного сложнее будет.

Да, футер должен прибиваться к низу.

psywalker · November 13, 2009

DjTarik

Ответь мне на вопросы дружище топиком выше!

DjTarik · November 13, 2009

2) А пока вопрос: http://tarik.kasperovich.ru/test/index_04.html - Вот тут я вижу, что при ресайзе в ИЕ6-7 например из под правой тени появляется красная вертикальная полоса, в этом проблема?

Да, в этом проблема.

Там сверстано так:

у боди есть фон на 1200 по ширине, который тянется. Центральная часть на 1000px (красного цвета) от нее теньки (они должны появлятьсяс только при разрешении больше 1000 пикселей) Если я сделаю див-обертку на 1000 и отцентрирую ее - при ресайзе появляется однопиксельная красная полоска справа - значит див-обертка лежит не ровно над фоном. А нужно ровно. =) Вот и вся проблема... При прибивании футера - эту тень кидаю в дополнительный див - но проблема вся равно остается. Как решить - не знаю. Что-то мне подсказывает, что это нормально, когда браузеры так себя ведут.

Если кто-нить поскажет идею - было бы круто)

Картинка с тенью - по ссылке выше...

отлучусь ненадолго - думаю, что понятно описал проблему... ))) У меня таких "проблем" интересных - дофига))))

psywalker · November 13, 2009

Да, в этом проблема.
Там сверстано так:
у боди есть фон на 1200 по ширине, который тянется. Центральная часть на 1000px (красного цвета) от нее теньки (они должны появлятьсяс только при разрешении больше 1000 пикселей) Если я сделаю див-обертку на 1000 и отцентрирую ее - при ресайзе появляется однопиксельная красная полоска справа - значит див-обертка лежит не ровно над фоном. А нужно ровно. =) Вот и вся проблема... При прибивании футера - эту тень кидаю в дополнительный див - но проблема вся равно остается. Как решить - не знаю. Что-то мне подсказывает, что это нормально, когда браузеры так себя ведут.
Если кто-нить поскажет идею - было бы круто)
Картинка с тенью - по ссылке выше...
отлучусь ненадолго - думаю, что понятно описал проблему... ))) У меня таких "проблем" интересных - дофига))))

Нее, ну я конеш понимаю тебя, но не могу понять, а нахрена тебе именно красная подкладка?

mishka · November 13, 2009

Ты реши проблему, а не обходи ее.

Реально такие проблемы иногда попадаются. Решал ее таким способом как привел выше. Но чтобы еще и плюс к этому футер прибить вниз - такой задачи еще небыло. Вот интересно ее решить. Будет свободное время попробую решить.

psywalker · November 13, 2009

Ты реши проблему, а не обходи ее.
Реально такие проблемы иногда попадаются. Решал ее таким способом как привел выше. Но чтобы еще и плюс к этому футер прибить вниз - такой задачи еще небыло. Вот интересно ее решить. Будет свободное время попробую решить.

1) Тоесть обязательно нужна красная подкладка?

2) Я только одного не пойму, зачем вообще нужна подкладка, почему бы просто не сделать блок по середине, а по бокам тень пустить вниз?

DjTarik · November 13, 2009

Нее, ну я конеш понимаю тебя, но не могу понять, а нахрена тебе именно красная подкладка?

1) Тоесть обязательно нужна красная подкладка?
2) Я только одного не пойму, зачем вообще нужна подкладка, почему бы просто не сделать блок по середине, а по бокам тень пустить вниз?

1. нет! =) Я сделал такой рисунок только для наглядности - видно, что див с width: 1000px; margin: 0px auto; - на один пиксел смещается с центра. А должен быть по центру - т.к. у фона красная полоска - именно на 1000px.

2. Сделай мне такой блок посередине, чтобы тень появлялась при разрешении только >1000px и чтобы футер тянулся вниз...

P.S. Можно залить вместо красного цвета цветом как у тени (я так всегда и делаю =) и тогда смещение не будет заметно. Но это не решение проблемы - я "обход", как сказал медведь)))

psywalker · November 13, 2009

Хорошо, будет время, что нибудь придумаем

DjTarik · November 13, 2009

ok, жду...))) Но решения нету)))

psywalker · November 13, 2009

Но решения нету)))

Блин, вот этим самым ты нас обидел с Медведем, а меня лично ранил прям в сердце

http://psywalker.ru/Forum/Column_height/shadow_1px.html

mishka · November 13, 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>
	<title>test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	html,body{
		height:100%;
	}
	body{
		margin:0;
		min-width:1000px;
		_width:expression(document.documentElement.clientWidth < 1000 ? "1000px" : "auto");
	}
	#wrapper{
		height:100%;
		width:100%;
		position:relative;
		overflow-x:hidden;
	}
	.wrap1{
		width:1200px;
		height:100%;
		position:relative;
		left:50%;
	}
	.wrap2{
		position:relative;
		left:-50%;
		width:1200px;
		height:100%;
	}
	.wrap3{
		min-height:100%;
		height:auto !important;
		height:100%;
		padding:0 100px;
		background:url(bg-body.gif) repeat-y;
	}
	#main{
		width:100%;
		overflow:hidden;
		padding:0 0 50px;
		background:#3a76ca;
	}
	#footer{
		margin:-50px 0 0;
		position:relative;
		height:50px;
		padding:0 100px;
	}
	.footer-area{
		background:#ff0;
		height:100%;
		overflow:hidden;
	}
	</style>
</head>
<body>
<div id="wrapper">
	<div class="wrap1">
		<div class="wrap2">
			<div class="wrap3">
				<div id="main">
					<p>Lorem ipsum dolor sit amet consectetuer nibh tempus accumsan dapibus Vivamus. Id ante ut sagittis risus laoreet amet pede pellentesque hendrerit et. Wisi sem Morbi Cras facilisi id tincidunt lobortis dapibus tempus tellus. At leo commodo Proin adipiscing tincidunt lacus hendrerit porttitor elit risus. Dolor id orci habitant cursus semper nibh tortor metus in cursus. Mauris cursus Ut pellentesque Cras.</p>
					<p>Lorem ipsum dolor sit amet consectetuer nibh tempus accumsan dapibus Vivamus. Id ante ut sagittis risus laoreet amet pede pellentesque hendrerit et. Wisi sem Morbi Cras facilisi id tincidunt lobortis dapibus tempus tellus. At leo commodo Proin adipiscing tincidunt lacus hendrerit porttitor elit risus. Dolor id orci habitant cursus semper nibh tortor metus in cursus. Mauris cursus Ut pellentesque Cras.</p>
					<p>Lorem ipsum dolor sit amet consectetuer nibh tempus accumsan dapibus Vivamus. Id ante ut sagittis risus laoreet amet pede pellentesque hendrerit et. Wisi sem Morbi Cras facilisi id tincidunt lobortis dapibus tempus tellus. At leo commodo Proin adipiscing tincidunt lacus hendrerit porttitor elit risus. Dolor id orci habitant cursus semper nibh tortor metus in cursus. Mauris cursus Ut pellentesque Cras.</p>
					<p>Lorem ipsum dolor sit amet consectetuer nibh tempus accumsan dapibus Vivamus. Id ante ut sagittis risus laoreet amet pede pellentesque hendrerit et. Wisi sem Morbi Cras facilisi id tincidunt lobortis dapibus tempus tellus. At leo commodo Proin adipiscing tincidunt lacus hendrerit porttitor elit risus. Dolor id orci habitant cursus semper nibh tortor metus in cursus. Mauris cursus Ut pellentesque Cras.</p>
				</div>
			</div>
			<div id="footer">
				<div class="footer-area">
					footer
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

Блин, вот этим самым ты нас обидел с Медведем, а меня лично ранил прям в сердце sad.gif
http://psywalker.ru/Forum/Column_height/shadow_1px.html

Красавчег я и забыл про тот случай

psywalker · November 13, 2009

1) Конечно же красавчик, вот только не могу ещё отойти от слов DjTarik, не ожидал прям...

2) А я не понял, у тебя же красный фон торчит из под низа, тоесть когда контента мало, то его видно, разве так должно быть? Если да, то я тогда могу от элемента избавиться

mishka · November 13, 2009

это максимум что я пока смог нехорошо конечно что красное торчит....

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