Não consigo estilizar lista!

[Eric Vinícius 0]

Boa tarde amigos! Acreditem, tentei tudo que veio a cabeça já.

 

Eu estou declarando o seguinte:

#vant ul{    
   float: left!important;
   margin: 2px 0 !important;
   list-style: circle outside  !important;    
}
#vant ul li{
   display: block;    
}

A lista não obedece à formatação no que se diz respeito a linha

list-style: circle outside  !important; 

 

Estou usando o Reset do Eric M, mas fui lá a comentei o reset referente à listas. Procurei em minha árvore de elementos, e não há nada aparentemente que esteja

causando isso!

 

Alguém poderia me ajudar!?

[LCS 0]

Boa tarde amigos! Acreditem, tentei tudo que veio a cabeça já.

 

Eu estou declarando o seguinte:

#vant ul{    
   float: left!important;
   margin: 2px 0 !important;
   list-style: circle outside  !important;    
}
#vant ul li{
   display: block;    
}

A lista não obedece à formatação no que se diz respeito a linha

list-style: circle outside  !important; 

 

Estou usando o Reset do Eric M, mas fui lá a comentei o reset referente à listas. Procurei em minha árvore de elementos, e não há nada aparentemente que esteja

causando isso!

 

Alguém poderia me ajudar!?

 

list-style: circle outside !important; Pelo o que eu deu uma lida imagino que você esteja invertendo a posição dos valores da propriedade list-style. tente por o outside antes de circle;

 

Abçs,

LCS

[Eric Vinícius 0]

Olá LCS!

Obrigado pela atenção!

 

Na verdade, a sequência em que coloquei os atributos está correta.

Chequei sua dica, mas não funcionou!

 

Muito obrigado!

[LCS 0]

Olá LCS!

Obrigado pela atenção!

 

Na verdade, a sequência em que coloquei os atributos está correta.

Chequei sua dica, mas não funcionou!

 

Muito obrigado!

 

Cara acesse esse site http://maujor.com/tutorial/listtut.php ; Pele o que eu li,apesar de não saber muito sobre css, eu acho que você esta colocando valores em propriedades diferentes:

 

Acho que teria que ser assim

 

list-style-position: outside;

list-style-type: circle;

 

 

Verifica lá.

 

 

Abçs,

 

LCS

[Eric Vinícius 0]

Amigo, ainda creio que o problema não seja o modo que eu declarei as propriedades. Já usei antes.

Mais uma vez, usei do modo informado por você, e por esse ótimo tutorial do Majour. Mas nada ainda.

 

Estou cascavilhando aqui em todo meu CSS (que já está bem grande), para ver se acho algo! Obrigado!

[LCS 0]

Bom posta ai todo o código quem sabe não dá pra ajudar..

 

abçs

[Eric Vinícius 0]

/*CONTEUDO GERAL*/
#conteudo-geral{
   margin:0;
   width: 100%;
   min-height: 2000px;
}

#conteudo-centro{
   width: 1000px;
   margin: 0 auto;
   min-height: 1800px;
}

#conteudo-centro ul{
   margin: -23px 780px;
   width:250px;
}

#conteudo-centro ul li{
   display:inline;
}

#content_esquerda{
   float: left;
   min-height: 1800px;
   width: 195px;
   margin: 20px 0;
}
#content_esquerda_1{
   background: url("../img/img_prc_dir.png");
   height:356px;
   width:192px;
   margin: 20px 0;
}


.desconto1{
   font-size:60px;
   font-weight:bold;
   color:#000;
   font-family:'Arial Black';

}

.desconto2{
   font-size:13px;
   font-weight:bold;
   color:#000;
   font-family:'Arial Black';
}

.span1{
   font-size: 13px;
   font-family: Arial;
   color: #000;
}


#icons li img{border:none}
#icons li {
   list-style: none;
   display: inline;
}

#icons  {
   margin:120px 30px;
}

/*
TOOLTIPS
*/
.tooltip1 {
   display:none;
   margin:10px -40px;
   background:url("../img/alt_f.png");
   font-size:10px;
   height:70px;
   width:113px;
}
.tooltip2 {
   display:none;
   margin:10px -40px;
   background:url("../img/alt_o.png");
   font-size:10px;
   height:70px;
   width:113px;

}
.tooltip3 {
   display:none;
   margin:10px -40px;
   background:url("../img/alt_t.png");
   font-size:10px;
   height:70px;
   width:113px;

}

