2010-08-29 2 views
0

Я работаю над веб-страницей прямо сейчас, и мне нужен фон div, чтобы покрыть всю страницу (100% -ная ширина).Как создать фон div div по всей странице

Моя проблема заключается в том, что содержимое div должно быть центрировано в div 950px, который центрирован, а div с фоном помещается в div с шириной 950 пикселей.

Я не могу понять, как я могу заставить это работать. Может кто-нибудь, пожалуйста, помогите мне.

Редактировать: Вот живая демонстрация сайта, чтобы вы могли понять мою дилемму. http://tempohi.byethost14.com/ все еще строится и тестируется только в Firefox.

+0

Я не думаю, что понимаю. Можете ли вы иметь div с шириной 100%, а затем еще один вложенный внутри, который имеет ширину 950 пикселей и центрирован? –

ответ

1

Я не уверен, что вы ищете. Это что-то вроде этого?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <style> 
      .outerDiv { width:100%; background:#DEDEDE; } 
      .innerDiv { width:950px; margin:0 auto; border:solid 2px #000000; } 
     </style> 
    </head> 
    <body> 
     <div class="outerDiv"> 
      <div class="innerDiv"> 
       This is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test. 
      </div> 
     </div> 
    </body> 
</html> 
+0

Я заменил "text-align: center;" в outerDiv с "margin: 0 auto;" в innerDiv в соответствии с Пэт. –

0

Вы можете использовать один из этих методов в this answer, чтобы получить 100% ширину фонового изображения. Затем центрирования содержимого DIV, вам нужно только что-то вроде этого:

<div style="margin: 0 auto; width: 950px;"> 
    Your content goes right m'ere 
</div> 

Вышеприведенных делает это создает 950px широкого DIV с 0px наценки на верхних и нижние и auto полях слева и справа. Это центрирует элемент уровня блока в его родителя в соответствии с W3C visual formatting модели:

Если оба «Левое поле» и «запас правый» являются «авто», их использовали значения равны. Это горизонтально центрирует элемент относительно краев содержащего блока.

+0

Вы правы, «margin: 0 auto;» это лучший способ сделать это. Я соответствующим образом изменил свой ответ. –

+1

Не проблема. Дело в том, что элемент должен иметь определенную ширину, и он не работает в IE5 (для этого вам нужно поместить его в родительский контейнер с 'text-align: center'). – Pat

Смежные вопросы