Problema com ícones sociais no rodapé

Opa, Gustavo!

Vi que você usou uma outra classe, a rodape-icones-sociais. Nessa nova classe, você mudou para inline-block e ajustou o width e height para 40px na própria <ul> e não nos <a> dentro dela.

Faltou ainda o text-indent para fazer o image replacement.

Então, mude para:

.rodape-icones-sociais a {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-indent: -9999px;
}

Ainda não vai ficar perfeito, mas a gente discute por aqui.

Uma discussão que podemos fazer: será que não vale usar a própria icones-sociais também no rodapé?

Oi Gustavo,

Acredito que o problema seja no seu css, nesse seletor:

.rodape-icones-sociais {
    display: inline-block;
    width: 40px;
    height: 40px;
}

Na verdade o seletor deveria ser .rodape-icones-sociais a, ficando assim:

.rodape-icones-sociais a {
    display: inline-block;
    width: 40px;
    height: 40px;
}

Veja se resolve.

Então usei agora:

.rodape-icones-sociais  a {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-indent: -9999px;
}

Resolveu parcialmente, por que agora eu tenho uma linha branca embaixo do meu background cortando meus ícones. É como se eu não tivesse usado o reset.css. Os ícones deram uma mexida de lugar também estão mais baixo que o normal.

Alexandre, acho que não dá pra usar os icones-sociais no rodapé pois estou querendo usar a propriedade float: right neles. O que afetaria os ícones do menu de navegação.

Você pode usar a classe icones-sociais no rodapé e adicionar apenas as coisas específicas dos ícones no rodapé na classe rodape-icones-sociais.

Não vai mudar nada na classe icones-sociais e vai reaproveitar o seu código. Invés de colocar o float: right na classe icones-sociais, você o coloca na classe rodape-icones-sociais.

Esta imagem abaixo representa o rodapé que você deseja ?

Se for, consegui esse resultado com o seguinte HTML:

<footer class="rodape-do-site"> <!-- tag de semantização para rodapés -->

     <!-- O E comercial (&) possibilidade obter algumas entidades do HTML, símbolos difíceis de serem digitados. -->

    <ul class="icones-redes-sociais">
        <li> © João da Silva 2014 </li>
        <li> <a href="https://github.com/git-joaodasilva" class="github">                            Github   </a> </li>
        <li> <a href="https://twitter.com/twitter-joaodasilva" class="twitter">                      Twitter  </a> </li>
        <li> <a href="https://br.linkedin.com/pub/linkedin-joao-da-silva/32/4/508" class="linkedin"> LinkedIn </a> </li>
    </ul>

</footer>

Já o CSS é literalmente o mesmo dos ícones sociais do menu de navegação:

.icones-redes-sociais li
{
    display: inline-block;
    margin-top: 10px;
}

.icones-redes-sociais li a
{
    width: 40px;
    height: 40px;
    display: block;
    text-indent: -9999px;
}

Consegui o mesmo resultado daquela imagem utilizando a propriedade float também. Porém usei float: left para todo mundo dentro do <footer>:

HTML:

<footer class="rodape-do-site"> <!-- tag de semantização para rodapés -->

    <p>© João da Silva 2014</p> <!-- O E comercial (&) possibilidade obter algumas entidades do HTML, símbolos difíceis de serem digitados. -->

    <ul class="icones-redes-sociais">
        <li> <a href="https://github.com/git-joaodasilva" class="github">                            Github   </a> </li>
        <li> <a href="https://twitter.com/twitter-joaodasilva" class="twitter">                      Twitter  </a> </li>
        <li> <a href="https://br.linkedin.com/pub/linkedin-joao-da-silva/32/4/508" class="linkedin"> LinkedIn </a> </li>
    </ul>

</footer>

CSS:

.icones-redes-sociais li
{
    display: inline-block;
    margin-top: 10px;
}

.icones-redes-sociais li a
{
    width: 40px;
    height: 40px;
    display: block;
    text-indent: -9999px;
}

.rodape-do-site
{
    background-color: #000;
    color: #F2FFFC;
}

.rodape-do-site p
{
    display: inline-block;
    float: left;
}

.rodape-do-site li
{
    float: left;
}

Se você quiser que os ícones das redes sociais fiquem lá do outro lado, é só você ir no código do seletor .rodape-do-site li e mudar o float: left para float: right.

Axell, eu consegui o efeito desejado mas só deu um problema que foi o da margem em baixo do rodapé. Como que eu coloco imagens nos comentários pra que eu possa mostrar como ficou ?

O site aceita código HTML no meio dos comentários.

Observe a caixa vermelha abaixo e como criei ela:

Boa, Axell! Valeu pela ajuda ao colega.

Gustavo, para inserir imagens, você pode usar a sintaxe do Markdown, que é assim:

![texto alternativo][http://link-da-imagem.jpg]

Para subir as imagens para a Web, você pode usar algum serviço como: - https://imgbb.com/ - https://paste.pics/