Good afternoon!
I am training to build a website, and when I minimize the screen, the menu bar that is an image moves and leaves the position (it rises). I would like it to stay fixed and fit the screen size.
Note: I'm still not making a responsive site. This will be the next step.
Could you help me with a tip? Thank you.
SEE HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>RIO.TEC - Amortecedores, Kit de embreagem, mangas de eixo, caixa de direção"</title>
<link rel="stylesheet" type="text/css" href="css/CSSReset.css">
<link rel="stylesheet" type="text/css" href="css/estilo_home.css">
<meta charset="UTF-8">
</head>
<body>
<header>
<div id="imgtopo">
<address>
<p><strong>Endereço:</strong></p>
<p>Estrada de qualquer coisa, nº 999 <br> Bairro - Rio de Janeiro/RJ <br> CEP: 33.333-333<br><br></p>
<p><strong>Telefone: (21) 3333-3333<br>
Celular: (21) 9999-9999</strong> (Whatsapp)</p>
</address>
</div>
<nav id="imgmenu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</header>
<main>
<section id="empresa">
<h1>Sobre a empresa</h1>
<p>Aqui vai o texto sobre a empresa. <br> Aqui vai o texto sobre a empresa.
<br> Aqui vai o texto sobre a empresa. Aqui vai o texto sobre a empresa.
<br> Aqui vai o texto sobre a empresa. Aqui vai o texto sobre a empresa.</p>
</section>
<section id="produtos">
<h1>Produtos</h1>
<ul>
<li>Produto 1</li>
<li>Produto 2</li>
<li>Produto 3</li>
<li>Produto 4</li>
<li>Produto 5</li>
<li>Produto 6</li>
<li>Produto 7</li>
</ul>
</section>
<footer>
<section id="copyright">
<hr>
<h6>Copyright - Todos os direitos reservados. |
Desenvolvido por: <a href="mailto:[email protected]">[email protected]</a></h6>
</section>
</footer>
</main>
</body>
</html>
SEE CSS:
@charset "UTF-8";
/*Estrutura da página*/
html, body {
width:100%;
height: 100%;
font-size: 16px;
font-family: Verdana, Liberation;
}
header{
width:100%;
height:30%;
}
main{
width:100%;
height:70%;
}
/*
===================================
HEADER e menu
===================================
*/
#imgtopo {
background-image: url(../img/topo.png);
background-size:cover;
background-repeat:no-repeat;
position:absolute;
width:100%;
height: 25%;
z-index: 1;
}
address {
font-size: 12px;
color: #333;
text-align: left;
margin: 1% 2%;
float: right;
position: relative;
z-index: 2;
}
address p{
margin:0%;
}
p strong{
font-style:italic;
font-weight:bold;
}
#imgmenu {
background-image: url(../img/menu.png);
background-size:cover;
background-repeat: no-repeat;
text-align: center;
position: absolute;
float: left;
width: 100%;
height: 5%;
margin-top:11.5%;
z-index: 3;
}
#imgmenu ul {
padding:0px;
margin:0px -10px 0px 40px;
background-color:none;
list-style:none;
}
#imgmenu ul li {
display: inline;
}
#imgmenu ul li a {
padding: 0px 100px;
display: inline-block;
background-color:none;
color: #333;
text-decoration: none;
border-bottom:0px solid #000000;
}
a:hover {
background-color: #6E6E6E;
font-weight: bold;
font-size: 18px;
margin: 0% 0% 0% 0%;
}
/*===================
Corpo da página
====================*/
#empresa{
width:40%;
font-color: grey;
position:absolute;
margin: 12% 0% 0% 2%;
z-index:6;
background-color:grey;
}
#produtos{
float: left;
width:50%;
font-color: grey;
padding: 0% 0% 0% 1%;
position:absolute;
margin: 12% 0% 0% 50%;
z-index:6;
background-color:grey;
}
#produtos ul li {
margin-top:20px;
margin-bottom:15px;
}
hr {
width: 30%;
}
#copyright{
width:100%;
font-size:10px;
position:absolute;
bottom:0;
text-align:center;
padding-bottom:5px;
}