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

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

psywalker · November 13, 2009

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

ааа,ну тогда я снова победитель? Или всё только начинается?

mishka · November 13, 2009

Ну я тоже могу абсолютом блок main растянуть. Но нехочется.

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

Просто ему чтото надо срочно сделать в своих интересах, а мы тут понимаешь ли ничиго не делаем. Понимаешь ли - халтурим, типо времени нету и всякое такое.

psywalker · November 13, 2009

Ну я тоже могу абсолютом блок main растянуть. Но нехочется.
Просто ему чтото надо срочно сделать в своих интересах, а мы тут понимаешь ли ничиго не делаем. Понимаешь ли - халтурим, типо времени нету и всякое такое.

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

DjTarik · November 15, 2009

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

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

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

Просто ему чтото надо срочно сделать в своих интересах, а мы тут понимаешь ли ничиго не делаем. Понимаешь ли - халтурим, типо времени нету и всякое такое.

Тоже не верно - я задаю свои вопросы только после того, как сам уже пробовал решить проблему и пришел к какому-либо выводу. В данном случае я решил эту проблему с помощью заливки цветом тени всю центральную часть (поэтому смещение не заметно). Но т.к. это не решение проблемы - решил спросить, что да как...

Теперь по теме:

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

Решение Медведя - единственное, что мне не понравилось - много дополнительных элементов и свойство overflow-x: hidden;... А так все круто...)

Максим - я раньше так думал делать - но отказался по 2-ум причинам: наличие overflow-x: hidden; (хотя я уже подумываю, чтобы с ним смириться, но условия пока не позволяют =) и expression для ie6. Но в целом - твое решения я, скорее всего, и буду юзать... Т.к. по коду "красивее")))

overflow-x: hidden; - не работает в Опере 9.2 - а у меня условия кроссброузерности - начиная с 9.0... Даж не знаю, что делать теперь(

height:expression(document.body.clientHeight+'px'); - Максим - расскажи, плиз, как именно работает это свойство? Оно рассчитывает высоту от окна броузера, или от родителя? Просто, я смотрю, что без overflow его практически нем смысла использовать и нужно обрезать лишнее?

psywalker · November 15, 2009

DjTarik

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

Да нее, маньяк из нас только Медведь, а я так..мимо проходил, в подмастерьях у него так сказать... :unsure:

1)

overflow-x: hidden; - не работает в Опере 9.2 - а у меня условия кроссброузерности - начиная с 9.0... Даж не знаю, что делать теперь(

Ерунда, это я для всех поставил, а можно чисто для ИЕ6,так что в общих пропиши overflow: hidden;, а в комментах для ИЕ6 verflow-y: visible;overflow-x: hidden; :rolleyes:

2)

height:expression(document.body.clientHeight+'px'); - Максим - расскажи, плиз, как именно работает это свойство? Оно рассчитывает высоту от окна броузера, или от родителя? Просто, я смотрю, что без overflow его практически нем смысла использовать и нужно обрезать лишнее?

Вообще должно от родителя считать по-идее, но я сам плохо вкуриваю, как оно работает, обычно уже просто знаю точно, где его ставить, а где нет. Медведь тебе сможет объяснить 100%.

Но так как с overflow я тебе объяснил, так что проблем теперь с ним не будет.

Вот тебе рабочее решение, даже в Опере 9.2 и ИЕ6

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

Edited November 15, 2009 by psywalker

DjTarik · November 15, 2009

ok, ща еще попробую для себя сделать...

Отпишу скоро...

Но на счет height:expression(document.body.clientHeight+'px'); - хотелось бы узнать. А то мне кажется, что все-таки не от родителя...

DjTarik · November 15, 2009

Слушай, Макс... А в IE7 смещение есть... Или это только у меня?

P.S. Я убрал "shadow_wrap" - он там особо не пригодится, если фон однородный...

Какая-то хрень O_o У меня вот этот код:

