Quando o botão fica na área do footer se a barra de rolagem não estiver até o final, ele não funciona. É como se ele estivesse atrás do footer. Como resolvo isso? Obrigado
12
respostas
respostas
Footer atrapalha o botão...
Fala aí Tiago, beleza? Poderia mandar um print mostrando o problema? Ficaria mais fácil para tentar ajudar.
Fico no aguardo.
Opa... beleza Matheus.. mas como mando print por aqui?
Oi Tiago manda o seu html e css que já da pra tentar. Fico no aguardo.
Para mandar imagens, você vai precisar subir elas em algum hospedador, recomendo o Cloudinary.
Depois, você pega o link da imagem e usa a seguinte marcação no editor:
Fico no aguardo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>João da Silva - Biografia</title>
<link rel="icon" href="imagens/favicon.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/site.css">
<link rel="stylesheet" href="css/contato.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
</head>
<body>
<main>
<h1 class="titulo-principal">Contato</h1>
<div class="container">
<form>
<fieldset>
<legend>Seus dados</legend>
<label for="nome" class="com-icone">Nome</label>
<input id="nome" type="text" name="nome-contato" required autofocus
pattern="[A-Za-z ']{4,}" title="O nome precisa ter pelo menos 4 caracteres">
<label for="email" class="com-icone">E-mail</label>
<input id="nome" type="email" name="email-contato" required placeholder="Digite seu E-mail">
</fieldset>
<fieldset>
<legend>Assunto</legend>
<label>
<input type="radio" name="assunto" value="Blog">
Blog
</label>
<label>
<input type="radio" name="assunto" value="Serviço">
Serviço
</label>
<fieldset>
<input type="radio" name="assunto" value="Outro" id="outro">
<label for="outro">Outro</label>
<input type="text" name="outro-assunto">
</fieldset>
</fieldset>
<label for="mensagem">Mensagem</label>
<textarea name="msg" id="mensagem" cols="60" rows="10" placeholder="Digite aqui sua mensagem"></textarea>
<button type="submit">Enviar mensagem</button>
</form>
</div>
</main>
<img src="imagens/eu.jpg" alt="Minha foto" class="minha-foto">
<aside class="navegacao-site">
<h1>João da Silva</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="bio.html">Sobre mim</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
<ul class="icones-redes-sociais">
<li>
<a href="https://github.com/joaodasilva" class="github" data-tooltip="Veja meus projetos opensource">
Github
</a>
</li>
<li>
<a href="https://twitter.com/joaodasilva" class="twitter" data-tooltip="Siga-me no Twitter">
Twitter
</a>
</li>
<li>
<a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" class="linkedin" data-tooltip="Veja meu currículo">
LinkedIn
</a>
</li>
</ul>
</aside>
<footer class="rodape-pagina">
© João da Silva 2014
</footer>
</body>
</html>.rodape-pagina {
background-image: radial-gradient(ellipse at bottom left, rgba(60, 29, 61, 0.8),
rgba(60, 29, 61, 0.8) 65%,
black 65%,
black 70%,
transparent 70%,
transparent);
background-size: 25% 100%;
background-repeat: no-repeat;
color: #F2FFFC;
padding: 20px;
clear: both;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
}button {
border: 0;
padding: .5em 1em;
font-family: "Open Sans Condensed", sans-serif;
background-color: #3C1D3D;
color: white;
font-size: 1.2em;
margin-left: auto;
margin-top: 1em;
display: block;
}
button:hover,
button:focus {
background-color: #8C1D3D;
}
Oi Tiago acredito que ficou assim pq você tá trabalhando com uma resolução bem menor, ou existe pouco conteúdo nessa página, existem várias formas de resolver essa questão, uma delas seria distanciar o meu conteúdo principal do meu footer colocando uma margem embaixo.
Fazendo assim:
main {
width: calc(100% - 0.9 * 300px);
float: left;
padding-bottom: 80px;
margin-bottom: 2rem;
}
Espero ter ajudado e bons estudos.
Fala ai Maison, ele já tem essa margem. O problema é quando eu não termino de rolar toda a página para cima e o botão fica mais para baixo. Acredito que isso não deva acontecer.
Oi Tiago, não consigo imaginar como ta ficando aí no seu projeto, só aplicando uma margim botom no conteúdo principal ele subiu aqui no meu teste ficando distante do footer não sendo necessário rolar a página, poderia colocar esse seu projeto no Github ai testamos no mesmo arquivo, ou no seu Dropbox aí teríamos a mesma visão.
Fala aí Tiago, malz a demora, estava corrido.
Para resolver seu problema, coloca um padding-bottom no main.
<main class="container">
// ...
</main>
.container {
padding-bottom: 2rem;
}Dessa maneira, o footer vai ficar mais para baixo.
Espero ter ajudado.