проблема: фон для тэга <html>

no.na.me · April 21, 2010

css:

html {

background: #000 url('images/main-bg.jpg') repeat-x;

}

body {

background: url('images/colors.png') no-repeat top center;

}

#wrapper {

background: url('images/wr-bg.png');

margin: 105px auto 0 auto;

max-width: 1180px;

max-width: 790px;

height: 500px;

}

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Mockup</title>

</head>

<body>

</div>

</body>

</html>

Почему когда я добавляю фон в тэг html, красно-зелено-синий фон в тэге body сдвигается вместе с div'ом wrapper?

http://img444.imageshack.us/img444/1904/84082244.jpg

А если убрать тэг html вообще, то все "почти" как надо работает?

http://img132.imageshack.us/img132/3065/86678687.jpg

psywalker · April 21, 2010

css:
html {
background: #000 url('images/main-bg.jpg') repeat-x;
}
body {
background: url('images/colors.png') no-repeat top center;
}
#wrapper {
background: url('images/wr-bg.png');
margin: 105px auto 0 auto;
max-width: 1180px;
max-width: 790px;
height: 500px;
}
html:
<!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>Mockup</title>
<link href="styles.css" type="text/css" rel="stylesheet" media="screen" />
</head>
<body>
<div id="wrapper">
</div> 
</body>
</html>
Почему когда я добавляю фон в тэг html, красно-зелено-синий фон в тэге body сдвигается вместе с div'ом wrapper?
http://img444.imageshack.us/img444/1904/84082244.jpg
А если убрать тэг html вообще, то все "почти" как надо работает?
http://img132.imageshack.us/img132/3065/86678687.jpg

Выпадение границ.

PoshtarBoba · April 21, 2010

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

(выложил бы ещё 3 используемые картинки, чтоб можно было попробовать, а то самому сидеть их рисовать влом, да и параметры изображений неизвестны)

Edited April 21, 2010 by PoshtarBoba

no.na.me · April 21, 2010

А нельзя ли добавить пару дивов в размер окна, чтоб не задавать фон для хтмл и боди? Если проблема не решится - им можно задать оутлайны или бордеры, чтоб посмотреть кто куда вылазит и почему.
(выложил бы ещё 3 используемые картинки, чтоб можно было попробовать, а то самому сидеть их рисовать влом, да и параметры изображений неизвестны)

я бы хотел, чтобы размер хтмл файл был как можно меньше, т.е. разметки как можно меньше было. bg-картинки: http://www.megaupload.com/?d=S02WI34H

PoshtarBoba · April 21, 2010

это что?

max-width: 1180px;

max-width: 790px;

Не люблю я маргины, вечно с ними проблемы. Например:

между блоками будет высота в 16 пикселей, а не в 32, как хотелось бы мозгу, один из маргинов куда-то ищезает.

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

Тебе предлагаю изменить следующее:

body { margin:0; padding:105px 0 0 0;}

#wrapper { margin:0 auto;}

радуга поднимется к верху, красный фон останется, тёмный прямоугольник останется на месте.

https://developer.mozilla.org/en/CSS/margin_collapsing

"Empty blocks

If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse."

вроде тут этот случай указан, но я оч. плохо владею английским.

Edited April 21, 2010 by PoshtarBoba

no.na.me · April 21, 2010

это что?
max-width: 1180px;
max-width: 790px;

а что здесь не так? минимальная ширина 790пикселей, макс. ширина 1180...

ой)))) вот так:

max-width: 1180px;

mix-width: 790px;

Тебе предлагаю изменить следующее:
body { margin:0; padding:105px 0 0 0;}
#wrapper { margin:0 auto;}

Спасибо большое, чёт я не додумался=)

Edited April 21, 2010 by no.na.me

PoshtarBoba · April 21, 2010

mix-width - смешанная ширина

no.na.me · April 21, 2010

mix-width - смешанная ширина

=))) min-width

cy6erGn0m · April 24, 2010

Не люблю я маргины, вечно с ними проблемы. Например:
<div style="margin:16px 0;">aaa</div>
<div style="margin:16px 0;">bbb</div>
между блоками будет высота в 16 пикселей, а не в 32, как хотелось бы мозгу, один из маргинов куда-то ищезает.

А чего ещё следовало ожидать? Заданы ведь только margin-top, вот и получается что у aaa наверху маргин 16, а внизу ничего, и у bbb тоже наверху 16, а внизу ничего. Вот и получается расстояние 16, а не 32... ничего другого и не следовало бы ожидать.

sigma77 · April 24, 2010

А чего ещё следовало ожидать? Заданы ведь только margin-top, вот и получается что у aaa наверху маргин 16, а внизу ничего, и у bbb тоже наверху 16, а внизу ничего. Вот и получается расстояние 16, а не 32... ничего другого и не следовало бы ожидать.

Заданы верхний марджин (16px), нижний (16px) и правый с левым (по 0px).

Читай про краткую запись http://www.htmlbook.ru/css/margin.html

А описанное поведение является вполне нормальным. Читай про сворачивание вертикальных марджинов.

Sign In

проблема: фон для тэга <html>

Question

no.na.me

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

PoshtarBoba

Link to comment

Share on other sites

no.na.me

Link to comment

Share on other sites

PoshtarBoba

Link to comment

Share on other sites

no.na.me

Link to comment

Share on other sites

PoshtarBoba

Link to comment

Share on other sites

no.na.me

Link to comment

Share on other sites

cy6erGn0m

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information