Criar rodapé footer

Adriano Freitas · 19 de novembro de 2014

Olá, estou trabalhando na seguinte página HTML5 e o rodapé não quer aparecer de jeito nenhum:

<!doctype html><html lang='pt-BR'><head><style type="text/css">body {font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana,sans-serif;line-height: 1.6;}body {background: #FFF1D6 url(images/noise.png);font-family: "Lucida Grande", "Lucidasans-serif";line-height: 1.6;}.container {margin: 0 auto;width: 960px;<div class='footer'><p>Parte do livro "HTML5 e CSS3: Domine a Web do futuro"</p></div>.footer{font size: 12px;text align: center;}}.place {border-color: #CCC #999 #999 #CCC;border: 1px solid #CCC;margin-bottom: 20px;padding: 110px;}.place h2 {border-botton: 1px dashed #7E9F19;margin: 0;}.place a {color: #2C88A7;font-weght: bold;}.place img {border: 1px solid #7E9F19;float: left;margin: 10px 10px 0 0;padding: 2px;}.place img {border: 1px solid #7E9F19;float: left;margin: 10px 10px 0 0;padding: 2px;}h1 a {color: #7E9F19;text-decoration: none;}h1 a:hover {background-color: #7E9F19;color: FFF;}}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>O que eu mais gosto em São Paulo</title><link rel="stylesheet" href="normalize.css"><script src="prefixfree.min.js"></script></style></head><body><!-- O seu HTML vem aqui! --><div class='container'><h1><a href=''>O que eu mais gosto em São Paulo</a></h1><div class='place'><h2>Passear na Avenida Paulista!</h2><img src=' imagens/paulista.jpg' alt="O céu da avenida Paulista,foto por http://www.flickr.com/photos/jairo_abud"><p>Um dos principaia centros financeiros da cidade, a avenida Paulistatambém possui diversas opções de entretenimento. Endereço do Museude Arte de São Paulo, <em>MASP</em>, do Teatro Gazeta e muitos outros,a região é de fácil acesso graças as diversas linhas de ônibus quecruzam a avenida e a linha de metrô que passa por baixo dela.</p><p>A Avenida Paulista sempre é assunto. O que será que estão falando arespeito no <a href='https://twitter.com/#!/search/AvenidaPaulista'target='_blank'>Twitter</a>?</p></div><div class='place'><h2>Os bares da Vila Madalena</h2><img src=' imagens/bares.jpg' alt="A varanda do Armazém Piola,foto por Fernando Moraes"><!-- os parágrafos vem aqui... --><p>Depois de um dia de trabalho, nada melhor do que um bom chopp, umpetisco e uma conversa em uma mesa de bar. Opções de sobra na regiãodas ruas Aspicuelta, Fradique Coutinho e Wisard.</p><p>Veja quais os melhores bares e restaurantes da região no<a href='http://vejasp.abril.com.br/busca?chn=bares&qu=&nbh=Pinheiros%20/%20Vila%20Madalena' target='_blank'>Guia da VEJA São Paulo.</a></p></div><div class='place'><h2>O Parque do Ibirapuera</h2><img src=' imagens/parque.jpg' alt="O Parque do Ibirapuera,por http://www.flickr.com/photos/soldon/"><!-- os parágrafos vem aqui... --><p>Um dos cartões postais da cidade, o parque dispõe de mais de 1,5 km{^2}de área verde, lagos artificiais e pistas de cooper e ciclismo. E seisso não fosse o suficiente, o parque costuma ser palco de diversoseventos culturais ao longo do ano.</p><p>Veja no <a href='http://goo.gl/maps/HoH8'target='_blank'>mapa</a>como chegar ao parque.</p></div><script src="jquery.min.js"></script></div></body></html>

O livro fala pra botar no elemento container, mas nem dentro nem fora dele aparece o rodapé.

Alguma dica?

Valeu!

DiF · 19 de novembro de 2014

Olá,

seu código possui alguns erros.

Começando pelo css.

Sem necessidade, você declarou duas vezes as regars do body.

Dentro da classe container, você inseriu seu "rodapé" em tags HTML. isso é totalmente errado.

Quando seu livro mandou inserir dentro do container ele estava se referindo ao elemento DIV com a classe container, ou seja, lá em baixo antes de fechar o </div>

Outro erro que existe é o erro de semântica, precisas fechar as tags IMG com a contra-barra.

E por fim, sempre deixe seu código edentado.. assim você mantém a organização e compreenderá melhor.

http://jsfiddle.net/w6vyeuyg/

Adriano Freitas · 19 de novembro de 2014

Olá,

seu código possui alguns erros.

Começando pelo css.

Sem necessidade, você declarou duas vezes as regars do body.

Dentro da classe container, você inseriu seu "rodapé" em tags HTML. isso é totalmente errado.

Quando seu livro mandou inserir dentro do container ele estava se referindo ao elemento DIV com a classe container, ou seja, lá em baixo antes de fechar o </div>

Outro erro que existe é o erro de semântica, precisas fechar as tags IMG com a contra-barra.

E por fim, sempre deixe seu código edentado.. assim você mantém a organização e compreenderá melhor.

http://jsfiddle.net/w6vyeuyg/

Olá, amigo. Obrigado pela ajuda. O rodapé realmente apareceu. Mas eu não estou conseguindo centralizar. Onde eu coloco exatamente o:

.footer{font-size: 12px;text-align: center;}

valeu de novo!

DiF · 19 de novembro de 2014

Não centraliza, pois o css tem vários erros.( percebi só agora)

Por exemplo em uma das regras você coloca(veja o destaque em vermelho):

font-weght , onde na verdade é font-weight

border-botton, onde na verdade é border-bottom

font size, onde na verdade é font-size

text align, onde na verdade é text-align

E por fim, na regra da classe container, esqueceu de fechar a chave.

Veja o exemplo corrigido: http://jsfiddle.net/w6vyeuyg/3/

É por isso que eu digo, se manter a edentação do código( isso vale para css, javascript, html, php.. e qualquer outra linguagem), é difícil você se perder ou errar alguma coisa.. na questão de semântica.

Como você está estudando html5, recomendo pesquisar sobre os elementos: header, footer, section e article.

ps: o section, não substitui o DIV. Na verdade, é semanticamente correto utilizar o section dentro de um DIV para separar.. e o article dentro do section. O footer é um elemento criado para rodapés.. pra evitar de criar um div class="footer".