Фоновая проблема верхнего контейнера - PullRequest
Новая
       4

Фоновая проблема верхнего контейнера

0 голосов
/ 13 апреля 2010

Вот скриншот:

заголовок http://dl.getdropbox.com/u/118004/Screen%20shot%202010-04-13%20at%202.50.49%20PM.png

Красная полоса слева - это фон, который я установил для #personal div, и я бы хотел, чтобы он был выровнен по верху контейнера вертикально.

Проблема в том, что у меня есть фон для div # container-top в верхней части div #container с абсолютным позиционированием. Есть ли способ поднять #personal div вверх, чтобы не осталось места?

HTML 

<div id="container">
  <div id="container-top"></div>
    <div id="personal">
      <h1>Jonathan Doe</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliqua erat volutpat.</p>
    </div> <!-- end #personal -->
</div> <!-- end #container -->

CSS 

#container {
  background: url(images/bg-mid.png) repeat-y top center;
  width: 835px;
  margin: 40px auto;
  position: relative;
}

#container-top {
  background: url(images/bg-top.png) no-repeat top center;
  position: absolute;
  height: 12px;
  width: 835px;
  top: -12px;
} 

#container-bottom {
  background: url(images/bg-bottom.png) no-repeat top center;
  position: absolute;
  height: 27px;
  width: 835px;
  bottom: -27px;
}

#personal {
  background: url(images/personal-info.png) no-repeat 0px left;
}

Ответы [ 3 ]

1 голос
/ 13 апреля 2010

[Редактировать: обновлено.]

HTML: 

<div id="container">
  <div id="container-inner">
    <div id="personal">
      <h1>Jonathan Doe</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliqua erat volutpat.</p>
    </div> <!-- end #personal -->
  </div> <!-- end #container-bg -->
</div> <!-- end #container -->

CSS: 

#container {
  background: url(images/bg-mid.png) repeat-y top center;
  width: 835px;
  /*margin: 40px auto;*/
  margin: 28px auto 40px auto;
  position: relative;
}

#container-inner {
  background: url(images/bg-top.png) no-repeat top center;
}

#personal {
  background: url(images/personal-info.png) no-repeat 0px left;
  padding-top: 12px;
}

Это в соответствии с тем, что вы хотите сделать?

1 голос
/ 13 апреля 2010

Если я что-то упустил, я вижу, что вы опубликовали, чтобы получить желаемые результаты.

Мне интересно, применили ли вы CSS для сброса к вашим стилям? Если нет, вы можете взглянуть на сброс пользовательского интерфейса *1003* Yahoo * CSS .

.

В браузере могут быть некоторые отступы по умолчанию и интервалы полей.

Вы включаете сброс CSS перед вашими другими стилями. Возможно, вы уже знаете это, но стоит спросить.

1 голос
/ 13 апреля 2010

Измените следующий CSS: 

    #personal {
  background: url(images/personal-info.png) no-repeat 0px left;
position: relative;
top: 0px;
left: 0px;
}

Вам нужно position этот элемент relative для его родителя; container, чтобы он подходил там, где вы хотите. Свойства top и left показывают, как далеко от верхнего левого угла родительского элемента div требуется конкретный элемент.

Или это: 

#personal {
      background: url(images/personal-info.png) no-repeat 0px left;
    margin-top:-10px; /*px value that works*/
    }

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

...