Hello I’m starting now to mess with HTML and CSS

Asked

Viewed 87 times

1

Hello I’m starting now to mess with HTML and CSS, but I’m trying a problem because my menu is moving when I give the mouse Ctrl+scrol, could help me???

<!DOCTYPE html>
<html lang="pt br">

<head>
         <meta http-equiv="content-type" content="tenxt/html;  charset UTF8" />
         <meta http-equiv="X-UA-compatible" content="IE,chrome=1" />
         <meta name name="handheldFriendly" content="true" />
         <meta name="apple-touch-fullscream" content="yes" />
         <meta name="mobileotimized" content="320" />
         <meta name="viweport" content="width, intial-sacle=1" />
         <meta charset="UTF8" />



                 <title>WolfEngineering</title>
                 <link rel="Stylesheet" type="text/css" href="_css\Estilo.css" />

</head>
<body>

       <div id="BarraNav">
         <div id="Topo">
           <h1>WolfEngineering</h1>
            </div>
              <div class="containerB">
                <div id="menu">
                  <ul>
                     <li> <a href="">Menu</a></li>
                     <li> <a href="">Profissinais</a></li>
                     <li> <a href="">Onde Ficamos</a></li>
                     <li> <a href="">Contato</a><l/i>
                     </ul>
                 </div>
               </div>
             </div>



               <p>Empresa focada em trazer o melhor da Engenharia civil e projetos futuristas e diferenciados
                para a sua casa e para sua empresa</p>
      <div class="container">

        <h2>Progetos feitos</h2>
      </div>
</body>
</html>


body{
  margin: 0

}

h1{
        text-align: center;
        font-family: verdana;
        position: absolute fixed;
        	left: 38%;

}
#Topo{
        height: 350px;
        background: url('../Imagem/topo jpg.jpg')
        no-repeat center;



 }

a{
        font-size: 20px;
        color: white;
        text-decoration: none;
        margin: 0 auto;

}


p{
      text-align: center;
}

#menu{
        background: black;
        margin: 0 auto;



}



#menu ul{
      margin: 0 auto;
      width: 550px;
      position: absolute static;

}


#menu ul li{
  display: inline;
  margin: 0px 15px auto;
  position: absolute static;
}

h2{
  position: relative;
  margin: center;
}

.containerB{
    width: 1390px;
    position: absolute center;
    margin: auto;
}



.container{
    width: 1000px;
    position: relative;
    margin: 0px auto;
}
<!DOCTYPE html>
<html lang="pt br">

<head>
         <meta http-equiv="content-type" content="tenxt/html;  charset UTF8" />
         <meta http-equiv="X-UA-compatible" content="IE,chrome=1" />
         <meta name name="handheldFriendly" content="true" />
         <meta name="apple-touch-fullscream" content="yes" />
         <meta name="mobileotimized" content="320" />
         <meta name="viweport" content="width, intial-sacle=1" />
         <meta charset="UTF8" />



                 <title>WolfEngineering</title>
                 <link rel="Stylesheet" type="text/css" href="_css\Estilo.css" />

</head>
<body>

       <div id="BarraNav">
         <div id="Topo">
           <h1>WolfEngineering</h1>
            </div>
              <div class="containerB">
                <div id="menu">
                  <ul>
                     <li> <a href="">Menu</a></li>
                     <li> <a href="">Profissinais</a></li>
                     <li> <a href="">Onde Ficamos</a></li>
                     <li> <a href="">Contato</a><l/i>
                     </ul>
                 </div>
               </div>
             </div>



               <p>Empresa focada em trazer o melhor da Engenharia civil e projetos futuristas e diferenciados
                para a sua casa e para sua empresa</p>
      <div class="container">

        <h2>Progetos feitos</h2>
      </div>
</body>
</html>

html css html5

  • Detail q here on my computer is all centralized, but on the Run made n this centralized

1 answer

0

This is because the div .containerB has a fixed value (1390px). The menu will always be centered even if you zoom in on the screen.

To resolve this, change the class .containerB using max-width and width in this way:

.containerB{
   width: 100%;
   max-width: 1390px;
   position: absolute center;
   margin: auto;
}


body{
  margin: 0

}

h1{
        text-align: center;
        font-family: verdana;
        position: absolute fixed;
        	left: 38%;

}
#Topo{
        height: 350px;
        background: url('../Imagem/topo jpg.jpg')
        no-repeat center;



 }

a{
        font-size: 20px;
        color: white;
        text-decoration: none;
        margin: 0 auto;

}


p{
      text-align: center;
}

#menu{
        background: black;
        margin: 0 auto;



}



#menu ul{
      margin: 0 auto;
      width: 550px;
      position: absolute static;

}


#menu ul li{
  display: inline;
  margin: 0px 15px auto;
  position: absolute static;
}

h2{
  position: relative;
  margin: center;
}

.containerB{
   width: 100%;
   max-width: 1390px;
   position: absolute center;
   margin: auto;
}



.container{
    width: 1000px;
    position: relative;
    margin: 0px auto;
}
<!DOCTYPE html>
<html lang="pt br">

<head>
         <meta http-equiv="content-type" content="tenxt/html;  charset UTF8" />
         <meta http-equiv="X-UA-compatible" content="IE,chrome=1" />
         <meta name name="handheldFriendly" content="true" />
         <meta name="apple-touch-fullscream" content="yes" />
         <meta name="mobileotimized" content="320" />
         <meta name="viweport" content="width, intial-sacle=1" />
         <meta charset="UTF8" />



                 <title>WolfEngineering</title>
                 <link rel="Stylesheet" type="text/css" href="_css\Estilo.css" />

</head>
<body>

       <div id="BarraNav">
         <div id="Topo">
           <h1>WolfEngineering</h1>
            </div>
              <div class="containerB">
                <div id="menu">
                  <ul>
                     <li> <a href="">Menu</a></li>
                     <li> <a href="">Profissinais</a></li>
                     <li> <a href="">Onde Ficamos</a></li>
                     <li> <a href="">Contato</a><l/i>
                     </ul>
                 </div>
               </div>
             </div>



               <p>Empresa focada em trazer o melhor da Engenharia civil e projetos futuristas e diferenciados
                para a sua casa e para sua empresa</p>
      <div class="container">

        <h2>Progetos feitos</h2>
      </div>
</body>
</html>

Other problems with your CSS is the use of position: you don’t can set two values, thus:

position: absolute static;

You should only set 1 value (learn more about position in this link).

Browser other questions tagged html css html5

You are not signed in. Login or sign up in order to post.