CSS：トラブルシューティングのヘッダーレイアウト（ul、img）

Question

私はこれまでに質問されていると確信していますが、自分の状況に適した解決策を見つけることができませんでした。

インデックスページのヘッダー/ナビゲーションセクションを作成しようとしています。

ヘッダーの幅は960px、高さは120pxです。その中には（今は）1つのimgと4つのliのulがあります。私はimgとulをどのように表示するかを決めようとしています。私は左に浮かんでいて、23pxの上マージンを割り当てて、私が望むようにそれを縦に整列させました---ポジションは良いです。私がulを配置しようとすると問題が発生します。フロート、クリア、マージン、またはパディングの設定に応じて、適用されます（画像がulを上または下に押しているように）。下の画像は、CSSでこの出来事を示して、私は下に貼り付けられています

Image of problem

これは、ヘッダ（非常に簡単）に関連するHTMLコードです：これは、現在のCSSのIである

<div id="header"> 
    <img src="_images/header-name2.png" /> 
    <ul id="navigation"> 
     <li class="current"><a href="">games</a></li> 
     <li><a href="">news</a></li> 
     <li><a href="">about</a></li> 
     <li><a href="">contact</a></li>    
    </ul>    
</div> 

なお、上記画像を生成有する：だから

body { 
    margin-top: 0px; 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    background-image: url(../_images/index-body-bkgd.jpg); 
    background-repeat: repeat-x; 
    background-color: #333; 
} 

#wrapper { 
    width: 960px; 
    margin-top: 0em; 
    height: 1050px; 
    margin-right: auto; 
    margin-left: auto; 
} 
#header { 
    height: 120px; 
} 
#header img { 
    margin-top: 23px; 
    float: left; 
} 
#header ul { 
    list-style-type: none; 
    padding-left: 430px; 
    font-size: 1.3em; 
} 
#header ul li { 
    display: inline; 
} 
#header ul li a { 
    color: #000; 
    text-decoration: none; 
    padding-top: 10px; 
    padding-right: 30px; 
    padding-bottom: 10px; 
    padding-left: 20px; 
} 

、あなたは水平方向の画像（「D」と「K」のトップピクセル）の頂部を拡張する場合、この順序付けされていないリストが存在する場所です。フロートの設定を変更すると、画像の下端（文字通り「j」の下端のピクセル）を順序付けられていないリストの天井にすることができます。私はリストが欲しい場所でもありません。リストを適切に配置できるようにリストを解放するにはどうすればよいですか？あなたが比較的#headerを配置した場合

Answer 1

私はちょうどダウンのnav李を動かしので

#header { 
    height: 120px; 
    float: left; 
} 

のような、＃ヘッダーのdivを浮動

をあなたのCSSを修正する前に、それはのように見えたものです私はあなたのコードを使用しました。
後：ここでは、ヘッダーのdiv

を浮動時に時々親コンテナを浮動ないが浮いている子コンテナで奇妙な行動のように思えるものを引き起こす可能性があるように見えるものです。

Answer 2

、あなたは絶対に、ヘッダ内<ul>と<img />を配置することができます

#header { 
    height: 120px; 
    position: relative; 
} 

#header img { 
    margin-top: 23px; 
    position: absolute; 
    top: 23px; 
    left: 0; 
} 

#header ul { 
    list-style-type: none; 
    font-size: 1.3em; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

はあなたのためにこの作品は、単に場所に応じて、上部と下部の値を変更するようにするにはヘッダー内にイメージと順序付けられていないリストが表示されるようにします。

---

Absolute Positioning Inside Relative Positioningのこの技術は、CSS-トリック（下のスクリーンショットを参照）に詳細に記載されています。

相対的な配置を持つページ要素は、子要素を絶対的にその内部に配置するコントロールを提供します。ここで