Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

NetBoy16

[Resolvido] list-style, como mudar a cor do enfeite ?

Recommended Posts

Fala pessoal, beleza, eu to tendo esse pequeno problema, tenho um list de noticias, o texto está na cor branca, mas o a bolinha(list-style: disc;) ta preta, já pesquisei mas nao consigo encontrar, como faco pra mudar a cor sem ser por img ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Aplicando a propriedade COLOR diretamente na LI ambos modificam (texto e marcador). O texto em questão pode estar dentro doutro elemento, e estar recebendo essa cor diferente. Qualquer coisa, posta o link para o problema por favor.

Compartilhar este post


Link para o post
Compartilhar em outros sites

nao funcionou =(

 

ta localhost, vou te passar o codigo css:

 

* {
   padding: 0;
   margin: 0;
   list-style: none;
   border: none;    
   font-family: sans-serif;
}
html, body {
   height: 100%;
}
a {
   text-decoration: none;
}
a:hover {
   text-decoration: underline;
}
input, textarea, fieldset {
   border: 1px solid gray;
}
#container {
   width: 1000px;
   margin: auto;
   background: url(../images/bg.png);
}
   #topo {
       width: 1000px;
       height: 370px;
   }
   #conteudo {
       width: 1000px;
   }
       #geral {
           width: 1000px;
           height: 160px;
       }
           #rsocial {
           background: url(../images/bgrsocial.png) no-repeat;
           width: 490px;
           height: 159px;
           float: left;
           }
               #rsocial a {
                   position: relative;
                   top: 50px;
                   left: 10px;
               }
           #galeria {
               background: url(../images/bggaleria.png) no-repeat top;
               width: 495px;
               height: 159px;
               float: right;
           }
               #galeria a {
                   margin: 50px 0 0 10px;
               }
       #twitter {
           background: url(../images/bgtwitter.png) no-repeat;
           width: 1000px;
           height: 244px;
       }
           #tweets {
               float: left;
               position: relative;
               top: 60px;
           }
           #novidades {
               float: left;
               margin-top: 170px;
               margin-left: 170px;
           }
               #novidades li {
                   list-style: disc;
               }
                   #novidades li a {
                       color: white;
                       font-weight: bold;
                   }
       #facebook {
           background: url(../images/bgfacebook.png) no-repeat;
           width: 1000px;
           height: 234px;
           margin-bottom: 30px;
       }
           #likes {
               float: left;
           }
           #noticias {
               float: right;
           }
               #noticias li {
                   list-style: circle;
                   color: white;
               }
                   #noticias li a {
                       color: white;
                   }
       #news {
           background: url(../images/bgnews.png) no-repeat;
           width: 714px;
           height: 41px;
           float: left;
           margin-bottom: 30px;
       }
           #news input[type=text] {
               border: none;
               background: url(../images/newsemail.png) no-repeat;
               width: 145px;
               height: 21px;
               color: white;
               font-weight: bold;
               position: relative;
               top: 10px;
               left: 495px;
           }
           #news input[type=submit] {
               border: none;
               background: url(../images/newsok.png) no-repeat;
               width: 31px;
               height: 27px;
               position: relative;
               top: 5px;
               left: 500px
           }
   #rodape {
       background: url(../images/bgrodape.png) no-repeat;
       clear: both;
       width: 1000px;
       height: 133px;
   }
       #roda {
           position: absolute;
           top: 950px;
           left: 975px;
       }
       #rodape a {
           color: white;
           font-weight: bold;
           position: relative;
           top: 50px;
           left: 350px;
       }

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não sei aonde especificamente você quer aplicar a cor no list-style-type, mas o que o André Campos sugeriu, funciona sim, acabei de testar. Vou pegar de exemplo o seu código CSS:

 

#noticias li {
                   list-style: circle;
                   color: white;
               }
                   #noticias li a {
                       color: white;
                   }

 

Se for nesse código, você está aplicando a cor branco para o li, mas também para o a. Teste e coloque um blue no color do a, da certo sim.

 

Acabei de fazer um código aqui, e deu certo sim:

 


<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>Listas</title>
       <style type="text/css">
           ul li {
               color: blue;
           }
           ul li a {
               color: red;
               text-decoration: none;
           }
       </style>
   </head>
   <body>
       <ul>
           <li><a href="#">Item 1</a></li>
           <li><a href="#">Item 2</a></li>
           <li><a href="#">Item 3</a></li>
           <li><a href="#">Item 4</a></li>
           <li><a href="#">Item 5</a></li>
       </ul>
   </body>
</html>

 

Outra coisa, em alguns lugares tem list-style-type: disc; e não precisa disso, pois esse já é o padrão para <ul>. ;)

 

Além disso, no seu código que postei, está list-style: circle; e não ficará todo preenchido, mas sim somente as bordas. xD

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não sei aonde especificamente você quer aplicar a cor no list-style-type, mas o que o André Campos sugeriu, funciona sim, acabei de testar. Vou pegar de exemplo o seu código CSS:

 

#noticias li {
                   list-style: circle;
                   color: white;
               }
                   #noticias li a {
                       color: white;
                   }

 

Se for nesse código, você está aplicando a cor branco para o li, mas também para o a. Teste e coloque um blue no color do a, da certo sim.

 

Acabei de fazer um código aqui, e deu certo sim:

 


<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>Listas</title>
       <style type="text/css">
           ul li {
               color: blue;
           }
           ul li a {
               color: red;
               text-decoration: none;
           }
       </style>
   </head>
   <body>
       <ul>
           <li><a href="#">Item 1</a></li>
           <li><a href="#">Item 2</a></li>
           <li><a href="#">Item 3</a></li>
           <li><a href="#">Item 4</a></li>
           <li><a href="#">Item 5</a></li>
       </ul>
   </body>
</html>

 

Outra coisa, em alguns lugares tem list-style-type: disc; e não precisa disso, pois esse já é o padrão para <ul>. ;)

 

Além disso, no seu código que postei, está list-style: circle; e não ficará todo preenchido, mas sim somente as bordas. xD

 

Sim, mas eu apliquei list-style: disc pois no css reset está none

e o color eu apliquei no li e agora deu certo, vlw :)

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.