Jump to content
  • 0

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

Asato

Asked by Asato,

 Share

Question

Asato Explorer

Asato

Posted
Posted

Короче, возникла такая трабла. В 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, ибо в макете несколько фоновых изображений, которые накладываются друг на друга (ну надо так).

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0
Asato Explorer

Asato

Posted
  • Author
Posted

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

Link to comment
Share on other sites
  • 0
Asato Explorer

Asato

Posted
  • Author
Posted

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

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

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

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

Link to comment
Share on other sites
  • 0
WEB_bobby Explorer

WEB_bobby

Posted
Posted

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

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

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

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

Link to comment
Share on other sites
  • 0
Asato Explorer

Asato

Posted
  • Author
Posted

Итак, вот полный 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 (дали попользоваться хостингом временно ;))

Link to comment
Share on other sites
  • 0
strix Explorer

strix

Posted
Posted
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;

Link to comment
Share on other sites
  • 0
Asato Explorer

Asato

Posted
  • Author
Posted

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

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

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

Link to comment
Share on other sites
  • 0
Asato Explorer

Asato

Posted
  • Author
Posted

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

Link to comment
Share on other sites
  • 0
strix Explorer

strix

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

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

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

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

Link to comment
Share on other sites
  • 0
Tokolist Explorer

Tokolist

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

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

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

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept