Ir para conteúdo

POWERED BY:

Arquivado

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

TeixeiraRamos

texto para direita

Por , em Desenvolvimento frontend

Recommended Posts

TeixeiraRamos    4

TeixeiraRamos
Postado

Olá,

Por favor, imaginar um texto evangélico.

Gostaria de colocar da seguinte forma:

(considere os versículos com elemento sup)

    Naquele tempo,

     1    bababababababababababab,

           nananananananana

           nananananan,

   10   tatatattaataatatatatatat

           bababababababa

12,1   yaybnanannannnanan

 

Citar

Observe que os versículos ficaram um embaixo do outro (exato o caso da virgula) 

 

Como os meus dados vem de uma banco de dados fiz o seguinte:

a) para a linha que não tem o número do versículo - <span class="tabulacao">Naquele tempo,</span>

CSS 

.tabulacao {
	text-indent: 0pt;
    margin-left: 30pt
}

b) para o caso da linha que contem versículo com um algarismo  1<span class="tab_num">bababababababababababab,</span>

CSS 

.tb_num{
	margin-left: 22pt
}

E, assim consecutivamente conforme os número dos versículos. .tb_num2, .tb_num3

Funcionou? Sim, mas os número eu não consigo alinhar como mostrei no início, ou seja:

     1

   10

12,1

Como ficou:

O texto alinhou perfeitamente mas os versículos ficaram:

1

10

20,1a

Tem como alinhar como desejo?

 

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

E.Martins    0

E.Martins
Postado
2 horas atrás, TeixeiraRamos disse:

Olá,

Por favor, imaginar um texto evangélico.

Gostaria de colocar da seguinte forma:

(considere os versículos com elemento sup)

    Naquele tempo,

     1    bababababababababababab,

           nananananananana

           nananananan,

   10   tatatattaataatatatatatat

           bababababababa

12,1   yaybnanannannnanan

 

 

Como os meus dados vem de uma banco de dados fiz o seguinte:

a) para a linha que não tem o número do versículo - <span class="tabulacao">Naquele tempo,</span>

CSS 


.tabulacao {
	text-indent: 0pt;
    margin-left: 30pt
}

b) para o caso da linha que contem versículo com um algarismo  1<span class="tab_num">bababababababababababab,</span>

CSS 


.tb_num{
	margin-left: 22pt
}

E, assim consecutivamente conforme os número dos versículos. .tb_num2, .tb_num3

Funcionou? Sim, mas os número eu não consigo alinhar como mostrei no início, ou seja:

     1

   10

12,1

Como ficou:

O texto alinhou perfeitamente mas os versículos ficaram:

1

10

20,1a

Tem como alinhar como desejo?

 

 

 

 

faz o seguinte: 

.tabulacao {
	text-indent: 0pt;
    margin-left: 30pt;
  	text-align:right;
}
.tb_num{
	margin-left: 22pt;
	text-align:left;
}

veja se é isso que quer: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Texte</title>
<style>
*{margin:0; padding:0;}
body{background-color:#e0e0e0; font-size:12px; color:#333333;}
.leitura{width:90%; height:auto; display:block; margin:0 auto; border:1px solid #cccccc; background-color:#ffffff; overflow:auto;}
.tabula{ width:3%; height:auto; text-align:right; float:left; margin:0 1% 0 0;}
.texto{width:96%; height:auto; text-align:left; float: right;}
</style>
</head>

<body>
<div class="leitura">
<span class="tabula">1</span>
<span class="texto">Na seqüência são mostrados os encontros e desencontros dos quatro amigos enquanto o autor mostra um pouco mais do imenso mundo que ele próprio criou, misturando RPG, Aventura e Ação.</span>
<span class="tabula">2</span>
<span class="texto">Um exame difícil com provas sobre- humanas com o objetivo de verificar se o examinado realmente é apto para se tornar um Hunter.</span>
<span class="tabula">2.1</span>
<span class="texto">E, assim consecutivamente conforme os número dos versículos. .tb_num2, .tb_num3</span>
</div>
</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Public2004    79

Public2004
Postado

Apenas ideias, veja se ajuda.

Exemplo A: 

span {
	display: inline-block;
	text-align: right;
	width: 5%;
}
<p>Derrotado dessa briga pode crer que eu não saio</p>
<p>O troféu é meu, pois o campeão sou eu</p>
<p><span>1</span>Os soldados de elite é que são condecorados</p>
<p><span>1.1</span>Os valentes corajosos é que são lembrados</p>
<p><span>1.1.1</span>Quem não tem pegada nunca nem é citado</p>
<p><span>1.1.2</span>Se o nome não ficar escrito, então é apagado</p>

Exemplo B: 

p, ol, li {
	margin: 5px;
}

<p>Derrotado dessa briga pode crer que eu não saio</p>
<p>O troféu é meu, pois o campeão sou eu</p>
<ol>
  <li value="1">Os soldados de elite é que são condecorados</li>
  <li value="11">Os valentes corajosos é que são lembrados</li>
  <li value="111">Quem não tem pegada nunca nem é citado</li>
  <li value="112">Se o nome não ficar escrito, então é apagado</li>
</ol>

Att.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • Danado_
      Inner join? left join? right join?
      Por Danado_
      como eu seleciono da seguinte forma: 
       
      tabela cadastro;
      id 1 - fulano
      id 2 - bertano
      id 3 - fulaninho
      ---------------------------------------
      Observações:
      estou usando um select multiple e dou um insert into na tabela a abaixo ficando assim:
      ----------------------------------------
      tabela mesas
      id 1 - fulano, bertano
      -----------------------------------------

      ok até ai!
       
      AGORA QUE PRECISO DA AJUDA DE VOCÊS!
      preciso fazer um inner, left ou righ para TRAZER APENAS O  id 3 - fulaninho (no caso verificando as duas tabelas e selecionando apenas o que NAO foi selecionado!)
       
      tenho isso:
       
      <select name="nome[]" multiple> <?php $mapa = mysqli_query($con, "SELECT * FROM cadastro'"); while($dados = mysqli_fetch_assoc($mapa)){ ?> <option><?php echo $dados['nome']; ?></option> <?php } ?> </select>
       
    • AlessandroPiaz
      Float em position relative
      Por AlessandroPiaz
      Fala pessoal. Em determinada pagina do meu site, criei uma sequencia de elementos, sendo um em baixo do outro, um alinhado a esquerda e outro a direita e assim procede. Mas sempre que coloco o float:right pros elementos da direita, parece que o position se comporta como absolute, mesmo sendo relative. E a organização dos elementos só fica certa com o position relative funcionando para todos. Preciso dos elementos da direita alinhados a direita e com o position relative funcionando direito. Me ajudem por favor.
×

Informação importante

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

  Aceito