Смесь размеров% и px <div> - PullRequest
Новая
       6

Смесь размеров% и px <div>

4 голосов
/ 27 января 2010

Я боролся с этим в течение многих лет. То, что я хочу, это:

  • Div 100% высоты окна, 50% ширины, слева = 0%, красный
  • Div 100% высоты окна, 50% ширины, слева = 50%, зеленый
  • Div 100% высоты окна, ширина 800px, по центру по горизонтали, синий

Таким образом, первые два элемента div образуют двухтональный фон, на котором центрируется третий элемент div (содержащий все содержимое страницы). У меня почти получилось так, что он работал с двумя второстепенными div-элементами следующим образом: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8">
<title>Test</title>
</head>

<body style="background-color:black">
<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 0%; z-index:-1;background-color: red"></div>
<div style="position: absolute; width: 50%; height: 100%; top: 0%; left: 50%; z-index:-1;background-color: green"></div>
</body>
</html>

Однако это не работает на FF3. Насколько я могу судить, комбинация z-order: -1 и position: absolute заставляет div отображаться позади элемента body (странно, но именно это показывает Firebug).

Может кто-нибудь сказать мне, как этого добиться? Не допускается JavaScript. Я подумал, что один из вариантов - установить красный цвет фона тела, а затем нужен только один дополнительный div для зеленой части, но я не уверен, что это поможет?

РЕДАКТИРОВАТЬ: SO не показывает мой тег DOCTYPE. Предложения с этим не работают.

Ответы [ 3 ]

2 голосов
/ 27 января 2010

Не усложняя вещи с z-порядком и абсолютным позиционированием, попробуйте следующее

Используйте любой базовый графический редактор, сделайте изображение размером 2000 x 1 пиксель и сделайте левую половину красной, а правую половину зеленой.Сохраните изображение как bg_tile.jpg и используйте следующую разметку

HTML: 

<body>
    <div id="wrapper">
    </div>
</body>

CSS: 

body {
  width: 100%;
  height: 100%;
  background-image: url(images/bg_tile.jpg);
  background-position: 50% 0;
  background-repeat: repeat-y;
}

#wrapper {
  width: 800px;
  margin: 0 auto;
  height: 100%;
  background-color: #0000FF;
}
1 голос
/ 28 января 2010

Я думаю, это то, что вы ищете: 

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


<html>

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8">
<title>Test</title>
</head>

<body style="padding:0; margin:0;">

  <div style="position:absolute; width:50%; height:100%; top:0; left:0; background-color:red"></div>
  <div style="position:absolute; width:50%; height:100%; top:0; left:50%; background-color:green"></div>


  <div style="position:absolute; height:100%; width:800px; margin-left:-400px; top:0; left:50%; background-color:blue">

<!-- Content goes here -->

  </div>
</body>
</html>

Это работает для меня в Firefox 3.6. Синее поле отцентрировано, и содержимое вашей страницы может попасть внутрь него.

ОБНОВЛЕНИЕ: Вот обновленная версия, которая работает со строкой !DOCTYPE. Опять же, я только что протестировал этот Firefox 3.6. Дайте мне знать, если это работает для вас.

0 голосов
/ 27 января 2010

Вы всегда можете компенсировать это, установив тело на z-order:-2, чтобы оттолкнуть его назад.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...