このメニューを解決するには？

私が作成しているページでこの問題が発生しています。このメニューを解決するには？

<!DOCTYPE html>

<head> 
    <meta charset="UTF-8"/> 
    <title>JJ TECH</title> 
    <link rel="stylesheet" href="_css/estilo.css"/> 
</head> 

<body> 
    <div id="interface"> 
     <header id="cabecalho"> 
      <nav id="menu"> 
       <h1>Menu Principal</h1> 
       <ul> 
        <li><a href="index.html" class="ativo">Home</a></li> 
        <li><a href="info.html">Informações</a></li> 
        <li><a href="contato.html">Contato</a></li> 
       </ul> 
      </nav> 
     </header> 

     <p>Lorem ipsum dolor sit amet, elit ferri facilisi has an, eos probatus perpetua maluisset ad. Minim ponderum pro ut, cu vim referrentur philosophia, ex posse causae signiferumque mei. Dico erant veniam sea et, ut elitr ponderum delicata sed. Tation euismod vix ex, usu latine omnesque no. Vel no libris maiestatis.</p> 
    </div> 
</body>

とCSS：ここ

screenshotは、HTMLのコードである

@charset "UTF-8";

  body{ 
       font-family: Arial, sans-serif; 
       background: #370b44; 
      } 

      div#interface{ 
       width: 900px; 
       background: #fff; 
       margin: -20px auto 0 auto; 
       padding: 20px; 

      } 

      p{ 
       text-align: justify; 
       text-indent: 30px; 
      } 


      /*CONFIGURAÇÃO DO MENU*/ 

      nav#menu h1{ 
       display: none; 
      } 

      nav#menu ul{ 
       background-color: rgba(0,0,0,.5); 
       overflow: hidden; 
       list-style: none; 
       display: block; 
       font-size: 13pt; 
       margin: 0; 
       padding: 0; 
       position: fixed; 
       width: 100%; 
       top: 0; 
       left: 0; 
      } 

      nav#menu li{ 
       float: left; 
       /*border-right: 1px solid #555;*/ 
      } 

      nav#menu li:hover:not(.active){ 
       background: #000; 
      } 

      a{ 
       display: block; 
       text-decoration: none; 
       color: #fff; 
       padding: 15px; 
      } 

      .ativo{ 
       background: #751891; 
      }

コンテンツを自分のメニューの後に表示させるにはどうすればよいですか？

出典

2017-05-26 J.Felipe

あなたは、私はこれが役立つことを願っていdiv#interface

div#interface{ 
      width: 900px; 
      background: #fff; 
      margin: 67px auto 0 auto; 
      padding-top: 20px; 

     }

出典

2017-05-26 19:50:33 ISHIDA

ナビゲーションの位置は固定されているため、パディングまたはマージンを使用してコンテンツをプッシュダウンする必要があります。最初にボディマージンを0に設定します。次にpadding-top：60pxを追加します。＃インタフェースを分割する。それは良いスタートでなければなりません。もちろん、ブロック要素、インライン要素、浮動要素について学び、レイアウトに関するさまざまな動作を確認してみてください。

出典

2017-05-26 19:45:47

のためのあなたのCSSを更新する必要があります。要件に応じて変更します。特に別のファイルにスタイルを追加する。あなたは、私がここに100% にその幅を変更示唆あなたのHTMLマークアップをシャッフルし、div#interfaceに固定された位置を追加する必要があり、作業のコードは次のとおりです。

<head> 
     <meta charset="UTF-8"/> 
     <title>JJ TECH</title> 
     <style> 
     body{ 
        font-family: Arial, sans-serif; 
        background: #370b44; 
       } 

       div#interface{ 
        width: 900px; 
        background: #fff; 
        margin: -20px auto 0 auto; 
        padding: 20px; 
        position:fixed; 
        top:71px; 

       } 

       p{ 
        text-align: justify; 
        text-indent: 30px; 

       } 


       /*CONFIGURAÇÃO DO MENU*/ 

       nav#menu h1{ 
        display: none; 
       } 

       nav#menu ul{ 
        background-color: rgba(0,0,0,.5); 
        overflow: hidden; 
        list-style: none; 
        display: block; 
        font-size: 13pt; 
        margin: 0; 
        padding: 0; 
        position: fixed; 
        width: 100%; 
        top: 0; 
        left: 0; 
       } 

       nav#menu li{ 
        float: left; 
        /*border-right: 1px solid #555;*/ 
       } 

       nav#menu li:hover:not(.active){ 
        background: #000; 
       } 

       a{ 
        display: block; 
        text-decoration: none; 
        color: #fff; 
        padding: 15px; 
       } 

       .ativo{ 
        background: #751891; 
       } 
     </style> 
    </head> 

    <body> 
    <header id="cabecalho"> 
       <nav id="menu"> 
        <h1>Menu Principal</h1> 
        <ul> 
         <li><a href="index.html" class="ativo">Home</a></li> 
         <li><a href="info.html">Informações</a></li> 
         <li><a href="contato.html">Contato</a></li> 
        </ul> 
       </nav> 
      </header> 

     <div id="interface"> 

      <p>Lorem ipsum dolor sit amet, elit ferri facilisi has an, eos probatus perpetua maluisset ad. Minim ponderum pro ut, cu vim referrentur philosophia, ex posse causae signiferumque mei. Dico erant veniam sea et, ut elitr ponderum delicata sed. Tation euismod vix ex, usu latine omnesque no. Vel no libris maiestatis.</p> 
     </div> 
    </body>

出典

2017-05-26 20:06:08

このメニューを解決するには？

答えて

関連する問題