Hello I'm starting to fiddle with HTML and CSS now

Question

Hello I'm starting to fiddle with HTML and CSS now

Navigation

#1 by (0 votes)

1

Hello, I'm now starting to tinker with HTML and CSS, but I'm having a problem because my menu is shifting when I give ctrl + scrol from the mouse, could you 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 html5 css

asked by anonymous 29.01.2018 / 22:48

1 answer

Capture photo sequence and save automatically to Android Select open window with bank options

score 0 · Answer 1

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

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

.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 issues with your CSS are the use of position : you do not you can define two values, like this:
position: absolute static;
You should only set 1 value (learn more about position in this link ).