12
respostas

list-style-type não funciona depois do reset.css

Olá!

Estou formatando um pequeno texto dA minha esposa. E quando eu uso o reset.css eu não consigo mais formatar a lista com o list-style-type: disc; poderia me ajudar a encontrar o meu erro, por favor?

Essa formatação aqui: aside nav ul li a { color: rgb(255,255,255); text-decoration: none; list-style-type: disc; }

Obrigado!!!

Arquivo HTML

<!DOCTYPE html>
    <html>
        <head>
            <title>Konstanz</title>
            <meta charset="utf-8">
            <link rel="icon" href="vista_bodensee.jpg">
            <link rel="stylesheet" href="reset.css">
            <link rel="stylesheet" href="Konstanz.css">

        </head>


        <main>
            <body>
                <h1>Konstanz, já se tornou a cidade que desejo morar!</h1>

                <p>O Bodensee é um lago que faz fronteira com a Alemanha, Áustria e Suíça.
                Uma dica de passeio é andar de pedalinho pelo lago, (só podiamos ficar na parte alemã) custa 15 euros para 4 pessoas por 30 min. <br>E levamos bronca do guarda costa pq ja estávamos quase na parte Suíça haha coisa da vida.<br>
                A cidade também tem um Sea Life (Aquário), mas acabamos nem visitando, a cidade por si já vale super a pena.
                <br>
                Indico muito pra quem quer ter um fim de semana diferente, podendo visitar os três países rapidinho! ❤️</p>

                <p><em>#bodensee #alemanha #brasileirosnaalemanha@ Konstanz Lake, Deutschland</em></p>

                <img src="vista_bodensee.jpg" alt="Foto da faixada do lago Bodensee">
            </body>
        </main>


        <aside>
            <nav>
                <h1>Siga-me em minhas redes sociais!</h1>
                <ul>
                    <li><a href = "https://www.facebook.com/profile.php?id=100002856879920">Facebook</a></li>
                    <li><a href= "https://www.instagram.com/bimenegon/"> Instagran </a></li>

                </ul>
            </nav>
        </aside>


        <blockquote>
            <p>"If you can dream it, you can do it."<br>
            <cite> Walt Disney </cite></p>
        </blockquote>


        <footer>
            <a href = "https://www.facebook.com/atila.oliveirajr"> © Átila Oliveira 2019 </a
        </footer>


    </html>

arquivo CSS

main h1 {
    font-size: 60px;
    font-family: "Calibri";
    color: rgb(255,255,255);
    background-color: rgb(0,0,255);
    text-align: center;
    line-height: 60px;
    margin: 0px;
    padding: 50px;
}

    main p {
        font-size: 20px;
        font-family: "Calibri"
        padding: 20px;
        margin: 20px;
        text-align: center;

    }

    body {
    text-align: center;
    margin: 0px;

    }

    body em {
    color: rgb(0,0,255);
    font-size: 30px;
    font-family: "Calibri";
    }

aside {
    background-color: rgb(0,0,0);
    color: rgb(255,255,255);
    width: 300px;
    text-align: center;
    font-size: 20px;
    font-family: "Calibri";
    margin-block-start: 10px;;
    margin-block-end: 10px;;
    margin-inline-start: 0px;
    margin-inline-end: 0px;

    }

    aside h1 {
        font-weight: 900;

    }

    aside nav ul li a {
        color: rgb(255,255,255);
        text-decoration: none;
        list-style-type: disc;
    }




