Solucionado
Olá, ao mudar a perspective para o body o meu footer com position fixed parou de funcionar, agora ele fica parado no meio da tela alguém sabe como as duas coisas estão relacionadas e o que eu posso fazer pra contornar a situação? Se alguém conseguir me explicar também um pouco melhor o que foi feito e como funcionou o efeito paralaxe que eu realmente não entendi seria de grande ajuda.
hoje, com a Alura e o Google Gemini
Fala aí, Guilherme! Tudo certo, cara? =)
Você poderia postar aqui seu código para darmos uma olhadinha? E se puder, manda um print de como ficou sua página...
Fábio
Opa eaí Fábio, eu fiz um html/css resumido (o que importa do original) aqui pra ficar mais fácil de entender,o css "palavras" não postei pois possui apenas o transform das mesmas, acontece o mesmo problema:
Aqui tem um print do original:https://drive.google.com/file/d/0B57LdFROlUQ8cDVsekJPdXozamM/view?usp=sharing
<!DOCTYPE html>
<html>
<head>
<title>Home - João</title>
<meta charset="utf-8">
<link rel="icon" href="imgs/favicon.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/teste2.css">
<link rel="stylesheet" href="css/palavras.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">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato|Shadows+Into+Light">
</head>
<body>
<main>
<header class="titulo-principal">
<ul class="palavras-header">
<li class="palavra-home eficiencia">Eficiência</li>
<li class="palavra-home boas-praticas">Boas práticas</li>
<li class="palavra-home codigo-limpo">Código limpo</li>
<li class="palavra-home css3">CSS3</li>
<li class="palavra-home html5">HTML5</li>
<li class="palavra-home javascript">JavaScript</li>
<li class="palavra-home acessibilidade">Acessibilidade</li>
<li class="palavra-home responsivo">Responsivo</li>
<li class="palavra-home otimizacoes">Otimizações</li>
<li class="palavra-home agilidade">Agilidade</li>
<li class="palavra-home design">Design</li>
</ul>
</header>
<div class="resto">
</div>
<footer class="rodape">
© Joao Da Silva 2014
</footer>
</main>
</body>
</html>.titulo-principal{
border-bottom: 0.5rem solid rgb(20,20,20);
background-color: #851944;
padding: 5.25rem;
height: 300px;
}
html,body{
height: 100%;
overflow-x: hidden;
}
body{
perspective: 6px;
perspective-origin: 50% 160px;
}
.palavras-header li {
font-size: 400%;
}
.palavras-header, .titulo-principal {
transform-style: preserve-3d;
}
.palavras-header{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.titulo-principal {
font-size: 100%;
position: relative;
}
.titulo-principal img{
border-radius: 10% 50% 10% 50%/50% 10% 50% 10%;
height: 12rem;
}
.palavra-home{
font-weight: bold;
position: absolute;
color: #D5447E;
font-size: 1rem;
font-family: "Shadows Into Light",cursive ;
}
main{
width: 100%;
float: none;
}
.legenda-h1{
margin: 0;
font-size: 1rem;
text-align: center;
}
.resto{
width: 100%;
height: 1000px;
background-color: antiquewhite;
}
.rodape{
width: 100%;
background-color: black;
color: white;
height: 4rem;
position: fixed;
bottom: 0;
}
Boa tarde, Guilherme! Belezinha? =)
Desculpe a demora em respondê-lo... Mas você conseguiu resolver esse problema?
Eu dei uma olhada aqui no seu código e vi que você fez o código um tanto quanto diferente do curso... Só tem que ver se essas diferenças estão alinhadas... =)
Por exemplo, seus CSSs são:
- reset.css;
- teste2.css;
- palavras.css.
Mas no curso chamamos de reset.css, site.css e bio.css... Você chegou a verificar se os três estão iguais?
Fábio
Já tentou tirar o footer dentro do main?
Olá julio, já tentei sim, inicialmente até estava fora do main mesmo, só ao isolar o html e css necessários que coloquei o footer sem querer dentro do main.
E Fábio, como citado anteriormente o html e css etá diferente do exercício pois retirei o que era desnecessário para analisar o problema, e agradeceria se você parasse de marcar meus tópicos como solucionados se não foram de fato.