Как позиционировать CSS <div>s, не нарушая? - PullRequest
Новая
       23

Как позиционировать CSS <div>s, не нарушая?

0 голосов
/ 30 марта 2011

У меня есть 2 фона, которые должны перекрывать друг друга, и контейнер, который должен перекрывать эти 2 фона. Я не могу заставить это работать, контейнер опускается даже при мысли, что я указал позицию.

CSS: 

body { 
  background:#1b1b1b;
  padding:0; margin:0;
  color:white; 
  text-align:center;
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
.map { 
  background:url(../images/map.png) no-repeat top center; 
  width:1280px; 
  height:335px;
  margin-left:auto; 
  margin-right:auto; 
  position:absolute; 
}
.map-bg { 
  background:url(../images/map-bg.png) repeat-x; 
  height:336px; 
  position:relative; 
}
.stripe { 
  background:url(../images/stripe.png) repeat-x;
  height:35px; 
  width:100%; 
  position:absolute;
  margin-top:158px; 
}
#container { 
  margin-left:auto; 
  margin-right:auto;
  width:924px; 
  height:100%; 
  text-align:left; 
}

HTML: 

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Essbee</title>
    <link type="text/css" rel="stylesheet" href="css/main.css"  />
  </head>

  <body>

    <div class="bg">
      <div class="map"></div>
      <div class="map-bg"></div>
    </div>

    <div class="stripe"></div>

    <div id="container">
      <div id="header"></div>
      <div id="content"></div>
      <div id="footer">Footer</div>
    </div>

  </body>
</html>

Ответы [ 4 ]

1 голос
/ 31 марта 2011

Проблема здесь в вашей HTML-структуре. Из того, что я могу собрать, вы хотите, чтобы четыре элемента отображались поверх друг друга: .map,. map-bg, .stripe и #container. Как у вас есть HTML и CSS, этого не произойдет, потому что эти элементы находятся на разных уровнях дерева. Что вы должны сделать, это обернуть все в .bg и установить все их позиции на absolute, а также установить их родительский контейнер .bg на position: relative. Также всегда полезно ставить неразрывные пробелы &nbsp; в пустых элементах, поскольку многие браузеры не будут предсказуемо отображать полностью пустой элемент уровня блока. 

<body>

  <div class="bg">
    <div class="map">&nbsp;</div>
    <div class="map-bg">&nbsp;</div>

    <div class="stripe">&nbsp;</div>

    <div id="container">
      <div id="header">&nbsp;</div>
      <div id="content">&nbsp;</div>
      <div id="footer">Footer</div>
    </div>

  </div>

</body>

Обновлен CSS: 

body { 
  background:#1b1b1b;
  padding:0; margin:0;
  color:white; 
  text-align:center;
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
.bg {
  position: relative;
}
.map { 
  background:url(../images/map.png) no-repeat top center; 
  width:1280px; 
  height:335px;
  margin-left:auto; 
  margin-right:auto; 
  position:absolute; 
}
.map-bg { 
  background:url(../images/map-bg.png) repeat-x; 
  height:336px; 
  position: absolute; 
}
.stripe { 
  background:url(../images/stripe.png) repeat-x;
  height:35px; 
  width:100%; 
  position:absolute;
  margin-top:158px; 
}
#container {
  position: absolute; 
  margin-left:auto; 
  margin-right:auto;
  width:924px; 
  height:100%; 
  text-align:left; 
}

Попробуйте, вы должны увидеть результаты в большей степени в соответствии с тем, что, я думаю, вы ищете.

0 голосов
/ 30 марта 2011

У вас есть скриншот того, что вы пытаетесь сделать?Насколько я могу понять, вы пытаетесь поместить div над двумя другими div, но почти наверняка есть гораздо лучший способ сделать это, чем позиционировать все абсолютно.

0 голосов
/ 31 марта 2011

Насколько я могу судить, у вас нет класса "bg", указанного в вашем css, например.

0 голосов
/ 30 марта 2011

Поскольку .map-bg является position: относительным, он будет толкать вниз # контейнер.

Может быть, вы хотите переместить .stripe внутри .bg и установить .bg в положение: абсолютное. Таким образом, .stripe будет располагаться в .map-bg (я полагаю, это то, что вам нужно?), А #container будет располагаться поверх всех фоновых элементов div.

...