CSSメニューが正しく整列できない

CSS/HTMLを覚えようとしていますので、本当に分かりやすい解決方法があればごめんなさい。私はこれを使って、今学んだことを練習していますが、それは間違っています。CSSメニューが正しく整列できない

文字通り何時間もコーディングしていたのですが、最終的にナビゲーションバーを右揃えにしました。しかし、今は私の "ヘッダー"のdivに座っていません。私の基本的な構造はヘッダdivで、その中にはロゴ用のdiv（左に揃えてあります）と、ナビゲーションメニュー用のdiv（右に揃えてあります）があります。

しかし、最終的に正しく配置された後、適切な場所にメニューdivを表示できないようです。ここで私が何を意味するかを示す画像です：

http://i.stack.imgur.com/ot5ls.png

私はより良い私の問題を説明するために、黒に私の「ヘッダ」のdivの色を一時的に変更されました。見ての通り、私のメニューはヘッダdivの下にあり、やや右にありますか？ここで

は私のHTMLコードです：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>T5</title> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 

<body id="home_p"> 

<div id="header"> 

<div id="logo"> 
</div> 

<div id="menu"> 

<ul id="nav"> 
<li id="home"><a href="#"></a></li> 
<li id="about"><a href="#"></a></li> 
<li id="portfolio"><a href="#"></a></li> 
<li id="contact"><a href="#"></a></li> 
</ul> 

</div> 
</div> 


</body> 
</html>

そして、ここでは私のCSSです：

body 
/* T5 */ 
{background-color:#fff8d3; font-size:100%;} 

body#home_p #home{background:url('home.gif') 0 -45px;} 
body#about_p #about{background:url('about.gif') 0 -45px;} 
body#portfolio_p #about{background:url('portfolio.gif') 0 -45px;} 
body#contact_p #about{background:url('contact.gif') 0 -45px;} 

#header { 
background-color:#000000; 
height:45px; 
width:1200px; 
margin-left:auto; 
margin-right:auto; 
margin-top:90px; 
} 

#logo { 
background-image('logo.gif'); 
height:45px; 
width:181px; 
} 


#menu { 
width:328px; 
float:right; 
} 

#nav 
{position:absolute;} 

#nav ul{ 
display: inline; 
} 


#nav li{ 
height:45px; 
margin:0px; 
padding:0px; 
list-style:none; 
position:absolute; 
right:0px; 
top:0px; 
display:inline; 
float:right; 
} 

#nav a 
{height:45px; 
display:block; 
} 


#home{left:0x; width:62px;} 
#home{background:url('home.gif') 0 0;} 
#home a:hover{background: url('home.gif') 0 -45px;} 

#about{left:62px;width:65px;} 
#about{background:url('about.gif') 0 0;} 
#about a:hover{background: url('about.gif') 0 -45px;} 

#portfolio{left:147px;width:98px;} 
#portfolio{background:url('portfolio.gif') 0 0;} 
#portfolio a:hover{background: url('portfolio.gif') 0 -45px;} 

#contact{left:265px;width:83px;} 
#contact{background:url('contact.gif') 0 0;} 
#contact a:hover{background: url('contact.gif') 0 -45px;}

私は本当に任意の助けをいただければ幸いです。前もって感謝します。

出典

2012-02-08 case

CSS：

body 
{ 
    background-color: #fff8d3; 
    min-width: 600px; 
} 

body#home_p #home, body#about_p #about, body#portfolio_p #about, body#contact_p #about 
{ 
    background-position: 0 -45px !important; 
} 

#header 
{ 
    background-color: black; 
    height: 45px; 
    width: 90%; 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 90px; 
} 

#logo 
{ 
    background-image: url('logo.gif'); 
    background-color: #fff8d3; 
    height: 45px; 
    width: 181px; 
} 

#nav 
{ 
    position: relative; 
    float: right; 
    padding: 0; 
    margin: 0; 
} 

