Listas Numeradas

Carcleo · Fevereiro 10, 2012

Pessoal.

Bom Dia!

Tenho um texto em uma coluna de uma tabela.

Abaixo do texto, começo uma lista numerada(OL-LI).

Tudo certinho.

Acontece, que o texto esta justificado e começa colcado com o lado esquerdo da coluno, e, por jistificação, termina colado no lado direito da coluna. Porem, a lista, começa afastada do lado esquerdo da coluna (como é o padrão).

Gostaria de "puxar" a lista numerada para esquera para que o texto fique alinhado verticalmente com a lista.

Como faço isso?

Grato.

Carlos Rocha

Marrabel · Fevereiro 10, 2012

Existe uma propriedade na tag "table" que se chama "valign"

Daí você define o que você desejar... --> baseline, bottom, middle ou top.

Exemplo:

<table valign="middle">

Testa ai e vê se deu certo

Evandro Oliveira · Fevereiro 10, 2012

Existe uma propriedade na tag "table" que se chama "valign"

Daí você define o que você desejar... --> baseline, bottom, middle ou top.

top, center ou bottom.

Em momento algum ele disse que estava usando tabelas. Ele disse que tem uma lista justificada e menciona direita e esquerda.

@Carcleo, experimenta

list-style-position: inside;

Marrabel · Fevereiro 10, 2012

Eh verdade, me desculpe.

Confundi com outro tópico

Carcleo · Fevereiro 10, 2012

Evandro, desculpe, mas onde é que eu coloco esse codigo?

Algumas considerações mais:

Eu tenho numa tabela com uma linha e uma coluna.

Dentro dessa coluna, um texo, abaixo desse texto, uma lista numerada.

Alinhei com <p align="justify"></p>, o texto mais a lista.

Atéai tudo bem. Acontece, que no alinhamento vertical, o texto esta colado no lado esquerdo e a lista esta espaçada uns 20px do lado esquerdo da tela.

Desta forma, o texto e a lista, não estão no mesmo alinhamento.

Esse é o problema.

Diéssica · Fevereiro 10, 2012

mas onde é que eu coloco esse codigo?

No CSS da página.

seletor {
list-style-position: inside;
}

Seletor é uma entidade que faz parte da regra CSS e define o alvo dessa regra. O alvo é um elemento integrante da árvore do documento HTML (ou elementos).

:seta: http://www.abpsoft.com/criacaoweb/cssguiarefselet.html

Carcleo · Fevereiro 10, 2012

Ai complicou.

E um trabalho inicio de faculdade.

Deu para entender nada.

Segue o codigo:

<html>
<head>
 <title>Marco Polo - Biscoito da Sorte</title>
 <style>
    seletor {
	  list-style-position: inside;
	  }
 </style>
</head>
<body bgcolor="#F7000" vlink="#FFAA00" link="#FFFF33" style="font-face:tahoma;color:#FFFFFF" >

  <div 
      align="center"
      style="
             position:absolute;
             background-image:url(imagens/FundoDegrade.png);
             width:1024px;
             height:600px;
             left:50%;
             margin-left:-512px;
            "
   >
     <div style="width:230px;position:absolute;left:20px">
       <img src="imagens/MarcoPoloLogo_p.png">
     </div>
     <div style="width:794px;position:absolute;left:250px">
       <div align="right">
         <font size="+3"><b>Biscoito da Sorte</b></font>
         <hr width="250px">
       </div>
       <table width="794px">
         <tr>
            <td>
            <p align="justify">
              A história do biscoito da sorte inicia-se na época Genghis Khan que, no final do século XII, dominou boa parte da china.<br><br>
              Os generais Chineses precisavam de uma forma segura de troca de informações. A solução foi esconder mensagens num tipo de bolo em forma de meia-lua cujo sabor era detestado pelos mongóis.<br><br>
              Para comemorar sua vitória, anualmente os chineses passaram a trocar mensagens de felicitação da mesma forma em que as mensagens secretas foram enviadas, dentro de "bolos da sorte".<br><br>
              Confira a seguir algumas mensagens que podem ser encontradas em Biscoitos da Sorte:<br><br>
              <ol>
               <li type="1" >A vida trará coisas boas se tiveres paciência.</li>
               <li>Não compense na ira o que lhe falta na razão.</li>
               <li>Defeitos e virtudes sã apenas dois lados da mesma moeda.</li>
               <li>A maior de todas as torres começa no solo.</li>
               <li>Não há que ser forte, há que ser flexivel.</li>
               <li>Há três coisas que jamais voltam; a flesha lanÃ§ada, a palavra dita e a oportunidade perdida.</li>
               <li>A juventude não é época da vida, é estado de espírito.</li>
              </ol>
              </p>
            </td>
         </tr>
       </table>
     </div>
   </div>   

