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

Rodapé com ícones sociais.

(Meu HTML do Rodapé)

<footer class="rodape-prin">
        <ul class="icones-sociais">
            <li><a href="https://twitter.com/oOoArcanjooOo" target="_blank"><img src="Icones/twitter.png" alt="Icone do Twitter"></a></li>
            <li><a href="https://www.linkedin.com/in/patrick-ant%C3%B4nio-santos-oliveira-9b2026150/" target="_blank"><img src="Icones/linkedin.png" alt="Icone do Linkedin"></a></li>
            <li><a href="https://github.com/FROST-BR" target="_blank"><img src="Icones/github.png" alt="Icone do GitHub"></a></li>
        </ul>
        &copy; Patrick Antônio 2017  
        </footer>

==========================================================================================================

(Meu CSS do Rodapé)

.rodape-prin
{
    background-color:  rgb(0, 0, 0);       
    clear: both;
    padding: 28px;         
    color: rgb(250,255,250);
    font-size: 15px;
    font-family: "arial", sans-serif;
}

.icones-sociais li
{
    display: inline-block;
    float: right;
    width: 40px;
    height: 40px;
}

================================================================

O problema é que na página do site os ícones ficam a direita, mas não ficam alinhados com o CopyRight, é como se um pedaço dos ícones ficassem no padding, gostaria de saber como deixo os icones no centro assim como o CopyRight. (Espero que eu tenha conseguido interpretar meu problema.)

8 respostas

Oi Patrick.

Você pode formatar seu código HTML usando "Inserir Código"? Você colou o HTML e parece que ele renderizou...

Abraços!

Desculpe ^^ erro meu !!! Modifiquei !!!

Patrick, você deseja alinhar verticalmente ou horizontalmente?

Horizontalmente, queria mais ou menos assim:

© Patrick Antônio 2017 -----(Float: Right nos ícones)------- ícones

Os ícones ficam na direita, porém, ficam abaixo do copyright, eles não ficam alinhados na mesma linha.

solução!

Oi Patrick!

Não sei se é o que você quer, mas veja nesse link:

https://jsfiddle.net/Lfj3xxnd/

Basicamente coloquei float: left no Copyright e no <ul> e coloquei valores para a largura em porcentagem para o Copyright (que coloquei dentro de um span para facilitar) e para a lista de ícones. Removi o padding do footer e troquei para height e alinhei o texto verticalmente usando line-height do mesmo valor que o height do footer.

Você pode alterar o alinhamento dos ícones aumentando/diminuindo a largura do Copyright.

Espero que tenha entendido!

Tomás e Patrick,

Vocês podem alterar apenas o display dos elementos, conforme este Link, basta ter as linhas abaixo que ele irá se comportar corretamente:

footer {
    line-height: 50px;
    height: 100px;
    background: lightgray;
    padding: 28px;
}

footer ul {
    float: right;
    display: table;
}

footer ul li {
    display: table-cell;
    vertical-align: middle;
    padding: 10px;
}

Espero ter ajudado.

Abraços!

Muito obrigado a todos !!! Deu certo !!!

Disponha Patrick!

O Luiz Fernando também deu uma dica bastante boa, usando até menos código se preferir.

Abraços!