Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Nem tudo é o que parece (dúvida CSS)

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Nem tudo é o que parece e atividade Nem tudo é o que parece

por Juliana Akemi Kondo Graña
| 271.4k xp | 6 posts

Boa tarde..

Estou seguindo exatamente o que o professor pede, inclusive fiz a mudança das imagens que estavam no código HTML para o CSS. Porém o meu não está dando certo :/... As imagens pararam de ficam inline-block e está com os links por cima e repetidas diversas vezes.. 

.icones-redes-sociais li {
    display: inline-block;
}

.icones-sociais a {
    display: inline-block;
    margin: 10px;
}

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

.github{
    background-image: url(github.png);
}

.twitter{
    background-image: url(twitter.png);
}

.linkedin {
    background-image: url(linkedin.png);
}
      <aside>
            <nav>
                <img src= "eu.jpg">
                <h1>João da Silva</h1>
                <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="www.github.com/joaodasilva">Github</a></li>
                <li><a class="linkedin" href="www.linkedin.com/joaodasilva">Linkedin</a></li>
                <li><a class="twitter" href="www.twitter.com/joaodasilva">Twitter</a></li>
            </ul>
        </aside>

    <footer>
        &copy; João da Silva 2018
        <ul class="icones=sociais social-rodape">
                <li><a class="github" href="www.github.com/joaodasilva">Github</a></li>
                <li><a class="linkedin" href="www.linkedin.com/joaodasilva">Linkedin</a></li>
                <li><a class="twitter" href="www.twitter.com/joaodasilva">Twitter</a></li>
            </ul>
    </footer>
</body>

Att.

5 respostas
por Giovane Santos Silva
| 510k xp | 6 posts
Desenvolvedor de front-end

Boa tarde juliana tudo bem?

para lidar com o problema que tal tentar: 

.github{
    background-image: url("github.png");
    background-repeat: no-repeat;
}

.twitter{
    background-image: url("twitter.png");
    background-repeat: no-repeat;
}

.linkedin {
    background-image: url("linkedin.png");
    background-repeat: no-repeat;
}

E verifique o caminho da imagen, espero ter ajudado!

solução!
por Felipe Nascimento
| 481k xp | 657 posts
Instrutor

Oi Juliana tudo certo ?

Reparei que você repetiu a chamada dos ícones, você chama uma vez dentro da <aside></aside> e outra vez dentro do <footer></footer>

Outra coisa que reparei é que declarando a classe do rodapé com sinal de igual class="icones=sociais"

No CSS estamos fazendo a alteração no rodapé como está duplicado está interferindo nas outras imagens.

O seu código corrigido seria

HTML:

<aside>
            <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-redes-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">
            © João da Silva 2014
        </footer>

CSS: 

.rodape-pagina {
    background-color: #000;
    color: #F2FFFC;
}
.icones-redes-sociais li {
    display: inline-block;
}

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

.github {
    background-image: url(github.png);
}

.twitter {
    background-image: url(twitter.png);
}

.linkedin {
    background-image: url(linkedin.png);
}
por Juliana Akemi Kondo Graña
| 271.4k xp | 6 posts

Boa noite Giovane,

As imagens pararam de repetir :) Mas ainda estão em formato de lista (uma em cima da outra) e ainda não consegui por elas lado a lado.

por Juliana Akemi Kondo Graña
| 271.4k xp | 6 posts

Obrigada pela ajuda :)

por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Oi Juliana, só explanando o Felipe sobre estar uma cima da outra é por causa do display:inline-block tem que usar o display:block como ele colocou no código dele.