0
good afternoon!
I’m training to build a website and, when I minimize the screen, the menu bar that is an image moves and goes out of position (it goes up). I’d like it to stay fixed and adjust to the screen size.
Note: I’m not making a responsive website yet. This will be the next step.
Could you help me with a tip? Thank you.
SEE THE 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 THE 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;
}
Just a hint (it has nothing to do with the problem itself): put the
<meta charset="UTF-8">before the<link .css>because then you won’t need to put@charset "UTF-8";nos . css.– Sam
Wilson, please don’t misunderstand me, but I’ll give you a hint, because your site is practically unusable... I see that you are starting, and value in % and position:Bsolute do not get along very well. Avoid Absolute position, and use %values only to create your column grid and not to place height on elements like Heade and menu... From a good study in Flexbox and Grid Layout that will help you a lot. Just helping you with this problem now will not solve the amount of problems you will have in the future with this layout. Try to start again from the beginning and the right way, it’s just a hint
– hugocsl
Dear Hugocsl, I really appreciate your opinion. It certainly helped me a lot! I will study your indications and, before your evaluation, I believe I should really redo the site. Thank you.
– Wilson Junior
@hugocsl is right. Redoes and goes from time to time validating in this validator W3C. Then you can see any errors and you keep correcting and at the same time learning. Although your HTML didn’t point out any errors in the validator. The same main problem is more in CSS.
– Sam
@sam that’s right. I did html and did not accuse error. I will redo. Thank you even for your attention too... I thank you very much!
– Wilson Junior
Wilson is that it will not help us help you with this question problem if the rest of the site also has several problems, so since it is starting it is better to start right right :), and as the questions arise will ask here that we help, I must leave to solve problem after you have advanced much the work. If you hold onto something, it will solve it soon, because it may bring you problems in the future. Success and good luck there!
– hugocsl