Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Rodapé da página blog não está aparecendo

o titulo já é auto explicativo, o código :

<footer class="rodape-pagina">
            &copy; João da Silva 2014
</footer>

não apresenta nenhum resultado na página blog. Na bio aparece normalmente.

código blog:

<!DOCTYPE html>
<html>
    <head>
        <title>Blog - João da Silva</title>
        <meta charset="utf-8">
        <link rel="icon" href="img/favicon.png">
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="bio.css">
        <link rel="stylesheet" href="rodape-footer.css">
        <link rel="stylesheet" href="cabecalho-navegacao.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">Blog</h1>

            <div class="container">
                <article class="artigo">
                    <h2 class="subtitulo-texto">O essencial de design responsivo</h2>
                    <time datetime="2014-07-01">01 de julho de 2014</time>

                    <p>Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?</p>

                    <a class="leia-mais" href="#">Leia mais</a>
                    <footer>Tags: <a href="#">design responsivo</a>, <a href="#">mobile</a>, <a href="#">css</a></footer>
                </article>

                <article class="artigo">
                    <h2 class="subtitulo-texto">Por que fazer páginas acessíveis?</h2>
                    <time datetime="2014-06-15">15 de junho de 2014</time>

                    <p>Tem se falado cada vez sobre acessibilidade na web. Há diversas técnicas e diretivas a serem seguidas, inclusive da própria W3C. Mas vale a pena investir nisso?</p>

                    <a class="leia-mais" href="#">Leia mais</a>
                    <footer>Tags: <a href="#">acessibilidade</a>, <a href="#">boas práticas</a></footer>
                </article>

                <article class="artigo">
                    <h2 class="subtitulo-texto">JavaScript não obstrusivo</h2>
                    <time datetime="2014-05-28">28 de maio de 2014</time>

                    <p>JavaScript é uma linguagem essencial hoje em dia para criar páginas ricas, interativas e dinâmicas. Porém, há alguns cuidados que devem ser tomados ao colocarmos código JavaScript em nossas páginas.</p>

                    <a class="leia-mais" href="#">Leia mais</a>
                    <footer>Tags: <a href="#">javascript</a>, <a href="#">boas práticas</a></footer>
                </article>
            </div>
        </main>
        <img src="img/eu.jpg" alt="Foto de João da Silva" 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-sociais">
                <li>
                    <a class="github" href="https://github.com/joaodasilva">
                        Github
                    </a>
                </li>
                <li>
                    <a class="twitter" href="https://twitter.com/joaodasilva">
                        Twitter
                    </a>
                </li>
                <li>
                    <a class="linkedin" href="https://br.linkedin.com/pub/joão-da-silva/32/4/508">
                        LinkedIn
                    </a>
                </li>
            </ul>
        </aside>

        <footer class="rodape-pagina">
            &copy; João da Silva 2014
        </footer>

    </body>
</html>

código css do rodapé:

#rodape-pagina/*footer*/
{
    background-color: #000;
    color: #F2FFFC;
    padding: 10px;/* espaço interno*/
    clear: both;
    position: fixed;
    bottom: 0;
    width: 100%
}
2 respostas

Olá Meu caro.

Tente colocar uma altura fixa no seu rodapé, o HTML precisa interpretar isso em elementos fixos ou flutuantes ;)

Exemplo:

#rodape-pagina{height:35px}

solução!
.rodape-pagina/*footer*/

Para fazer referência à classe não deveria ser usado "." ao invés de "#"?

Também não seria bom um espaço antes do comentário para uma melhor identação?