контейнер верхнего фон Проблема

Question

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

header http://dl.getdropbox.com/u/118004/Screen%20shot%202010-04-13%20at%202.50.49%20PM.png

Красная полоса на левой предысторию я установил для #personal ДИВ, и я хотел бы, чтобы выровнять к верхней части контейнера, вертикально.

Проблема в том, что у меня есть фон для # контейнера-вершины div поверх #container div с абсолютным позиционированием. Есть ли способ переместить #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; 
} 

Answer 1

Изменить следующие 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 пикселей выше, чем в настоящее время позиционируется.

Answer 2

[Edit:. Переделан]

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

Является ли это по тому, что вы хотите сделать?

Answer 3

Если я ничего не пропущу, я вижу, что вы опубликовали, производя результаты, которые вы хотите.

Мне интересно, применили ли вы сброс CSS к своим стилям? Если нет, вы можете посмотреть на yahoo user interface css reset или Eric Meyer's reset CSS.

У браузера может быть интерполяция по умолчанию и расстояние между полями.

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