如何解决这个菜单？

我遇到了这个问题，我正在创建一个页面。 screenshot 如何解决这个菜单？

下面是HTML的代码：

<!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：

@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

你需要更新你的CSS为div#interface

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

     }

来源

2017-05-26 19:50:33 ISHIDA

由于您的导航位置是固定的，因此您必须使用填充或边距来下推内容。首先将body margin设置为0.然后添加padding-top：60px;到div＃界面。这应该是一个很好的先发。当然，试着学习一些关于块元素，内联元素，浮动元素以及检查他们在布局方面的不同行为。

来源

2017-05-26 19:45:47

我希望这可以帮助：根据您的要求进行更改。特别在单独的文件中添加样式。你需要洗你的HTML标记和位置固定增加div#interface我建议它的宽度改为100% 这里是工作代码：

<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

如何解决这个菜单？

回答

相关问题