<body>
</head>
</html>

Diéssica · Fevereiro 11, 2012

 <style>
    seletor {
                 list-style-position: inside;
                 }
 </style>

seletor = elemento que vai receber a propriedade.

Tem que substituir esse "seletor". O elemento que vai receber o valor inside da propriedade list-style-position é a tua lista numerada (ol).

É só pensar um pouco... :)

Carcleo · Fevereiro 12, 2012

Entendi diessica.

Mas, andei procurando por inside nas style positions do objeto list e não achei.

Funciona mesmo assim?

Posso fazer assim não?

<OL style="position:inside">
<li>........

Se não, porque não funciona assim?

Só para fins didaticos.

Diéssica · Fevereiro 12, 2012

<OL style="position:inside">
<li>........

wtf??????? Inside não é um valor da propriedade position.

Tu pode colocar essa formatação tanto inline, como externa.

Exemplo de formatação inline

<section style="background:#000;">Seção</section>

Exemplo de formatação externa/linkada e CSS incorporado

CSS:

section {
background:#000;
}

(Essa formatação pode ser colocada dentro de um arquivo .css (CSS externo/linkado) ou dentro de um arquivo .html, dentro da tag <style></style> (CSS incorporado))

E HTML:

<section>Seção</section>

Usei outros elementos e atributos pra ti entender como funciona :)

Agora tenta atribuir o list-style-position: inside; no teu elemento.

:seta: http://www.w3schools.com/cssref/pr_list-style-position.asp

Obs.: o recomendado é formatar os elementos utilizando um CSS externo, em um arquivo .css separado.

:seta: http://www.academictutorials.com/Pt/css/css-external.asp

:seta: Tipos de CSS: Inline, incorporado e Linkado

:bye:

Carcleo · Fevereiro 12, 2012

Tudo bem.

Mas, então. Inside é propriedade de que então?

A pergunta é porque voce usou assim:

list-style-position: inside;

Daí supus que fosse position.

Onde acho inside dentro da propria tag?

Só para me situar no espaço?

Diéssica · Fevereiro 12, 2012

Mas, então. Inside é propriedade de que então?

list-style-position = propriedade

inside = valor da propriedade

O que vem antes do valor, é a propriedade.

inside é um valor da propriedade list-style-position

:seta: http://www.w3schools...le-position.asp

Um exemplo...

Tenho uma div com a id conteudo.

<div id="conteudo">Conteúdo</div>

Quero background preto nessa div, logo

<!-- inline -->
<div id="conteudo" style="background:#000;">Conteúdo</div>

ou

<!-- externo/linkado (arquivo .css separado) -->
#conteudo {
background:#000;
}

ou

<!-- incorporado (antes da tag </head> no html)  -->
<style>
#conteudo {
background:#000;
}
</style>

A propriedade é background, e o valor é #000 (preto em hexadecimal). Vou determinar essas regras na div id conteudo, por isso o seletor #conteudo.

As ids recebem # (#conteudo), classes recebem . (.conteudo) e tags sem essas especificações não precisam de nenhum desses caracteres :thumbsup:

Logo, se eu quisesse background em todas as divs do meu site...

<!-- externo/linkado (arquivo .css separado) -->
div {
background:#000;
}

Eu não estaria determinando em nenhuma div específica, e sim em todos os elementos div da página.

Se minha div do conteúdo for classe...

<div class="conteudo">

Meu CSS é...

.conteudo {
background:#000;
}

É assim que funciona. Não é difícil.

A propriedade possui o valor :thumbsup:

Carcleo · Fevereiro 12, 2012

Acho que não entendeu.

É o seguinte:

<div id="conteudo" style="position:inside;">Conteúdo</div>

É assim?

