Como o footer está pegando 100% height no exemplo dele, e me parece estar fixo sempre embaixo, ao redimendiocar o meu fica tipo no meio da página, o que pode ser isso?
4
respostas
respostas
Cabeçalho redimenciona na altura.
Samuel,
Coloca seu código no Github ou outro repositório.
Sem ver seu código fica difícil dizer.
O seu footer está fora da tag main? Porque no começa definimos a tag main com um tamanho específico.
Meu cidugi HTML
<!DOCTYPE html lang = "PT-BR">
<html>
<head>
<meta charset = "UTF-8">
<title>Projeto novo</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="caixa">
<h1><img src="img\banner.png" id="logo"></h1>
<nav>
<ul>
<li><a href="index.html" class="header-link">Home</a></li>
<li><a href="sobre.html" class="header-link">Sobre</a></li>
<li><a href="contato.html" class="header-link">Contatos</a></li>
<button type="submit" class="btn-acessar"><a href="login.html">Acessar</a></button>
</ul>
</nav>
</div>
</header>
<main>
<ul class="produtos">
<li>
<h2>Beneficios</h2>
<img src="img/money.png" id="img-money">
<p class="produto-descricao">Para mais informações entre em contato.</p>
<p class="preco-produto">Consulte valor</p>
</li>
<li>
<h2>Beneficios</h2>
<img src="img/money.png" id="img-money">
<p class="produto-descricao">Para mais informações entre em contato.</p>
<p class="preco-produto">Consulte valor</p>
</li>
<li>
<h2>Beneficios</h2>
<img src="img/money.png" id="img-money">
<p class="produto-descricao">Para mais informações entre em contato.</p>
<p class="preco-produto">Consulte valor</p>
</li>
</ul>
</main>
<footer>
<!-- <img src="img/banner.png" id="logo"> -->
<ul class="footer-contatos">
<li>
<h3>Contatos</h3>
<p>Celular: (51) 98135-6279</p>
<p>Email: controlservice@gmail.com</p>
</li>
</ul>
</footer>
</body>
</html>i
body{
background: white;
}
header{
background: url("img/fundo-rodape.jpg");
border-bottom: orange solid 4px;
/* width: 1080px; */
}
.caixa{
width: 940px;
position: relative;
margin: 0 auto;
}
nav{
position: absolute;
right: 0;
top: 65px;
}
nav li{
display: inline;
font-size: 30px;
margin-left: 30px;
}
.header-link{
text-transform: uppercase;
color: white;
font-weight: bold;
text-decoration: none;
}
.header-link:hover{
color: orange;
font-size: 35px;
}
.btn-acessar{
/* height: 40px; */
vertical-align: top;
margin-top: 2px;
margin-left: 30px;
height: 30px;
width: 70px;
border: solid 2px orange;
font-weight: bold;
text-align: center;
background: black;
color: orange;
}
.btn-acessar a{
text-decoration: none;
color: orange;
}
.btn-acessar:hover{
font-size: 20px;
width: 90px;
background: orange;
}
.btn-acessar:hover a{
color: black;
}
.btn-acessar:active{
color: white;
border: 2px solid orange;
}
#logo{
height: 100px;
width: 120px%;
padding: 30px;
}
.produtos{
width: 940px;
margin: 0 auto;
padding: 30px 0;
}
#img-money{
width: 120px;
height: 110px;
margin-top: 60px;
}
.produtos h2{
font-size: 25px;
font-weight: bold;
text-transform: uppercase;
}
.produto-descricao{
font-size: 18px;
margin-top: 30px;
}
.preco-produto{
font-weight: bold;
font-size: 25px;
margin-top: 60px;
}
.produtos li{
display: inline-block;
text-align: center;
width: 30%;
vertical-align: top;
/* background: orange; */
margin: 0 1.5%;
padding: 30px 20px;
box-sizing: border-box;
border-color: black;
border-width: 2px;
border-style: solid;
border-radius: 20px;
}
.produtos li:hover{
border-color: orange;
}
.produtos li:active{
border-color: white;
}
.produtos li:hover h2{
font-size: 30px;
}
.produtos li:hover p{
font-size: 25px;
}
footer{
text-align: center;
background: url("img/fundo-rodape.jpg");
border-top: orange solid 4px;
padding: 20px;
/* width: 940px; */
}
.footer-contatos{
color: white;
}
.footer-contatos li{
display: inline-block;
font-size: 20px;
color: white;
}
.footer-contatos h3{
text-transform: uppercase;
font-weight: bold;
font-size: 25px;
color: orange;
text-transform: uppercase;
font-weight: bold;
}
main {
width: 940px;
margin: 0 auto;
}
form {
margin: 40px 0;
}
form label {
display:block;
font-size: 20px;
margin: 0 0 10px;
}
form input {
display: block;
margin: 0 0 20px;
padding: 10px 25px;
width: 50%;
}
textarea{
margin-bottom: 20px;
}Bom dia Samuel. Esse problema de dimensionamento ocorre quando vamos ver a responsividade né? Se for isso está faltando as medias querys para mudar a lista que está com display inline para block