0
Good personal evening I am with a problem I am learning to make a site, I am with some doubts related to grids system I gave a researched not understood very well so I came here in the forum , this happening when I zoom on the page things leave the place
I am in the tab who we are on the menu but it happens on all pages only the top menu and the bottom , someone can help me or indicate me something I can improve or study.
@charset "utf-8";
/* CSS Document */
#topo {
background:url(../imagens/topo2etrelas2.png);
border-left:1px solid #000;
border-right:1px solid #000;
position:inherit;
width:1024px;
height:190px;
margin:auto;
}
#fundoinicial {
background: #FFF;
width: 1024px;
height: 500px;
margin: auto;
border-right: 1px solid #000;
border-left: 1px solid #000;
}
h3 {
font-family:"Arial Black", Gadget, sans-serif;
font-size:25px;
position:absolute;
top:271px;
left:618px;
text-shadow: #60365E 0px 0px 5px;
}
p1 {
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
position:absolute;
width:1000px;
top:350px;
left:179px;
text-align:center;
}
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
width:300px;
position:absolute;
top: 300px;
left: 512px;
margin:auto;
}
#baixo {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
width:1050px;
position:absolute;
top: 250px;
left: -25px;
margin:auto;
}
#menufundo {
background:#60365e;
border:1px solid #000;
position:relative;
width:1024px;
height:28px;
margin:auto;
}
#ul li a{
font-family:"Comic Sans MS", cursive;
font-style:normal;
list-style-type:none;
display: inline;
font-size:19px;
line-height:0px;
padding:10px;
margin:4px 0 0 52px;
color:#FFF;
text-decoration:none;
float:left;
}
#ul li a:hover{
text-shadow:0px 0px 0px black,
0px 0px 0px black,
0px 0px 0px black,
0px 0px 0px black;
font-size:19px;
color:black;
}
.rodape {
background: url(../imagens/rodape.png);
margin: auto;
position: absolute;
width: 1056px;
height: 99px;
left: 132px;
top: 704px;
}
h1 a{
font-family: "Comic Sans MS", cursive;
font-size: 19px;
color: #FFF;
text-decoration: none;
text-shadow: 1px 1px black;
position: absolute;
left: 176px;
top: 714px;
}
p a{
font-family: "Comic Sans MS", cursive;
font-size: 15px;
color: #FFF;
text-decoration: none;
text-shadow: 1px 1px black;
position: absolute;
left: 175px;
top: 743px;
}
.facebook{
width: 32px;
right: 32px;
position: absolute;
top: 25px;
left: 515px;
opacity: 0.5;
filter: alpha(opacity=50);
}
.facebook:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.trabalhe {
font-family: "Comic Sans MS", cursive;
font-size: 19px;
color: #FFF;
text-decoration: none;
text-shadow: 1px 1px black;
position: absolute;
left: 986px;
top: 729px;
width: 159px;
}
.email {
font-family: "Comic Sans MS", cursive;
font-size: 15px;
color: #FFF;
text-decoration: none;
text-shadow: 1px 1px black;
position: absolute;
margin-top: 20px;
left: 987px;
top: 736px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alfatec</title>
<link rel="shortcut icon" href="imagens/ico.png" type="imagem/x-png" />
<link href="css/resetquemsomos.css" rel="stylesheet" type="text/css" />
<link href="css/estiloquemsomos.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery/jquery-migrate-3.0.0.min.js" ></script>
<style type="text/css">
body {
background-image: url(imagens/projeto/imagens/fundo.jpg);
}
</style>
</head>
<body>
<div id="topo"></div><!--div final topo-->
<div id="menufundo">
<nav id="ul">
<ul>
<li><a href="index.html" title="Página Inicial">Página Inicial</a></li>
<li><a href="quem_somos.html" title="Quem Somos">Quem Somos</a></li>
<li><a href="cobertura.html" title="Áreas de Cobertura">Áreas de Cobertura</a></li>
<li><a href="servicos.html" title="Serviços">Serviços</a></li>
<li><a href="fale_conosco.html" title="Fale Conosco">Fale Conosco</a></li>
</ul>
</nav>
</div>
<div id ="fundoinicial">
<h3>Alfatec</h3>
<hr />
<p1> A empresa (nome da empresa) foi fundada no ano de (ano da fundação, por exemplo, 1998) na cidade (nome da cidade) pelo Senhor (nome do fundador) e sua principal missão é oferecer soluções para empresas de e-commerce e Internet. Atualmente contamos com XX funcionários e nossos principais clientes são (coloque aqui o que sua empresa vende ou oferece).
2- Fundada em (ano da fundação, por exemplo, 1998) pelo Senhor (nome do fundador), a principal missão da empresa (nome da empresa) é oferecer (coloque aqui o que sua empresa vende ou oferece). Nossos principais clientes são (nome dos clientes atuais) e atualmente contamos com XX funcionários.
3- A missão da empresa (nome da empresa) é fornecer soluções para empresas de e-commerce e Internet. Nossos principais clientes são (coloque aqui o que sua empresa vende ou oferece). Fundada em (ano da fundação, por exemplo, 1998) pelo Senhor (nome do fundador), na cidade (nome da cidade), atualmente contamos com (quantidade de pessoas que trabalham na empresa) funcionários.
A empresa (nome da empresa) foi fundada no ano de (ano da fundação, por exemplo, 1998) na cidade (nome da cidade) pelo Senhor (nome do fundador) e sua principal missão é oferecer soluções para empresas de e-commerce e Internet. Atualmente contamos com XX funcionários e nossos principais clientes são (coloque aqui o que sua empresa vende ou oferece).
A empresa (nome da empresa) foi fundada no ano de (ano da fundação, por exemplo, 1998) na cidade (nome da cidade) pelo Senhor (nome do fundador) e sua principal missão é oferecer soluções para empresas de e-commerce e Internet. Atualmente contamos com XX funcionários e nossos principais clientes são (coloque aqui o que sua empresa vende ou oferece).
2- Fundada em (ano da fundação, por exemplo, 1998) pelo Senhor (nome do fundador), a principal missão da empresa (nome da empresa) é oferecer (coloque aqui o que sua empresa vende ou oferece). Nossos principais clientes são (nome dos clientes atuais) e atualmente contamos com XX funcionários. </P>
<div id="baixo"/>
</div>
</div>
<div class="rodape">
<a href="https://www.facebook.com/Alfatec-Autorizada-Electrolux-1737242946511224/" title="Facebook" target="_blank">
<img id= "facebook" src="imagens/facebook-logo (2).png" alt="FaceBook" width="24" class="facebook" >
</a>
</div>
Your HTML has no bootstrap and no responsiveness
– Guilherme Nascimento
could help me or show me somewhere I can learn ?
– Caio Wesley
Caio see if this helps: https://answall.com/a/129074/3635 and then read doc: http://getbootstrap.com/css/
– Guilherme Nascimento
Thank you very much !!
– Caio Wesley