3

Y軸で繰り返される背景画像を含む「main_menu」divがあります。この div の上に、ヘッダーに使用される別の div があります。問題は、ヘッダー div に高さ約 75px の画像があることです。main_div の background-image が実際に始まる場所から約 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>

ご覧のとおり、ヘッダーはかなり高くなっています。menu_main div のテキストを 50px ほど上から始めたいと思います

4

4 に答える 4

3

負の上余白を使用します。

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

于 2009-07-14T10:51:11.323 に答える
0

ただし、背景を下に移動できます (たとえば、5 ピクセル)。

background-position: top 5px;
于 2012-08-22T21:12:21.973 に答える
0

絶対配置で行っていたように移動し、次のように背景を下に移動できます。

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

これにより、背景画像が移動し、50px から開始されます。

スクリーンショットやその他のコード、または実際の例を提供していただければ、さらにお役に立てるかもしれません...

于 2009-07-14T05:20:55.933 に答える
0

UL を具体的にスタイルできます。

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

と

<ul class="nav">
...

または、UL を別の DIV class="nav" に入れることもできます。

于 2009-07-14T05:45:44.560 に答える