0

誰かがすでにこれを行っているに違いありませんが、背景画像やテーブルを含めて試したことはありません。

私は 960 ピクセル幅のラッパーを持っており、現在私が持っているコードは ul ナビゲーション バーと同じ行にヘッダーを表示します:

____________________________________________________________
!         h2 text          !  menu1   !  menu 2  !  menu3  ! 
____________________________________________________________

h2 テキストを、現在のテキスト行よりも背の高いロゴに置き換えて、すべてを下のように並べたいと思います。

___________________________
!                          !     
!        LOGO.jpg          !
!                          !________________________________ 
!                          !  menu1   !  menu 2  !  menu3  ! 
____________________________________________________________

背景画像、テーブル、および考えられる他のすべてを試した後、私ができる最善のことは、このようにロゴの上部をメニューバーの上部に合わせることです.

____________________________________________________________
!                          !  menu1   !  menu 2  !  menu3  !   
!        LOGO.jpg          !_______________________________! 
!                          !
!                          !   
___________________________!

現時点では、次のコードがあります。

#header {
position: relative;
display: block;
background-color: #003366; 
}


#header ul {
position: absolute;
right: 0px;
top: 2px;
}

#header ul li {
list-style: none;
display: inline;
}

img.bottom 
  {
vertical-align:text-bottom;
  }

と

    <div id="header"> 
<img src="src/logo.jpg" width="414" height="140" class="bottom" />
  <div id="navbar"> 
             <ul>             
 <li><a href="menu1.htm"><span>Home</span></a></li>
 <li><a href="menu2.htm"><span>About</span></a></li>
 <li><a href="menu3.htm"><span>Contact</span></a></li>
        </ul>
 </div> 
    </div>

そのメニューを下に移動して、jpg の下部に揃える簡単な方法はありますか?

4

1 に答える 1

1

ヘッダーの高さを自動に設定し、ul を下に配置できます。ここに jsfiddle があります: http://jsfiddle.net/YBrkB/

于 2012-04-28T15:22:08.520 に答える