frD-Смещение фонового изображение в body в FF и Opera

Asato · June 23, 2007

Короче, возникла такая трабла. В body прописываю:

body {

text-align:center;

margin:0;

padding:0;

background:url("../image/side_lines.gif") top center repeat-y;

height:100%;

}

При изменении окна браузера, когда содержимое не влазит полностью в окно, фоновый рисунок съезжает в сторону в FF и Opera. В IE и Netscape все нормально. Подскажите, в чем проблема, и как это дело пофиксить. Замучался уже...

P.S. Нужно именно чтобы этот фоновый рисунок был в body, ибо в макете несколько фоновых изображений, которые накладываются друг на друга (ну надо так).

YETI · June 23, 2007

Ну так он на центр твоего контента встает, если контент не влазит в окно, то получается что съезжает относительно окна. Что уж тут сделаешь.

Asato · June 23, 2007

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

WEB_bobby · June 23, 2007

что что? что это такое.?! Выложите на народ код с фоном.

Что значит не влазит контент в окно ))). С трудом можно что либо понять..

Asato · June 23, 2007

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

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

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

А фоновое изображение съезжает, соответственно, влево относительно контента в FF и Opera, и становится, таким образом, не по центру контента, как вроде должно быть, а по центру видимого окна в браузере.

WEB_bobby · June 24, 2007

Контент понятное дело отображаеться только в видимой части окна.

Только непойму почему у вас это только в FF и Opera..? А в IE что нет?Видимо там фон не выравниваеться по центру контента, а остаеться на месте.

В общем выкладывайте.. Посмотрим!

Если я не ошибаюсь то явление вполне естественное и кроме как minwidth и подобными его тут не поправишь.

Asato · June 25, 2007

Итак, вот полный html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
 <meta http-equiv="content-type" content="text/html;charset=windows-1251">
 <title></title>
 <link href="css/main.css" rel="stylesheet" type="text/css">
</head>

 <body>

 <div id="d_top_body_bg">

 <div id="d_top_picture">
 </div> <!-- d_top_picture -->

 <div id="d_text">
 </div> <!-- d_text -->

 <div id="d_menu_bar">
 </div> <!-- d_menu_bar -->

 <div id="d_main_content">
 <div id="cont">
 <table>
 <tr>
 <td id="col_left">
 </td>
 <td id="col_center">
 </td>
 <td id="col_right">
 </td>
 </tr>
 </table>
 </div>

 </div> <!-- d_main_content -->

 </div> <!-- d_top_body_bg -->

 <div id="d_bottom">
 <div id="d_footer">
 </div> <!-- d_footer -->

 <div id="d_bottom_picture">
 </div> <!-- d_bottom_picture -->
 </div> <!-- d_bottom -->

 </body>
</html>

Вот полный css к нему:

* {
 font-size:100.01%;
}


body {
 font: 12px/12px "Times New Roman", serif;
 text-align:center;
 margin:0 auto;
 padding:0;
 color:#7d7d7d;
 background:#200000 url("../image/side_lines.gif") top center repeat-y;
 height:100%;
}


#d_top_body_bg {
 background:url("../image/bg_top.gif") top center repeat-x;
 position:relative;
 min-height: 100%;
}
* html #d_top_body_bg {
 height: 100%;
}

#d_top_picture {
 background:url("../image/top_picture.jpg") top center no-repeat;
 margin: 0 auto;
 width:989px;
 height:54px;
}

#d_text {
 background:url("../image/text_bg.jpg") top center no-repeat;
 margin: 0 auto;
 width:989px;
 height:121px;
 text-align:right;
 vertical-align:center;
}


#d_menu_bar {
 background:url("../image/menu_bar_bg.jpg") top center no-repeat;
 margin: 0 auto;
 width:989px;
 height:71px;
 text-align:right;
}

#d_main_content {
 margin:0 auto; 
 padding-bottom:164px;
 width:889px;
}

