HTML divを使用してナビゲーションバーを作成する

私はちょうどWeb開発を開始しています。私は、複数のDiv要素を含むページナビゲーションバーを作成しようとしていますが、 AboutButton "）を画面に表示します。ここに私のHTML本体のコードです：HTML divを使用してナビゲーションバーを作成する

<body> 

    <div id="navbar" id="top"> 
     <div id="pageselection"> 
      <div id="HomeButton"> <a href="#top"> HOME </a> </div> 
      <div id="AboutButton"> <a href="#About> ABOUT </a> </div> 
     </div> 
    </div> 


</body>

とこちらのページのための私のCSSです：基本的に

#navbar{ 
Position: fixed; 
Width: 100%; 
Height: 10%; 
} 

#pageselection{ 
Position: absolute; 
Width: 40%; 
Height: 100%; 
Right: 30%; 
} 

#HomeButton{ 
Position: absolute; 
Width: 33%; 
Height: 100%; 
Left: 0%; 
text-align: center; 
} 

#AboutButton{ 
Position: absolute; 
Width: 33%; 
Height: 100%; 
Left: 33%; 
text-align: center; 
}

、私は 'DIV' を構築しようとしていますそのページの上部を横切って実行され、次に2番目の 'div'が座るスペースとしてその 'div'の中心40％をマークします。これにより、ユーザーがページをナビゲートするために使用できる3つのリンクが保持されます。

事前のおかげで、うまくいけば、その愚かな誤り、と私は私の説明が十分に明確だった願っています:)

出典

2017-07-06 Wags

ブートストラップは –

ブートストラップを使用するためのツールですが、それは純粋な初心者は、マークアップの基礎のいずれかを学ぶ助けにはならない、あなたを助けるかもしれません。 – jswebb

あなただけ私はあなたをお勧めし、起動している場合あなたは

<a href="#About>

に引用符を逃しましたAtomやSublimeなどのフリーエディタを使用して、この種のエラーについて警告します。

また、要素に「id」を2回使用することはできません。より良い練習はあなたのようにそれらを積み重ねることができるようになりますどこclassesを使用することです：

<div class="navbar top"></div>

出典

2017-07-06 18:19:19

ありがとうございます。要素上で "id"を2回使用しないことについては、 "id"で識別された別の要素内に既に存在する要素を "id"で識別できないということですか？ – Wags

"id"は一意の識別子で、htmlページ全体で一度しか使用できません。別の "id"の中に "id"を挿入することができます –

ここで少し明確にする必要があります。同じ要素に対して 'id'を複数回使用することはできません。マークアップ全体で1つ以上使用できます。ただし、各一意の識別子は1回のみ使用できます。 – jswebb

あなたは<a href="#About>で終わる引用"を逃しました。私はまた、あなたのナビゲーションバーに別のアプローチをお勧めします。ナビゲーションバーのリンクの絶対位置を決める必要はありません。また、1つの要素に複数のIDを割り当てることはできません。私はいくつかの変更を加え、IDの代わりにクラスを使用しました。見てください。

#navbar{ 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 10%; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: whitesmoke; 
 
    height: 40px; 
 
} 
 

 
#pageselection{ 
 
    position: absolute; 
 
    width: 40%; 
 
    height: 100%; 
 
    right: 30%; 
 
    background-color: gray; 
 
} 
 

 
.nav-button{ 
 
    float:left; 
 
    width:33%; 
 
    height: 100%; 
 
    text-align: center; 
 
    line-height:40px; 
 
} 
 
.nav-button a{ 
 
    display:block; 
 
    height: 100%; 
 
}

<div id="navbar" id="top"> 
 
    <div id="pageselection"> 
 
     <div class="nav-button"><a href="#top">HOME</a></div> 
 
     <div class="nav-button"><a href="#about">ABOUT</a></div> 
 
     <div class="nav-button"><a href="#test">TEST</a></div> 
 
    </div> 
 
</div>

出典

2017-07-06 18:23:46

HTML divを使用してナビゲーションバーを作成する

答えて

関連する問題