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

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

3 голосов
/ 14 июля 2009

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

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

position:absolute; top:-50px;

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

Спасибо

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

Вот 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 примерно на 50px выше

Ответы [ 4 ]

3 голосов
/ 14 июля 2009

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

.menu_main ul {margin-top: -50px;}

0 голосов
/ 23 августа 2012

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

background-position: top 5px;
0 голосов
/ 14 июля 2009

Вы можете создать свой UL специально: 

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

и 

<ul class="nav">
...

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

0 голосов
/ 14 июля 2009

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

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

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

...