Pois é. Não existe inside em position.

Essa é minha duvida.

Diéssica · Fevereiro 12, 2012

Respondi duas vezes já... E te expliquei esse uso do inline também

Carcleo · Fevereiro 12, 2012

perdão.

É que não achei essa linha em parte alguma(que voce colocou) do topico:

<div id="conteudo" style="position:inside;">Conteúdo</div>

Eu não quero fazer com Background e sim com position.

E das formas que eu fiz e que voce orientou não deram certo.

Diéssica · Fevereiro 12, 2012

A div conteudo e o background que eu apliquei nela foram só exemplos pra ti entender o uso do CSS inline, incorporado e linkado.

inside é um valor da propriedade list-style-position

(e não um valor da propriedade position)

Logo:

list-style-position:inside;

no elemento que tu quer aplicar essas regras :thumbsup: No caso, as listas numeradas

Pelo jeito tu é iniciante em CSS, certo?

Vê o link e estuda tudo o que eu falei.

:seta: http://www.w3schools.com/cssref/pr_list-style-position.asp

Boa sorte :bye:

Carcleo · Fevereiro 12, 2012

Sim.

Poe iniciante nisso.

Agora entendi.

Mas, qual a diferença que há em

<div style:position.......

para

?

Eu estava usando a primeira posição.

Outra pergunta:

Usando inside, o bloco com a lista, caminhou(deslocou) para a direita e eu preciso fazer ela deslocar para a esquerda para alinha com o texto.

Esperimentei as outras opções mas nenhuma deu certo tambem.

Daí, a unica alternaiva foi colocar o texto em uma linha com duas colunas e a lista na linha de baixo cvom uma coluna e colspan=2. Daí, na primeira coluna da primeira coluna eu coloquei 4 espaços para encher e a lista alinhei a esquerda e deu certo

Guilherme Oderdenge · Fevereiro 12, 2012

Sim.

Poe iniciante nisso.

Agora entendi.

Mas, qual a diferença que há em

<div style:position.......

para

<div style=list-style-position: .......

?

Eu estava usando a primeira posição.

Qual a diferença do vermelho para o verde? Na prática, essa diferença de perguntas é exatamente a mesma feita por você.

A propriedade position vai determinar a posição de uma camada. Você pode posicionar uma camada fixamente na tela; você pode posicionar uma camada relativamente às outras camadas; pode ainda posicionar estaticamente na tela; ou, quem sabe, absolutamente - ignorando tudo e todos.

Já a propriedade list-style-position vai determinar a posição do seu estilo de lista. São duas coisas completamente diferentes. Para entender melhor, veja:

Outra pergunta:

Usando inside, o bloco com a lista, caminhou(deslocou) para a direita e eu preciso fazer ela deslocar para a esquerda para alinha com o texto.

Esperimentei as outras opções mas nenhuma deu certo tambem.

Daí, a unica alternaiva foi colocar o texto em uma linha com duas colunas e a lista na linha de baixo cvom uma coluna e colspan=2. Daí, na primeira coluna da primeira coluna eu coloquei 4 espaços para encher e a lista alinhei a esquerda e deu certo

Cadê a pergunta?

Carcleo · Fevereiro 12, 2012

Sobre o position entendi de vez;

Agora. Sobre a pergunta:

"Usando inside, o bloco com a lista, caminhou(deslocou) para a direita e eu preciso fazer ela deslocar para a esquerda para alinha com o texto.

Esperimentei as outras opções mas nenhuma deu certo tambem.

Daí, a unica alternaiva foi colocar o texto em uma linha com duas colunas e a lista na linha de baixo cvom uma coluna e colspan=2. Daí, na primeira coluna da primeira coluna eu coloquei 4 espaços para encher e a lista alinhei a esquerda e deu certo

"

A pergunta é: Como fazer isso? que a lista se desloque para a esquerda, não para a direita.

Guilherme Oderdenge · Fevereiro 12, 2012

Não sei como está sua folha de estilos e tampouco como o seu site está sendo renderizado. Mas, para todos os casos, já tentou um float: left? Ou, ainda, um text-align: left?

Arquivado

Listas Numeradas

Recommended Posts

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marrabel 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marrabel 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guilherme Oderdenge 42

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guilherme Oderdenge 42