#esquerda-geral{
   height: 1800px;
   width: 200px;
   border: 0px solid #333;
   float: left;
}
#esquerda-geral-1{
   height: 480px;
   width: 192px;    
   margin: 25px auto;
   background: url('../img/img_prc_dir.png') no-repeat;
   border: 0px solid red;
}
.desconto{
   float: right;
   margin: 40px 15px;
   color:#FFF;
}
.desconto span{
   font-size: 55px;
   font-family: 'Arial Black';
}
.desconto small{
   margin-left: 5px;
   font-size: 17px;
   font-family: 'Arial Black';
}
.desconto-2{
   float: right;
   margin: 45px 20px;
   color:#000;
}
.desconto-2 small{
   color:slategray;
   font-family: 'Arial';
   font-size: 27px;
   background: url('../img/bg_tira.png');
   margin-left: 40px;
   z-index: 20;

}
.desconto-2 .por{
   background: transparent !important;
   font-size: 12px !important;
   color:#3E458C !important;
   float: left !important;
   margin-left: 15px;
}
.desconto-2 span{
   color: #3E458C;
   font-family: 'Arial Black';
   font-size: 55px;
}
.comprar{
   height: 55px;
   width: 175px;
   border:none;
   cursor: pointer;
   background: url('../img/bot_comprar.png');
   float:right;
   margin: -10px 3px;
}
.adquira{
   float:right;
   margin: 20px 15px;
   line-height: 19px;
   text-align: justify;
   font-size: 12.5px;
   font-family: 'Tahoma', Arial;    
}
#esquerda-geral-2{
   height: 750px;
   width: 192px;
   background: #CCCCCC;
   margin: -10px auto;
}

#centro-principal{    
   height: 1800px;
   width: 800px;
   border:0px solid #000;
   margin-left: 205px;
}

#centro-principal h1{
   color:red;
   font-size: 20px;
   font-family: 'Arial Black';
   margin: 10px 20px;
}
#centro-principal h3{
   color: #228;
   font-size: 22px;
   font-family: 'Arial';
   margin: 10px 20px;
   line-height: 27px;
}

#slider{
   height: 300px;
   width: 500px;
   background: #c3c3c3;
   margin: 0 20px;
}

#vant{
   width: 249px;
   height: 200px;    
   margin: 8px 20px;
}
#vant h2, #reg h2{
   color: red;
   font-size: 18px;
}
#vant ul{    
   float: left!important;
   margin: 2px 0 !important;
   list-style-position: outside;
   list-style-type: circle;

}
#vant ul li{
   display: block;    
}

#reg{
   width: 249px;
   min-height: 200px;
   margin: -208px 280px 0 0;
   float: right;
}
#reg ul{
   float: left!important;
   margin: 2px 0 !important;


}
#reg ul li{
   list-style-position: outside;
   list-style-type: circle;
   display: block;
}

.hr1{
   margin: 200px 20px;
   width: 500px;
   height: 2px;
   background: #ccc;
}

#descricaobaixo{
   float: left;
   margin: -100px 20px;
}

[LCS 0]

Bom eu li e reli o seu código e não encontro problemas.. somente resta para mim.. perguntar se você esta usando o id corretamente na página html..

 

o correto seria assim

 

<ul id="vant ul"> sobre</ul>

 

Caso você esteja fazendo assim...E não der certo já não posso ajudar em mais nada..

 

 

Abçs,

 

LCS

[Kakashi_Hatake 267]

Cara, não entendi bem o que você quer, seria algo assim:

<style>
#vant ul{    
   float: left   !important;
   margin: 2px 0 !important;   
}
#vant ul li{
   list-style: upper-roman outside !important;  
}

</style>
<div id="vant">
   <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
   </ul>
</div>

[Eric Vinícius 0]

LCS: Estou usando o id da forma que o Kratos fez ai, normal (pelo menos eu acho). Uma lista dentro de uma div, os dois possuindo Id's.

 

Kratos: Estou fazendo exatamente deste jeito ai.

 

Tá meio estranho isso.

 

Obrigado pela atenção amigos.

[Kakashi_Hatake 267]

Aqui o exemplo que postei funcionou legal :mellow:

 

O que exatamente não acontece?

[LCS 0]

////Kratos Zohr ////

 

Pelo que estou vendo você esta usando duas id´s iguais.. veja

 

 

<style>
#vant ul{    
   float: left   !important;
   margin: 2px 0 !important;   
}
#vant ul li{
   list-style: upper-roman outside !important;  
}

