CSS - em LISTAS

[rsp 0]

Seguinte ...

no meu site, tem uns textos que tem uma : :

 

e keria fazer isso com CSS ... pois tm seta azul, e outra laranja ...

 

to tentando usa esse codigo em CSS:

ul.setar {	list-style: url(http://.../imagens/i_setar.gif) none;}ul.setab {	list-style: url(http://.../imagens/i_setab.gif) none;}obs : esse "http:// .." eu uso ele completo,mas da preguica de digita ele todo... e outra, quando ponho assim nessa forma, ele nao adiciona a setinha ... mas se faco pelo DW .. ele axa a setinha .. mas ele usa endereço do meu PC e nao o link :-( ... deu pra entende ? hehee no texto uso assim<ul class="setar"><li>campo 1</li><li>campo 2</li><li>campo 3</li></ul>

deu pra entende ?

[FabricioGomes 0]

tenta list-style-image...

[rsp 0]

a outra coisa..quando estou colocando <li> .. o texto esta ficando mto longe da borda esquerda...eu queria q ele continusse onde esta, apenas com a "setinha" .. na frente ... como faco pra ele volta ao lugar q tava ?

[FabricioGomes 0]

tenta o "margin"

[rsp 0]

obrigadao.. hehe

 

tipo, ta quase perfeito .. soh um pekeno detalhe...

usando o margin 0px .. ele volto pro lado eskerdo.. otimo

 

mas ele ta assim agora :

 

> TEXTEXTOTEXTOTEXTO

TEXTOTEXTOTEXTO

 

e keria ele assim :

 

> TEXTOTEXTOTEXTOTO

...TEXTOTEXTO

 

que ele deixe soh a "setinha" do lado eskerdo, e nao ponha nenhuma palavra embaixo...

teria como ?!

 

ops.. mexendo aki, .. consegui alinha.. colocando margin:10px ..

 

nao tm como deixar alinhado um pouco mais perto da seta nao ?!?

pq se ponho qualker valor abaixo de 10 ... ele mexe soh na linha debaixo ...

e fica como no exemplo 1 aki em cima .. :-(

[FabricioGomes 0]

<style>li.1 { list-style-position: outside;}li.2 { list-style-position: inside;}</style><ul><li class="1">Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande </li><li class="2">Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande Texto grande </li></ul>ve se te ajuda... heheheh

[rsp 0]

entao, isso nao adianta mto nao :-(

 

 

pq ja to do jeito q keria ...

mas keria q o texto ficasse mais perto da setinha ..

 

tm como ?

 

 

inves de fica assim:

 

>.....TEXTOTEXTOTEXTO

 

 

ficasse assim :

 

>...TEXTOTEXTOTEXTO

 

colokei os pontinhos (...) soh para ilustrar

[FabricioGomes 0]

entao diminui o margin agora... posta como esta seu codigo....

[rsp 0]

CSS das listas (depois trocarei o FILE... pelo HTTP )

 

ul.setar { list-style: url(file:///c|site/imagens/i_setar.gif) outside;

margin:4 4 0 10;

}

ul.setab {

list-style: url(file:///c|site/imagens/i_setab.gif) outside;

margin-left: 10px;

}

ta assim ..

 

 

outro problema .. eu tenho uns textos ... grandes..

e queria q eles ficassem a 10px da margem esquerda...

e ta assim o CSS desses textos :

 

.conteudo {

font: 10px Verdana, Arial, Helvetica, sans-serif;

color: #000000;

margin: 10px 10px 10px 10px;

}

 

soh que só a PRIMEIA FRASE fica com espaço ... pq ?!

[Leandro Vieira Pinho 0]

vamos por etapa.primeiro vamos resolver este:

ul.setar { list-style: url(http://.../imagens/i_setar.gif) none;}ul.setab { list-style: url(http://.../imagens/i_setab.gif) none;}<ul class="setar"><li>campo 1</li><li>campo 2</li><li>campo 3</li></ul>

tente assim:

ul.setar li {padding-left: 10px /* coloque um pouco mais que o tamanho da setinha */}

segundo seu código

.conteudo {font: 10px Verdana, Arial, Helvetica, sans-serif;color: #000000;margin: 10px 10px 10px 10px;}

o margin que você colocu ai está definindo um margin de 10px para ambos os lados (top direita baixo esquerda) se quiser somente para a esquerda faça assim

marigin-left: 10px;

[rsp 0]

entao leandro

eh q o texto esta dentro de uma tabela ... .. e a tabela tm fundo colorido

e ele esta grudado nas margens ...

 

entao tentei aplicar este MARGIN - 10 10 10 10

dentro do ".conteudos"

só q ele soh da distancia de 10 pixels.. na primeira linha ...

 

ele fica assim :

 

......TEXTOTEXTOTEXTOTEXTO

TEXTOTEXTOTEXTOTEXTOTEX

TEXTOTEXTOTEXTOTEXTOTEX

TEXTOTEXTOTEXTOTEXTOTEX

 

ao inves de fica assim:

 

......TEXTOTEXTOTEXTOTEXTO

......TEXTOTEXTOTEXTOTEXTO

......TEXTOTEXTOTEXTOTEXTO

......TEXTOTEXTOTEXTOTEXTO

 

ele soh da espaco na primeira linha ...

:-(