blockquote {
    background-color: #D9E5E3;
    margin-block-start: 10px;;
    margin-block-end: 10px;;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

footer {
    text-align: right;
    background-color: rgb(0,0,0);

}

    footer a {

    color: rgb(255,255,255);
    }
12 respostas

Boa tarde, Átila! Como vai?

Veja que o seletor que vc está utilizando aside nav ul li a irá selecionar as tags a! Portanto, deve ser por isso que a propriedade list-style-type não está funcionando, afinal de contas ela diz respeito à itens de uma lista! Sendo assim, para resolver o problema, tente substituir o seletor para aside nav ul li e veja se as coisas funcionam da forma que vc esperava!

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Oi Gabriel!

Não resolveu, na verdade agora, quando eu uso esse seletor aside nav ul li nenhuma formatação se aplica, quando eu uso a "original" aside nav ul li a, todas a formatação se aplica, menos a list-style-type. Quando eu uso o inspect no console, mostra pra mim que a formatação está sendo aplicada, mas eu não vejo resultado visual quando carrego o html...

Sem nenhum resposta ainda...

Átila, boa tarde!

Na sua lista, você precisa definir o tipo da lista:

aside nav ul {
    list-style-type: disc;
}

Pois quem deve definir as propriedades é a própria lista e não cada item em si

Espero ter ajudado e bons estudos

Oi Felipe,

Não consegui aplicar a mudança.

se eu mexer no trecho:

aside nav ul li a {
        color: rgb(255,255,255);
        text-decoration: none;
        list-style-type: disc;
    }

para

aside nav ul  {
        color: rgb(255,255,255);
        text-decoration: none;
        list-style-type: disc;
    }

Além de não aplicar a formatação disc, o texto ficar marcado em azul como se fosse um link, o que eu não queria, por isso a formatação color: rgb(255,255,255); text-decoration: none;

Tentei escrever assim também:

aside nav ul {
        list-style-type: disc;
    }

    aside nav ul li a {
        color: rgb(255,255,255);
            text-decoration: none;
        }

Mas nesse caso o resultado é o mesmo. Só o disc que não é aplicado.

Esse erro só acontece quando eu estou utilizando o arquivo reset.css, sem ele o disc se aplica normalmente.

Vou mandar o código do arquivo reset.css também:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Átila, bom dia!

Não é necessário remover o que tinha antes veja o exemplo abaixo

https://codepen.io/devcapu-the-looper/pen/WNbryaj

Do css que você passou na pergunta do tópico eu apenas eu apenas adicionei um seletor antes

aside nav ul{
    list-style-type: disc;
}

Apenas isso já é necessário para funcionar, mas caso você queira retirar do reset, a parte a ser removida é a abaixo:

ol, ul {
    list-style: none;
}

Espero ter ajudado e bons estudos!

Oi Felipe,

Chequei o link que você enviou. E o list-style-type: disc; não foi aplicado, e continua como se a configuração fosse: list-style-type: none.

Para ter certeza eu copiei todo o código do link, coloquei no meu sublime, salvei e atualizei o HTML, e de fato, o list-style-type: disc não é aplicado com esse código.

Não é uma solução desejada, mas para fins de teste eu apaguei a linha ol, ul { list-style: none;}, do reset.css... E o list-style-type continua como se fosse none.

Átila, boa tarde!

Você pode compartilhar o seu código para que eu possa testar? O link que eu mandei está aparecendo o disco aqui, então eu acredito que seja ou o navegador que você está usando ou algo especifico do projeto

Aguardo sua resposta e bons estudos!

Oi Felipe,

Tentei abrir no Crome, FireFox, Microsoft Edge e Chrome para Android e realmente não aparece o disco.

Aqui vai o código novamente:

HTML

<!DOCTYPE html>
    <html>
        <head>
            <title>Konstanz</title>
            <meta charset="utf-8">
            <link rel="icon" href="vista_bodensee.jpg">
            <link rel="stylesheet" href="reset.css">
            <link rel="stylesheet" href="Konstanz.css">

        </head>


        <main>
            <body>
                <h1>Konstanz, já se tornou a cidade que desejo morar!</h1>

                <p>O Bodensee é um lago que faz fronteira com a Alemanha, Áustria e Suíça.
                Uma dica de passeio é andar de pedalinho pelo lago, (só podiamos ficar na parte alemã) custa 15 euros para 4 pessoas por 30 min. <br>E levamos bronca do guarda costa pq ja estávamos quase na parte Suíça haha coisa da vida.<br>
                A cidade também tem um Sea Life (Aquário), mas acabamos nem visitando, a cidade por si já vale super a pena.
                <br>
                Indico muito pra quem quer ter um fim de semana diferente, podendo visitar os três países rapidinho! ❤️</p>

                <p><em>#bodensee #alemanha #brasileirosnaalemanha@ Konstanz Lake, Deutschland</em></p>

                <img src="vista_bodensee.jpg" alt="Foto da faixada do lago Bodensee">
            </body>
        </main>


        <aside>
            <nav>
                <h1>Siga-me em minhas redes sociais!</h1>
                <ul>
                    <li><a href = "https://www.facebook.com/profile.php?id=100002856879920">Facebook</a></li>
                    <li><a href= "https://www.instagram.com/bimenegon/"> Instagran </a></li>

                </ul>
            </nav>
        </aside>


        <blockquote>
            <p>"If you can dream it, you can do it."<br>
            <cite> Walt Disney </cite></p>
        </blockquote>


        <footer>
            <a href = "https://www.facebook.com/atila.oliveirajr"> © Átila Oliveira 2019 </a
        </footer>


    </html>

Arquivo CSS:

main h1 {
    font-size: 60px;
    font-family: "Calibri";
    color: rgb(255,255,255);
    background-color: rgb(0,0,255);
    text-align: center;
    line-height: 60px;
    margin: 0px;
    padding: 50px;
}

    main p {
        font-size: 20px;
        font-family: "Calibri"
        padding: 20px;
        margin: 20px;
        text-align: center;

    }

    body {
    text-align: center;
    margin: 0px;

    }

    body em {
    color: rgb(0,0,255);
    font-size: 30px;
    font-family: "Calibri";
    }

aside {
    background-color: rgb(0,0,0);
    color: rgb(255,255,255);
    width: 300px;
    text-align: center;
    font-size: 20px;
    font-family: "Calibri";
    margin-block-start: 10px;;
    margin-block-end: 10px;;
    margin-inline-start: 0px;
    margin-inline-end: 0px;

    }

    aside h1 {
        font-weight: 900;

    }

    aside nav ul li a {
        color: rgb(255,255,255);
        text-decoration: none;
        list-style-type: disc;
    }




blockquote {
    background-color: #D9E5E3;
    margin-block-start: 10px;;
    margin-block-end: 10px;;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

footer {
    text-align: right;
    background-color: rgb(0,0,0);

}

    footer a {

    color: rgb(255,255,255);
    }

Código do reset.css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Átila, bom dia!

Eu realmente não sei que possa ser. Como coloquei na imagem abaixo, ele está aparecendo, o que eu tive que fazer foi remover do seletor aside nav ul li a a propriedade list-style-type: disc e colocar no seletor aside nav ul

Esse link aqui vai levar ele pro código fonte, com as mudanças

Espero ter ajudado e bons estudos!

Oi Felipe,

Mesmo usando o arquivo reset.css?

Se eu deletar remover o arquivo reset.css funciona tudo ok pra mim tb. No seu código fonte, está sem o arquivo reset.css

Átila, boa tarde!

O link que eu te mandei está com o reset.css veja

https://codepen.io/devcapu-the-looper/pen/RwNGwLN?editors=0100

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software