body и свойство background

Gaspode · April 2, 2011

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

body сделано как {width: 1000px; margin: 0 auto;}, но фон по-прежнему задаётся так, как будто body занимает всё окно. Мне такое поведение кажется архистранным, но тем не менее.

Выход - только дополнительная обёртка?

Edited April 2, 2011 by Gaspode

psywalker · April 2, 2011

Задача: фиксированный макет в тысячу пикселей шириной, в правом верхнем углу макета - картинка фоном.
body сделано как {width: 1000px; margin: 0 auto;}, но фон по-прежнему задаётся так, как будто body занимает всё окно. Мне такое поведение кажется архистранным, но тем не менее.
Выход - только дополнительная обёртка?

Всё правильно. Фон всегда распространяется на всю ширину экрана. Поэтому выходы следующие:

1. Сделать картинку шириной 1000пк, прозрачную, а справа на ней поместить твой рисунок и выровнять эту картинку по середине.

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

swetlana · April 2, 2011

Всё правильно. Фон всегда распространяется на всю ширину экрана. Поэтому выходы следующие:
1. Сделать картинку шириной 1000пк, прозрачную, а справа на ней поместить твой рисунок и выровнять эту картинку по середине.

Этот способ ненадёжен.

Хотя лучше так сделать, сжать окно по ширине менее 1000px, чтобы появилась прокрутка, и посмотреть, где окажется фон.

Сразу станет понятно.

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

Но и нет особого смысла.

Ибо фон и ширину можно повесить на html, и результат будет ровно тем, который ожидается :rolleyes:

Gaspode · April 2, 2011

Ибо фон и ширину можно повесить на html, и результат будет ровно тем, который ожидается

Неа, он будет точно таким же, как и с body.

swetlana · April 2, 2011

ссылку в студию!

Как удалось добиться такого эффекта?

Мой пример здесь: http://swetlanabayer.ru/work/palto/ — как раз только вчера делалось.

Gaspode · April 2, 2011

Нет, извиняюсь, не так.

Надо ширину и margin повесить на html, а фон - на body. Тогда всё будет хорошо :rolleyes:

UPD

Ссылки нема, вот код:


<!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="ru">   
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>Red Preved</title>
	  <style>
	     * {
		   margin: 0;
		   padding: 0;
		 }
	     html {
		    width: 1000px;
			margin: 0 auto;
			background: yellow;
			border: 1px solid black;
		 }
		 body {
			background: url('http://htmlbook.ru/themes/hb/images/logo.png') no-repeat top right;
			height: 400px;
		 }
	  </style>
   </head>
   <body>
      <p>Раз-раз-раз</p>
   </body>
</html>

Edited April 2, 2011 by Gaspode

psywalker · April 2, 2011

ссылку в студию!
Как удалось добиться такого эффекта?
Мой пример здесь: http://swetlanabayer.ru/work/palto/ — как раз только вчера делалось.

Какой то шлейф непонятный присутствует.

Нет, извиняюсь, не так.

Надо ширину и margin повесить на html, а фон - на body. Тогда всё будет хорошо :rolleyes:

UPD

Ссылки нема, вот код:


<!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="ru">   
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>Red Preved</title>
	  <style>
	     * {
		   margin: 0;
		   padding: 0;
		 }
	     html {
		    width: 1000px;
			margin: 0 auto;
			background: yellow;
			border: 1px solid black;
		 }
		 body {
			background: url('http://htmlbook.ru/themes/hb/images/logo.png') no-repeat top right;
			height: 400px;
		 }
	  </style>
   </head>
   <body>
      <p>Раз-раз-раз</p>
   </body>
</html>

Это совершенно неправильный подход к делу. Например я уверен, что в ИЕ будут с этим делом траблы. А во-вторых вы отказываетесь от элемента в пользу худшего эффекта. Хозяин - барин

Gaspode · April 2, 2011

Например я уверен, что в ИЕ будут с этим делом траблы

Если для него тоже ширину и отступ задать, то не будет, я проверял =Р

в пользу худшего эффекта

Чем хуже-то? Все проблемы решаются через

* html

swetlana · April 2, 2011

Если для него тоже ширину и отступ задать, то не будет, я проверял =Р

да нет же!

Он всё переживает за IE3 и IE4 :rolleyes:

psywalker · April 2, 2011

да нет же!
Он всё переживает за IE3 и IE4

Да? Т.е. ты хочешь сказать, что вариант у ТС рабочий?

Если для него тоже ширину и отступ задать, то не будет, я проверял =Р

Покажи мне работающий пример.

Gaspode · April 2, 2011

Покажи мне работающий пример.

Добавьте к вышеуказанному:

* html {
   border: none;
}
* html body {
   border: 1px solid black;
   margin: 0 auto;
   width: 1000px;
}

И будет вам щааааааастье.

UPD

Чорт, нет, не будет. Забыл, что для IE7 body не центрируется :rolleyes:

Пардоньте.

Edited April 2, 2011 by Gaspode

psywalker · April 2, 2011

1. Скриншот в ИЕ7