</style>
<div id="vant"> /// Esse vant aqui é o id correto? bom como ele vez 2 id´s um para o ul e outro para o li , na hora de usar ele tem que colocar o id completo, ou melhor dizendo você não esta referenciando nenhuma id no seu atributo li..
   <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
   </ul>
</div>

 

 

e pensando nisso //Eric Vinícius// tente fazer sua id na pagina css assim #vant_ul e modifique no html e veja se funciona..

 

 

abçs,

lcs

[Kakashi_Hatake 267]

////Kratos Zohr ////

 

Pelo que estou vendo você esta usando duas id´s iguais.. veja

 

 

<style>
#vant ul{    
   float: left   !important;
   margin: 2px 0 !important;   
}
#vant ul li{
   list-style: upper-roman outside !important;  
}

</style>
<div id="vant"> /// Esse vant aqui é o id correto? bom como ele vez 2 id´s um para o ul e outro para o li , na hora de usar ele tem que colocar o id completo, ou melhor dizendo você não esta referenciando nenhuma id no seu atributo li..
   <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
   </ul>
</div>

 

 

e pensando nisso //Eric Vinícius// tente fazer sua id na pagina css assim #vant_ul e modifique no html e veja se funciona..

 

 

abçs,

lcs

 

Note a diferença.

#vant ul{}
atacando a ul que está dentro de #vant

#vant ul li{}
atacando a li que está dentro da ul que está dentro de #vant

[LCS 0]

////Kratos Zohr ////

 

Pelo que estou vendo você esta usando duas id´s iguais.. veja

 

 

<style>
#vant ul{    
   float: left   !important;
   margin: 2px 0 !important;   
}
#vant ul li{
   list-style: upper-roman outside !important;  
}

</style>
<div id="vant"> /// Esse vant aqui é o id correto? bom como ele vez 2 id´s um para o ul e outro para o li , na hora de usar ele tem que colocar o id completo, ou melhor dizendo você não esta referenciando nenhuma id no seu atributo li..
   <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
   </ul>
</div>

 

 

e pensando nisso //Eric Vinícius// tente fazer sua id na pagina css assim #vant_ul e modifique no html e veja se funciona..

 

 

abçs,

lcs

 

Note a diferença.

#vant ul{}
atacando a ul que está dentro de #vant

#vant ul li{}
atacando a li que está dentro da ul que está dentro de #vant

 

Certo entendi o seu raciocionio, porém ele, no código dele criou duas regras uma ul e outra li, logo imagino que não se possa usar a mesma id´s para regras diferentes que afem atributos diferentes; imagino que quando ele digita #vant ul( o sistema entende que ele esta criando uma id que vai funcionar somente em ul),ai ele digita logo abaixo #vant li(o sistema entende que ele esta criando uma id que vai funcionar somente no li), porém como á uma separação com espaço, creio que se ele fizer assim:

 

#vant_ul ul{argumentos} e depois

#vant_li li( arqumentos) seja o correto

 

ou seja da mesma forma que ele fez aqui

 

#centro-principal h1{

color:red;

font-size: 20px;

font-family: 'Arial Black';

margin: 10px 20px;

}

 

Bom eu acho que é isso.. pelo menos segue a lógica de classe e id, eu vi poucas vezes css.. portanto posso estar enganado..

 

abçs

 

PS: Não leve a mal as minhas colocações, não tenho intenção de ofender.. :joia:

[Eric Vinícius 0]

LCS: A questão do uso das id's é aquela que você e o Kratos identificaram.

 

E não há erro:

 

#vant ul li{
   list-style-position: outside;
   list-style-type: circle;
   color: red; //essa regra funciona! as duas acima não!
}

 

Continua sendo muito estranho...

[LCS 0]

LCS: A questão do uso das id's é aquela que você e o Kratos identificaram.

 

E não há erro:

 

#vant ul li{
   list-style-position: outside;
   list-style-type: circle;
   color: red; //essa regra funciona! as duas acima não!
}

 

Continua sendo muito estranho...

 

 

Talvez esses atributos não sejam possíveis de serem usados em uma Div li.

 

 

Será que alguém pode ajudar????

[Guilherme Müller 0]

Eric, você tem este material publicado para vermos melhor?

[Evandro Oliveira 331]

!important está sendo lido como o terceiro atributo da shorthand, a imagem.

 

#vant li { list-style: circle outsite url() !important; }