Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
16
respostas

Icones quadriplicados

Boa tarde, os icones da barra de navegação estão quadriplicados, como resolver ?

CODIGO:

CSS

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

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

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

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

HTML

<aside class="barra-navegação">

            <nav>
                <h1>João da Silva</h1>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Portifolio</a></li>
                    <li><a href="#">Sobre mim</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contato</a></li>
                </ul>
            </nav>

            <ul class="icones-sociais">
                <li><a class="github" href="http://github.com/joaodasilva">Github</a></li>
                <li><a class="twitter" href="http://Twitter.com/joaodasilva">Twitter</a></li>
                <li><a class="linkedin" href="http://linkedin.com/joaodasilva">Linkedin</a></li>                    
            </ul>

        </aside>
16 respostas

Oi Christopher tudo bem?

Poderia postar por gentileza todo código html para eu analisar melhor.

Oi André tudo otimo !

HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>Biografia - João da Silva</title>
        <meta charset="utf-8">
        <link rel="icon" href="favicon.png">
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="site.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
        <link rel="stylesheet" href= "https://fonts.googleapis.com/css?family=Crimson+Text">
    </head>   
    <body>
        <main>
            <h1 class="titulo-principal">Sobre mim</h1>
            <div class="conteudo-principal">
                <p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade, durabilidade</em> e que <em>agregam valor</em> para meus clientes.</p>

                <p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>

                <h2>Como trabalho</h2>

                <blockquote class="comentarios-joao">
                    <p>João  é o melhor desenvolvedor front-end com quem ja trabalhei. Muito eficiente e muito capaz. Recomendo sem duvidas!</p>
                    <cite>José Souza, Fiat</cite>
                </blockquote>

                <p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>

                <p>Também não trabalho com prazos fechados: <strong>qualidade é importante demais para ser sacrificada.</strong></p>

                <h2>Experiência</h2>

                <blockquote class="comentarios-joao">
                    <p>João domina as tecnologias como ninguem. Eu apresentava um problema, ele tinha na ponta da lingua a solução mais adequada com as tecnologias mais recentes</p>
                    <cite>Manoel Santos, Pétrobras</cite>
                </blockquote>

                <p>Já desenvolvi projetos para grandes empresas como <a href= "http://www.bmw.com">BMW</a>, <a href="http://www.uol.com.br">UOL</a> e <a href="https://www.ibm.com/br-pt/">IBM</a>. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>

                <p>Também já fui contratado para transformar grandes portais, como <a href="http://www.terra.com.br">Terra</a> e <a href="http://g1.com.br">G1</a>, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>

                <h2>Comunidade</h2>

                <p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um <a href="blog.html">blog</a>.</p>
            </div>
        </main>

        <img src="eu.jpg" alt="Foto de João da Silva">

        <aside class="barra-navegação">

            <nav>
                <h1>João da Silva</h1>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Portifolio</a></li>
                    <li><a href="#">Sobre mim</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contato</a></li>
                </ul>
            </nav>

            <ul class="icones-sociais">
                <li><a class="github" href="http://github.com/joaodasilva">Github</a></li>
                <li><a class="twitter" href="http://Twitter.com/joaodasilva">Twitter</a></li>
                <li><a class="linkedin" href="http://linkedin.com/joaodasilva">Linkedin</a></li>                    
            </ul>

        </aside>

        <footer class="rodape">

            © João da Silva 2018

        </footer>

    </body>
</html>

Estranho, no meu computador está funcionando ok no Chrome e no Firefox. E é a segunda vez que vejo essa dúvida hoje será que houve alguma atualização nos navegadores e o CSS começou a divergir (não sei)? Qual navegador e versão está usando?

Tenta também usar:

.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;
}

Então eu também achei estranho, o navegador e o Chrome e a versão dele é a 71.0.3578.98 (Versão oficial) 64 bits.

Eu alterei meu código aqui da forma como você me passou e parou de quadruplicar, mas agora não esta mais alinhado com os texto da barra, como posso resolver ?

Não é a versão então, estou usando a mesma versão que você. Hum, os meus estão alinhados, o que pode ser. Faz o seguinte no menu inspecionar (F12) vá até o elemento

<a class="github"....

e copie os Styles que estão aplicados sobre ele que aparece no inspecionar e cola aqui. vamos comparar e ver o que está diferente.