http://screencast.com/t/v3tmlPb4a9J

2. Вот код

<!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="ru">   
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>Red Preved</title>
          <style>
             * {
                   margin: 0;
                   padding: 0;
                 }
				 * html {
					border: none;
				}
				* html body {
					border: 1px solid black;
					margin: 0 auto;
					width: 1000px;
				}
             html {
                    width: 1000px;
                    margin: 0 auto;
                    background: yellow;
                    border: 1px solid black;
                 }
                 body {
                        background: url('http://htmlbook.ru/themes/hb/images/logo.png') no-repeat top right;
                        height: 400px;
                 }
          </style>
   </head>
   <body>
      <p>Раз-раз-раз</p>
   </body>
</html>

Что ещё добавить? Решите с деловой Светой плиз.

Gaspode · April 2, 2011

Что ещё добавить? Решите с деловой Светой плиз.

Ха! Нате:

*:first-child+html body {
position: absolute;
left: 50%;
margin-left: -500px;
top: -1px;
border: 1px solid black;
}

Знаю, что уродство. Но важен сам факт :rolleyes:

mishka · April 2, 2011

я тоже всегда за обертку.

Так один раз тут на форуме спорил что если сайт центрировать body { width: 1000px; margin: 0 auto } - то потом, как пример, если подключить тот же fancybox - в ие6 затемнение может не растягиватся на всю ширину экрана.

Кем-то из форумчан ( кажется GreatRash, но я могу и ошибаться ) была по быстрому набросана тестовая страничка элементарная, ну и там все здорово работало.

Не так давно была задача прикрутить этот же fancybox, задача элементарная, много раз уже делал такое.

И вот в ие6 этот оверлей не на всю ширину экрана и ппц. А проблема заключалась все в том же body { width: 1000px; margin: 0 auto }

Ну вобщем, пару раз так попавшись - я всегда за обертку.

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

Ха! Нате:
Знаю, что уродство. Но важен сам факт

Конечно бади на абсолют... вот где сила верстки.

кстати хак для ие7 - *+html

*+html body { ... }

Gaspode · April 2, 2011

Конечно бади на абсолют...

Если добавить:

*:first-child+html {
   border: none;
}

То можно и не релатив =)

ЗЫ Я не говорю, что я против обёрток. Просто мне подобные обходы багов доставляют извращённое удовольствие.

Edited April 2, 2011 by Gaspode

swetlana · April 2, 2011

1. Скриншот в ИЕ7

а чего так слабо?

Давай уж сразу в IE3

mishka · April 2, 2011

Этот способ ненадёжен.
Хотя лучше так сделать, сжать окно по ширине менее 1000px, чтобы появилась прокрутка, и посмотреть, где окажется фон.
Сразу станет понятно.

html { min-width: 1000px } - и все будет на месте

psywalker · April 2, 2011

Ха! Нате:
Знаю, что уродство. Но важен сам факт

Бред вообще полный. Мало того, что не рабочий, так ещё и извращение достойное премии)))

а чего так слабо?
Давай уж сразу в IE3

Т.е. решения нет, я правильно понял?

Gaspode · April 2, 2011

Мало того, что не рабочий

Рабочий. Вам скриншот показать или сами проверите)?

так ещё и извращение достойное премии)))

ИЕ - сам по себе извращение, так что фиг с ним, пусть хавает.

Edited April 2, 2011 by Gaspode

swetlana · April 2, 2011

кстати хак для ие7 - *+html

этот хак работает ещё и в IE5-, Opera6, IE:Mac.

А как показывает практика, есть люди, которым история небезразлична :rolleyes:

psywalker · April 2, 2011

я тоже всегда за обертку.
Так один раз тут на форуме спорил что если сайт центрировать body { width: 1000px; margin: 0 auto } - то потом, как пример, если подключить тот же fancybox - в ие6 затемнение может не растягиватся на всю ширину экрана.
Кем-то из форумчан ( кажется GreatRash, но я могу и ошибаться ) была по быстрому набросана тестовая страничка элементарная, ну и там все здорово работало.

Медведь, а им насрать на это, они же великие семанты :rolleyes:

swetlana · April 2, 2011

html { min-width: 1000px } - и все будет на месте

а ведь и в самом деле.

psywalker · April 2, 2011

Рабочий. Вам скриншот показать или сами проверите)?

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

swetlana · April 2, 2011

А кроме «уродство» какие есть возражения?

Уродство — это IE.

Так что тут как раз всё правильно, гармонично.

Gaspode · April 2, 2011

абсолютно неправильный подход к делу.

Если прописать position: relative, то это будет относительно неправильный подход к делу =Р

А что уродство - я и сам знаю :rolleyes:

Edited April 2, 2011 by Gaspode

swetlana · April 2, 2011

ещё, кстати, насчёт уродства:

обёртки, нужные только для ископаемых IE — это уродство не меньшее.

А что лучше — нести уродство всем или сосредоточить его в файле oldie.css и выдавать только тем, кто его достоин?

Sign In

body и свойство background

Question

Link to comment

Share on other sites

33 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