<!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>Однопиксельное смещение при центрировании фона - Tarik (15.11.09.)</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link type="text/css" href="img/default.css" rel="stylesheet" media="all" />
	<!--[if lte IE 7]>
		<link type="text/css" href="img/styles_ie.css" rel="stylesheet" media="all" />
	<![endif]-->	
	<style type="text/css" media="all">
	/* <![CDATA[ */
	/* — global — */
	html {
		font-size: 100.01%;
	}
	body {
		min-width: 1000px;
		font-size: 62.5%;	/* - '1em' = '10px' - */
	}
	/* — // global // — */
	/* — test — */
	.windows {
		min-height: 100%;
		height: auto !important;
		height: 100%;
		overflow: hidden;
		position: relative;
	}
		.shadow {
			width: 1000px;
			height: 100%;
			margin-left: -500px;

			background: red;

			position: absolute;
			top: 0px;
			left: 50%;
		}
			/* — !!! — */
			.shadow .left, .shadow .right {
				width: 50px;
				height: 100%;
				background: url(img/index_04/shadow.gif);
				position: absolute;
				top: 0px;

				border: 1px solid red;
			}
			.shadow .left {
				background-position: left top;
				left: -50px;
			}
			.shadow .right {
				background-position: right top;
				right: -50px;
			}
			/* — !!! — */
		.wrapper {
			width: 1000px;
			padding-bottom: 200px;
			margin: 0px auto;

			background: white;

			overflow: hidden;		
			position: relative;
		}

	.footer {
		width: 1000px;
		height: 200px;
		margin: 0px auto;
		margin-top: -200px;

		background: blue;

		overflow: hidden;
		position: relative;
	}


	p {
		margin: 1em;
		font-size: 1.6em;	
	}
	/* — // test // — */
	/* ]]> */
	</style>
</head>
<body>

	<div class="windows">

		<div class="shadow">
			<div class="left"><!-- // --></div>
			<div class="right"><!-- // --></div>
		</div>

		<div class="wrapper">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis nulla nec diam suscipit sagittis. Phasellus iaculis euismod orci, sit amet mollis risus scelerisque eget. Vestibulum volutpat sem nec sapien pharetra tristique. Vestibulum augue quam, semper eget fringilla et, commodo vitae eros. Duis tincidunt quam sit amet massa scelerisque elementum. Proin arcu ipsum, gravida pharetra blandit vulputate, tincidunt sit amet est. Vestibulum placerat lacinia ultricies. Mauris non diam magna, a congue nisl. Pellentesque sit amet augue sem, in vulputate felis. Nulla blandit dignissim bibendum. Cras semper sodales velit, ac consequat urna ornare id. Praesent diam massa, sagittis at posuere id, malesuada in arcu. In hendrerit faucibus tempus. Vestibulum ut turpis nisl. Morbi ac mi tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat.</p>
			<p>Sed faucibus interdum convallis. Praesent feugiat dui ac metus hendrerit vitae interdum libero feugiat. Nullam eleifend luctus lectus eget viverra. Donec tincidunt purus ut nibh pellentesque ut imperdiet ipsum tempor. Nam at nibh mauris. Sed in lectus nibh, eu rhoncus purus. Praesent imperdiet iaculis lorem ut facilisis. Vivamus eget massa vitae mi imperdiet imperdiet et a ligula. Nullam bibendum cursus odio et venenatis. Nam egestas, velit quis semper suscipit, ipsum odio mollis justo, sit amet interdum sem sapien vitae diam. Aenean in quam eget dui tempus molestie.</p>
		</div>

	</div>

	<div class="footer">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis nulla nec diam suscipit sagittis. Phasellus iaculis euismod orci, sit amet mollis risus scelerisque eget. Vestibulum volutpat sem nec sapien pharetra tristique. Vestibulum augue quam, semper eget fringilla et, commodo vitae eros. Duis tincidunt quam sit amet massa scelerisque elementum. Proin arcu ipsum, gravida pharetra blandit vulputate, tincidunt sit amet est. Vestibulum placerat lacinia ultricies. Mauris non diam magna, a congue nisl. Pellentesque sit amet augue sem, in vulputate felis. Nulla blandit dignissim bibendum. Cras semper sodales velit, ac consequat urna ornare id. Praesent diam massa, sagittis at posuere id, malesuada in arcu. In hendrerit faucibus tempus. Vestibulum ut turpis nisl. Morbi ac mi tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat.</p>
	</div>

<!-- // © Tarik, 2009 // -->

</body>
</html>

работает и в ie6 без экспрешенов и зет-индексов... O_o Какая-то фигня...

Edited November 15, 2009 by DjTarik

mishka · November 15, 2009

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

Вот скромняжко :rolleyes:

expression(document.body.clientHeight+'px'); - высота елемента <body>

DjTarik · November 15, 2009

Вот скромняжко
expression(document.body.clientHeight+'px'); - высота елемента <body>

Слушай, Мих, а можно ли как-нить отсыитывать не от боди, а от родителя таким же способом? O_o

mishka · November 15, 2009

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

Макс, если не перестанешь такое делать, то я тя в игнор поставлю!

expression(parentNode.offsetHeight+'px');

Только у этого елемента(которому так высоту ставишь) недолжно быть верхнего и нижнего ни паддинга ни маргина. И у родителя паддингов верхнего нижнего тоже не должно быть. Так как зависнет ие. И вообще старайся не юзать это.

Edited November 15, 2009 by mishka2

DjTarik · November 15, 2009

expression(this.parentNode.clientHeight+'px');

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

Максим, ответь на вышенаписанное, плиз...

ufs · November 15, 2009

Спасибо, попробую...
Максим, ответь на вышенаписанное, плиз...

Я за него отвечу: Да, в ИЕ7 есть такое дело, только немножко и с правой стороны, не знаю как у Медведя, пусть тоже скажет, интересно А вообще способ мне не очень нравится самому, так как тут много элементов очень и главное мне до сих пор непонятно, зачем ради какого то красного цвета под главным контейнером, который никак не участвует в процессе, но при этом только мешает, идти на такие жертвы :rolleyes:

mishka2

Да нее, маньяк из нас только Медведь, а я так..мимо проходил, в подмастерьях у него так сказать...
Макс, если не перестанешь такое делать, то я тя в игнор поставлю!

Ладно, я знаю что говорю :unsure:

DjTarik · November 15, 2009

Только у этого елемента(которому так высоту ставишь) недолжно быть верхнего и нижнего ни паддинга ни маргина. И у родителя паддингов верхнего нижнего тоже не должно быть. Так как зависнет ие. И вообще старайся не юзать это.

Проверил - вроде работает. У родителя с паддингами и маржинами тож работает. Но еще потестирую.

Слушай, раз уж тут такой разговор -

А чем отличается

expression(document.documentElement.clientWidth < 1000 ? "1000px" : "auto");

от

expression(document.body.clientWidth < 1000 ? "1000px" : "auto");

???

Спасибо)

Я за него отвечу: Да, в ИЕ7 есть такое дело, только немножко и с правой стороны, не знаю как у Медведя, пусть тоже скажет, интересно А вообще способ мне не очень нравится самому, так как тут много элементов очень и главное мне до сих пор непонятно, зачем ради какого то красного цвета под главным контейнером, который никак не участвует в процессе, но при этом только мешает, идти на такие жертвы

Блин... =) Не знаю, как те объяснить... Не в красном фоне дело - он там только для наглядности. Все дело в смещении - оно ж есть и с фоном, и без фона. Там в центральной части может быть что угодно - и это что угодно будет тянуться до футера, который прибит к низу. Плюс еще будут теньки. И если инфы мало - футер остается снизу, теньки видны, а центральная часть тянеться до футера. В таком случае, при ресайзе окна - 1пиксель справа. Поэтому метод с позиционирование подходит, т.к. решает проблему практически везде... Но как быть с ie7?

mishka · November 15, 2009

А чем отличается
expression(document.documentElement.clientWidth < 1000 ? "1000px" : "auto");
от
expression(document.body.clientWidth < 1000 ? "1000px" : "auto");

