перемещение текста при сохранении фонового изображения в CSS

У меня есть div main_menu, который содержит фоновое изображение, которое повторяется по оси Y. Над этим div у меня есть другой div, который используется для заголовка. Проблема в том, что в заголовке div есть изображение высотой около 75 пикселей. Я хотел бы начать текст в main_div примерно на 50 пикселей выше, где фактически начинается фоновое изображение main_div.

Я думал о чем-то вроде:

position:absolute; top:-50px;

Это не работает. Вопрос в том, как мне переместить текст вверх, сохраняя при этом фоновое изображение в нормальном месте.

Спасибо

{РЕДАКТИРОВАТЬ}

Вот CSS

.menu_main
{
background-image:url('../menu_main.jpg');
background-repeat:repeat-y;
width:173px;
padding:5px;    

}
.menu_header
{
background-image:url('../menu_header.jpg');
text-align:center;
width:173px;
height:65px;
padding:5px;    
}

это html

<div class="menu_header">Some Header</div>
<div class="menu_main">
    <ul>
        <li>Educational Objective</li>
        <li>Projects</li>
        <li>Class Preparation</li>
        <li>Testimonials</li>
    </ul>
</div>

Итак, как вы можете видеть, заголовок довольно высокий. Итак, я хотел бы начать текст в div menu_main примерно на 50 пикселей выше.


html css background-image positioning
person Ori    schedule 14.07.2009    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Используйте отрицательное верхнее поле.

.menu_main ул {margin-top:-50px;}

person Emily    schedule 14.07.2009

arrow_upward
0
arrow_downward

Вы можете переместить его так же, как вы делали с абсолютным позиционированием, и переместить фон вниз следующим образом:

background:url(someimage.png) repeat-y left 50px;

это переместит ваше изображение bg так, чтобы оно начиналось на 50 пикселей вниз.

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

person Darko Z    schedule 14.07.2009

arrow_upward
0
arrow_downward

Вы можете конкретно стилизовать свой UL:

.nav
{
  position: relative;
  top: -50px;
}

а также

<ul class="nav">
...

Или, возможно, поместите UL в другой DIV class="nav".

person hyperslug    schedule 14.07.2009

arrow_upward
0
arrow_downward

Но можно сдвинуть фон вниз (например на 5 пикселей):

background-position: top 5px;
person Deed    schedule 22.08.2012