#d_bottom {
 position:relative;
 width:989px;
 height:164px;
 margin:-164px auto 0 auto;
}

#d_footer {
 background:url("../image/footer_bg.jpg") top center no-repeat;
 margin: 0 auto;
 width:889px;
 height:108px;
}


#d_bottom_picture {
 background:url("../image/bottom_picture.jpg") top center no-repeat;
 width:989px;
 height:56px;
 margin:0 auto;
}

#cont{
 padding: 30px 0 20px 0;
 text-align:left;
}


#cont td td {
 vertical-align:top;
}

#cont table {
 border-collapse: collapse;
 line-height:1em;
}

#col_left {
 width:300px;
}

#col_center {
 width:230px;
 padding-right:18px;
 text-align:center;
 border-right: 1px solid #521e1e;
}

#col_right {
 width:285px;
 border-left: 1px solid #521e1e;
 padding-left:18px;
 text-align:left;
}

Все это в действии я выложил на http://udsf.com.ua/kn (дали попользоваться хостингом временно )

strix · June 25, 2007

Quote
body {
font: 12px/12px "Times New Roman", serif;
text-align:center;
margin:0 auto;
padding:0;
color:#7d7d7d;
background:#200000 url("../image/side_lines.gif") top center repeat-y;
height:100%;
}

Вы же указали ему center, вот фон и центрируется. Также исправьте порядок следования свойств фона - по стандарту http://www.w3.org/TR/CSS21/colors.html#q2. Можете выставить и так:

 background:#200000 url("../image/side_lines.gif") repeat-y 0 0;

Asato · June 25, 2007

Да, насчет порядка следования свойств фона - это Вы правы.

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

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

Tokolist · June 25, 2007

strix said:
Также исправьте порядок следования свойств фона - по стандарту http://www.w3.org/TR/CSS21/colors.html#q2

А какое значение имеет порядок в данном случае?

Vlad · June 27, 2007

В FF как раз относительно контента центрирование идет, а не относительно окна браузера.

Asato · June 27, 2007

А как тогда понимать поведение бэкграунда на http://udsf.com.ua/kn? Когда окно браузера сворачиваешь по горизонтали, вертикальные полоски (бэкграунд бади) смещаются влево, а все остальное (бэкграунд центрированных дивов) остается на месте.

strix · June 27, 2007

Tokolist said:

strix said:
Также исправьте порядок следования свойств фона - по стандарту http://www.w3.org/TR/CSS21/colors.html#q2
А какое значение имеет порядок в данном случае?

У меня уже в привычку вошло :-) На внешнем отображении - никакого значения порядок не имеет, но... Лучше сразу привыкать делать по стандартам. Например, свойства шрифта не срабатывают в неправильном порядке. И может, новые версии браузеров будут также реагировать на неправильный порядок для фона, рамок...

По теме - да, лучше будет фон в таком случае перенести в отдельный слой

Tokolist · June 27, 2007

strix said:

Tokolist said:

strix said:
Также исправьте порядок следования свойств фона - по стандарту http://www.w3.org/TR/CSS21/colors.html#q2
А какое значение имеет порядок в данном случае?
У меня уже в привычку вошло :-) На внешнем отображении - никакого значения порядок не имеет, но... Лучше сразу привыкать делать по стандартам. Например, свойства шрифта не срабатывают в неправильном порядке. И может, новые версии браузеров будут также реагировать на неправильный порядок для фона, рамок...

Не, не. Вы что-то путаете

По стандартам порядок для background и border не имеет значения, а вот для font да

Quote
[ || || || || ]

Quote
[ || || ]

Quote
[ [ || || ]? [ / ]? ]

в любом случае, я стараюсь font, background и т.д. использовать как можно реже, поскольку менее наглядно.

Sign In

frD-Смещение фонового изображение в body в FF и Opera

Question

Link to comment

Share on other sites

13 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

Join the conversation

Обсуждения

Important Information