画面上部に固定され、すべての画面サイズで動作するようにサイズ変更された、水平に配置されたナビゲーションバーを作成するにはどうすればよいですか？

Question

画面上部に固定された簡単なナビゲーションメニューを作成しようとしていて、画面の高さの10％を占めています。また、画面の高さと幅に関係なく、すべてのデバイスでナビゲーションバーを機能させることができます。私が現在持っているものは、あなたの画面のサイズを変更するか、自然に低い解像度が必要な場合、かなりひどく台無しになる。また、各タブのテキストを縦に並べるようにしたいのですが、パディング、縦線、余白などを変更するなど、多くの方法を試しています。私は検索して検索し、JavaScriptを使ってこれを達成するなど、さまざまなアプローチを試みましたが、すべて運がありません。

私の現在のCSS：

 #nav { 
      height:10%; 
      background-color:rgb(52, 152, 219); 
      position:fixed; 
      top:0; 
      left:0; 
      width:100%; 
      color:white; 
      font-family: Calibri; 
      font-size:24pt; 
      text-align:center; 
     } 

     #nav a { 
      display:inline-block; 
      height:100%; 
      padding-left:15px; 
      padding-right:15px; 
     } 
     #nav a:hover { 
      background-color:rgb(41, 128, 185); 
     } 

そして、私のHTML：

 <div id="main"> 
     <div id="nav"> 
      <a>Home</a> 
      <a>Page2</a> 
      <a>Page3</a> 
      <a>Page4</a> 
      <a>Page5</a> 

     </div> 
    </div> 

ありがとう！

Answer 1

あなたのnav cssに追加することができます "z-index：-1;"残りのコンテンツの後ろに設定します。ナビゲーションバーの背後にバックグラウンドイメージを維持するために、 "z-index：-2;"を追加する必要があるかもしれません。これは、少なくとも画面の上部にそれを固定し、残りのコンテンツスクロール

サイジングが狂っているのは、フォントサイズが設定されているからです。フォントサイズを2emに設定すると、一般的なサイズのスクリーンでは24になりますが、より小さなウィンドウに調整できます。

Answer 2

私はあなたのCSSのカップルの事を固定してのdivの中のリンクを包んだ。

 #nav { 
      height:10%; 
      background-color:rgb(52, 152, 219); 
      position:fixed; 
      top:0; 
      left:0; 
      width:100%; 
      color:white; 
      font-family: Calibri; 
      font-size:24pt; 
      text-align:center; 
     } 

     #nav div { 
      display:inline-block; 
      padding:15px; 
     } 
     #nav div:hover { 
      background-color:rgb(41, 128, 185); 
      cursor:pointer; 
     } 

そしてHTML

 <div id="main"> 
     <div id="nav"> 
      <div><a>Home</a></div> 
      <div><a>Page2</a></div> 
      <div><a>Page3</a></div> 
      <div><a>Page4</a></div> 
      <div><a>Page5</a></div> 
     </div> 
    </div> 

ブラウザのサイズ変更で問題が解決しない場合は、私に教えてください。