element.style {
}
.icones-sociais a {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-indent: -9999px;
}
.github {
    background-image: url(github.png);
}
.github {
    background-image: url(github.png);
    background-repeat: no-repeat;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
user agent stylesheet
a:-webkit-any-link:active {
    color: -webkit-activelink;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
user agent stylesheet
li {
    display: list-item;
    text-align: -webkit-match-parent;
}
ol, ul {
    list-style: none;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
user agent stylesheet
ul, menu, dir {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
body {
    font-family: "Crimson Text", "Times New Roman", serif;
    background-color: #a9b2b0;
    font-size: 120%;
    line-height: 1.5;
}
body {
    line-height: 1;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Eu não tenho certeza se é isso que você pediu, porque não sei mexer direito no menu inspecionar, desculpe...

element.style {
}
ol, ul {
    list-style: none;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
user agent stylesheet
ul, menu, dir {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
<style>…</style>
.barra-navegação {
    color: rgb(242, 255, 252);
    text-align: center;
    list-style-type: none;
    font-family: "Open Sans Condensed", sans-serif;
    background: rgb(60, 29, 61);
    padding: 20px;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
body {
    font-size: 20px;
    font-family: "Crimson Text", serif;
    background-color: #F2FFFC;
    line-height: 1.5;
}
body {
    line-height: 1;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Era isso mesmo que precisava mas ainda não consegui achar o problema.

Aliás, se quiser aprender a inspecionar bem dá pra fazer esse curso https://cursos.alura.com.br/course/chrome-devtools

Tem como mandar um printscreen da sua tela e jogar no site imgur.com por gentileza.

Tem outra abordagem que tava pensando enquanto jantava. Você pode baixar o projeto da aula https://github.com/alura-cursos/CursoHTML/archive/aula9.zip e comparar com o seu projeto.

Um jeito bom de comparar dois arquivos de texto é usar o Notepad++ com o plugin Compare (instalável dentro do gerenciador de plugins do programa).

Ele deixa lado a lado os dois arquivos e mostra as diferenças em verde e vermelho. Muito bom.

Tenta essas coisas e se não adiantar volta aqui que juntos vamos resolver essa parada.

Opa voltei, tinha ido resolver umas coisas... https://imgur.com/2HbNTFS o link da imagem que voce me pediu, repare que os links não estão alinhados com o texto ( antes da aula estava ).

Eu uso o Sublime, mas vou tentar fazer isso que voce falou do Notepad++.

Muito obrigado pela ajuda.

Acho que descobri hein.

O problema está na bio.html na linha ul class="icones-sociais"> o correto é ul class="icones-redes-sociais">

A classe

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

usa inline-block sendo que tem de usar o block no display

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

Mas porque a class não pode ser nomeada como ".icones-sociais" ?

Eu alterei para ".icones-redes-sociais" e não afetou em nada.

A questão do display não ficou claro.

Não é a classe do css que tem que ser renomeada mas sim a classe do HTML.

Nesse pedacinho do site.css

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

diz que todo elemento li da classe icones-redes-sociais tem que ser exibido inline-block que quer dizer a grosso modo um do lado do outro em linha como um bloco.

Se você no HTML do ul class não colocar a classe "icones-sociais" não vai achar aquela regra acima e não vai exibir inline-block vai exibir como um elemento de lista um abaixo do outro.

Segue código para elucidar:

<!DOCTYPE html>
<html>
    <head>
        <title>Biografia - João da Silva</title>
        <meta charset="utf-8">
        <link rel="icon" href="favicon.png">
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="site.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
        <link rel="stylesheet" href= "https://fonts.googleapis.com/css?family=Crimson+Text">
    </head>   
    <body>
        <main>
            <h1 class="titulo-principal">Sobre mim</h1>
            <div class="conteudo-principal">
                <p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade, durabilidade</em> e que <em>agregam valor</em> para meus clientes.</p>

                <p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>

                <h2>Como trabalho</h2>

                <blockquote class="comentarios-joao">
                    <p>João  é o melhor desenvolvedor front-end com quem ja trabalhei. Muito eficiente e muito capaz. Recomendo sem duvidas!</p>
                    <cite>José Souza, Fiat</cite>
                </blockquote>

                <p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>

                <p>Também não trabalho com prazos fechados: <strong>qualidade é importante demais para ser sacrificada.</strong></p>

                <h2>Experiência</h2>

                <blockquote class="comentarios-joao">
                    <p>João domina as tecnologias como ninguem. Eu apresentava um problema, ele tinha na ponta da lingua a solução mais adequada com as tecnologias mais recentes</p>
                    <cite>Manoel Santos, Pétrobras</cite>
                </blockquote>

                <p>Já desenvolvi projetos para grandes empresas como <a href= "http://www.bmw.com">BMW</a>, <a href="http://www.uol.com.br">UOL</a> e <a href="https://www.ibm.com/br-pt/">IBM</a>. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>

                <p>Também já fui contratado para transformar grandes portais, como <a href="http://www.terra.com.br">Terra</a> e <a href="http://g1.com.br">G1</a>, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>

                <h2>Comunidade</h2>

                <p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um <a href="blog.html">blog</a>.</p>
            </div>
        </main>

        <img src="eu.jpg" alt="Foto de João da Silva">

        <aside class="barra-navegação">

            <nav>
                <h1>João da Silva</h1>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Portifolio</a></li>
                    <li><a href="#">Sobre mim</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contato</a></li>
                </ul>
            </nav>

            <ul class="icones-redes-sociais">
                <li><a class="github" href="http://github.com/joaodasilva">Github</a></li>
                <li><a class="twitter" href="http://Twitter.com/joaodasilva">Twitter</a></li>
                <li><a class="linkedin" href="http://linkedin.com/joaodasilva">Linkedin</a></li>                    
            </ul>

        </aside>

        <footer class="rodape">

            © João da Silva 2018

        </footer>

    </body>
</html>

Entendi, mas o meu código esta com a class declarada no HTML, e a mesma no CSS, mas o erro de os icones não estarem alinhados persiste.

CSS

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

HTML

<ul class="icones-redes-sociais">
                <li><a class="github" href="http://github.com/joaodasilva">Github</a></li>
                <li><a class="twitter" href="http://Twitter.com/joaodasilva">Twitter</a></li>
                <li><a class="linkedin" href="http://linkedin.com/joaodasilva">Linkedin</a></li>                    
            </ul>
solução!

Depois de muito tempo descobri qual era o problema, era só adicionar box-sizing: border-box;

Ele estava aplicando os 40x40 no conteúdo e não nas bordas.

Que alivio...kkkk