#nav li 
{ 
    height: 45px; 
    margin: 0 -2px; 
    padding: 0; 
    list-style: none; 
    position: relative; 
    display: inline-block; 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    position: relative; 
} 

#nav li:hover 
{ 
    background-position: 0 -45px; 
} 

#nav a 
{ 
    height: 100%; 
    width: 100%; 
    position: abosolute; 
    display: block; 
} 


#home 
{ 
    width: 62px; 
    background-image: url('home.gif'); 
} 

#about 
{ 
    width: 65px; 
    background-image: url('about.gif'); 
} 

#portfolio 
{ 
    width: 98px; 
    background-image: url('portfolio.gif'); 
} 

#contact 
{ 
    width: 83px; 
    background-image: url('contact.gif'); 
}

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>T5</title> 
     <link rel="stylesheet" type="text/css" href="style.css" /> 
    </head> 
    <body id="home_p"> 
     <div id="header"> 
      <!-- The floating elements have to go before the main content, or they will appear below. --> 
      <ul id="nav"> 
       <li id="home" title="Home"><a href="javascript:void();"></a></li> 
       <li id="about" title="About"><a href="javascript:void();"></a></li> 
       <li id="portfolio" title="Portfolio"><a href="javascript:void();"></a></li> 
       <li id="contact" title="Contact"><a href="javascript:void();"></a></li> 
      </ul> 
      <div id="logo"></div> 
     </div> 
    </body> 
</html>

出典

2012-02-08 05:39:23 Zenexer

これは完璧ですが、私は本当にすべての変更を理解していません！ – case

それをゆっくりと進み、再びポジショニングについて読むと、今私は理解していると思います。最初は、HTMLのロゴの前にメニューがどのように表示されるのか理解できませんでした。しかし、今私はもう少しポジショニングを理解しています。ありがとう！ – case

私は他にもたくさんの小さな改良を加えました。あなたは多くのタイプミス、何もしていないコード、凝縮される可能性のあるコードなどを持っていました。それも前のコードと比較してください。 – Zenexer

#navにposition:absoluteを設定するが、それは（left/topを）座標与えていないことで、それがどこかに落ちます。それに境界線を追加すると、表示されます。しかし、それを入れてみましょう：

メニュー項目の絶対位置は必要ありません。＃ヘッダーに余裕

設定しposition:relativeでfloat:leftにそれぞれを設定し、その後、同じホバー状態は、一度だけバックグラウンドを変更a:hoverを宣言するすべてのリンクを共有しているのでposition:absolute

との右上に#navを固定http://jsfiddle.net/Pz3Q3/：位置

は、ここでは、上に構築するための足場ですあなたのHTMLに

を実際のテキストを維持し、親近感の交換方法を使用しますは、私は強くあなたがこれを読むことをお勧めします：あなたは#menuに設定されている幅があなたのCSS全体で大混乱を引き起こしているhttp://na.isobar.com/standards/

出典

2012-02-08 05:59:15

あまりにも早くやろうと思った！ポジショニングについて今読んだことがありました。私はそれをより良く理解していると思います。ありがとう。 – case

実際には、フローティング要素を非フローティング要素の後に置くからです。要素を絶対配置に設定するだけでは、現在の位置、寸法、および兄弟の位置にどのように影響するかは決して変更されません。 – Zenexer

@Zenexer "somewhere else" - >意図していない場所（この場合は通常のフロー位置）。 –

。あなたの "#nav ul"は何もしていません。しかし、究極的には#logoにはfloat：leftが必要です。

すべて絶対位置決めは不要です。これを使用してください：

#logo { 
    background-image('logo.gif'); 
    height:45px; 
    width:181px; 
    float: left; 
} 

#menu { 
    float: right; 
} 

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

出典

2012-02-08 06:03:40

ありがとうございました。私はあなたの提案を試みましたが、今はメニューが見えません。 – case

実際には今は大丈夫ですが、私は別の応答からもそれを得ました。ありがとう:) – case

CSSメニューが正しく整列できない

答えて

関連する問題