document.documentElement.clientWidth - ширина документа(реально ширина страницы

document.body.clientWidth - ширина боди, а иногда есть люди например так центрируют:

body{
	width:960px;
	margin:0 auto;
}

Так что первое выражение будет надежнее.

DjTarik · November 15, 2009

document.documentElement.clientWidth - ширина документа(реально ширина страницы
document.body.clientWidth - ширина боди, а иногда есть люди например так центрируют:
body{
	width:960px;
	margin:0 auto;
}
Так что первое выражение будет надежнее.

Спасибо - теперь все предельно понятно)

mishka · November 15, 2009

А сам оператор "?:" значит следующее

например есть:

A<B?C:D

если правда то что А меньше B то вернуть С, иначе (А не меньше В) вернуть D

тоесть

width:expression(document.documentElement.clientWidth < 1000 ? "1000px" : "auto")

если ширина окна меньше 1000 то возвращается "1000px" - тоесть width:1000px;

иначе возвращается "auto"

тоесть width:auto;

document.documentElement.clientWidth - ширина документа(реально ширина страницы

Правильно сказать не страницы, а окна браузера.

Edited November 15, 2009 by mishka2

psywalker · November 15, 2009

Проверил - вроде работает. У родителя с паддингами и маржинами тож работает. Но еще потестирую.
Слушай, раз уж тут такой разговор -
А чем отличается
expression(document.documentElement.clientWidth < 1000 ? "1000px" : "auto");
от
expression(document.body.clientWidth < 1000 ? "1000px" : "auto");
???
Спасибо)
Блин... =) Не знаю, как те объяснить... Не в красном фоне дело - он там только для наглядности. Все дело в смещении - оно ж есть и с фоном, и без фона. Там в центральной части может быть что угодно - и это что угодно будет тянуться до футера, который прибит к низу. Плюс еще будут теньки. И если инфы мало - футер остается снизу, теньки видны, а центральная часть тянеться до футера. В таком случае, при ресайзе окна - 1пиксель справа. Поэтому метод с позиционирование подходит, т.к. решает проблему практически везде... Но как быть с ie7?

Слушай, а что если для ИЕ7 спецом в комментах подписать на пиксель меньше ширину у красного контейнера, или вобщем для ИЕ7 пошуршать до идеала?

mishka2

Спасибо тебе за пояснения, теперь даже и я разобрался :rolleyes:

Edited November 16, 2009 by psywalker

DjTarik · November 16, 2009

Слушай, а что если для ИЕ7 спецом в комментах подписать на пиксель меньше ширину у красного контейнера, или вобщем для ИЕ7 пошуршать до идеала?

Ну как тебе сказать) Можно, но я не уверен, что кроссбраузерность будет полной. Т.к. в любом случае, мы используем блок с margin: 0px auto; - то центрировать будет не ровно. Так что даже ХЗ. Может попробовать использовать широкую тень на боди - и абсолютно позиционировать див-обертку? Тогда, по идее, должно быть нормально... Будет время - попробую.

psywalker · November 16, 2009

Ну как тебе сказать) Можно, но я не уверен, что кроссбраузерность будет полной. Т.к. в любом случае, мы используем блок с margin: 0px auto; - то центрировать будет не ровно. Так что даже ХЗ. Может попробовать использовать широкую тень на боди - и абсолютно позиционировать див-обертку? Тогда, по идее, должно быть нормально... Будет время - попробую.

Нет, всё будет ровно, деело то в том, что наш красный блок - это блок абсолют, а значит его можно просто сделать таковым: left: 1px; right: 0; и всё, он растянется как положено и слева будет минус пиксель :rolleyes:

DjTarik · February 14, 2010

Слушай, Макс, не мог бы ты найти то решение, что предлагал тут:

http://forum.htmlbook.ru/index.php?s=&...st&p=124206

?

Хотелось бы вспомнить, что там да как... А то снова проблема актуальна - буду добивать)))

psywalker · February 14, 2010

Слушай, Макс, не мог бы ты найти то решение, что предлагал тут:
http://forum.htmlbook.ru/index.php?s=&...st&p=124206
?
Хотелось бы вспомнить, что там да как... А то снова проблема актуальна - буду добивать)))

Оу, боюсь что не факт, моежет уже затёр, щас пороюсь, если что, сообщу сразу :lol:

DjTarik · February 14, 2010

Оу, боюсь что не факт, моежет уже затёр, щас пороюсь, если что, сообщу сразу

Ну ты отпиши, что там да как... Ждать мне - или пытаться восстановить самому... Уже день бьюсь...)

psywalker · February 14, 2010

Ну ты отпиши, что там да как... Ждать мне - или пытаться восстановить самому... Уже день бьюсь...)

Нее, дружище, прости, не смог найти. :lol:

DjTarik · February 14, 2010

Нее, дружище, прости, не смог найти.

Ладно, буду вспоминать, что там к чему...)

Еще не могу найти, как сымитировать overflow-x: ; в Opera 9

psywalker · February 14, 2010

Еще не могу найти, как сымитировать overflow-x: ; в Opera 9

А он там кажись не пашет, мы его помойму отсекали, какк вариант.

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