Array
(
)

Como faço para configurar margens em níveis usando a instrução ol em ASP

Caio Campo
   - 18 fev 2016

Tenho uma estrutura hierárquica de texto da seguinte forma:
TituloP 1 - Texto
I. Texto
i. Texto
a. Texto
b. Texto
ii. Texto
a. Texto
b. Texto
TítuloS 1 - Texto
I. Texto
II. Texto
i. Texto
a. Texto
b. Texto
ii. Texto
a. Texto
b. Texto
c. Texto
TituloP 2 - Texto
I. Texto
i. Texto
a. Texto
b. Texto
c. Texto
ii. Texto
a. Texto
b. Texto
c. Texto
d. Texto
e. Texto
f. Texto
g. Texto
Onde: TítuloP é o nome do título principal e TítuloS é o nome do título secundário que se refere a um nível hierárquico de outro documento.
Montei o arquivo ASP como o indicado abaixo:
<style>
p
{margin-right: 10px;
margin-left: 2px;}
p.sub-cabecalho
{margin-left: 220px;}
p.TituloP
{margin-left: 10px;}
p.TituloS
{margin-left: 20px;}
p.NivelP_I
{margin-left: 25px;}
p.NivelS_I
{margin-left: 35px;}
p.NivelP_i
{margin-left: 40px;}
p.NivelS_i
{margin-left: 50px;}
p.NivelP_a
{margin-left: 55px;}
p.NivelS_a
{margin-left: 65px;}

</style>
A configuração para a margem do nível P fica correta, porém quando coloco a configuração das margens do nível S dentro da instrução ol do nível P, os textos ficam totalmente fora das posições (dependendo se colocar a instrução no nível P I, i ou a). Tem alguma forma de reposicionar as margens ao valor inicial (2)?
Caio Marcio

Jothaz
   - 18 fev 2016

Como você esta imprimindo os valores, esta usando Listas encadeadas?
Talvez usando listas facilite sua vida.

Caio Campo
   - 09 mar 2016

Fiz o seguinte código (mais simples que o anterior):

<!-- Define estilo da página -->

<style>

p {margin-right: 10px; margin-left : 2px;}

p.sub-cabecalho {margin-left : 220px;}

p.Classif1 {margin-left : 10px;}

p.Classif2 {margin-left : 25px;}

p.Genero {margin-left : 40px;}

p.Especie {margin-left : 55px;}

</style>

<!-- Carrega variáveis -->

<!-- Cálculos -->

<!-- Monta cabeçalho -->

<td width="160" valign="top" id="tf_colesq">
<!--#include virtual="/Futebol/incs/shtm/menuesq.shtm" -->
</td>

<!-- Mostra informações -->

<td valign="top" id="tf_main">
<div id="tf_texto">
<!--#include virtual="/Futebol/incs/shtm/barra-navegacao.shtm" -->
<div id="tf_breadcrumb">
<script language="javascript" type="javascript">
mostraBreadcrumb('Produtos e Serviços > Geral');
</script>
</div>

<!-- Mostra Texto -->

<br />
<div id="area_impressao">
<h1>Classificação de produtos</h1>
<h2><b>Atualização - 09/03/2016</b></h2>
<br /><br />

<p>
O Coordenador da Administração Financeira, no uso de suas atribuições legais, estabelece os seguintes produtos:
</p>
<br />

<p class="Classif1">
<b>Materiais</b> - Estão divididos da seguinte forma:
</p>

<p class="Classif2">
1º - Limpeza
</p>
<ol class="Especie" type="a">
<li>Sabão em pó;</li>
<li>Detergente;</li>
<li>Sabonete;</li>
<li>Água sanitária;</li>
<li>Sabonete líquido.</li>
</ol>
<br />

<p class="Classif2">
2º - Escritório
</p>
<ol class="Especie" type="a">
<li>Caneta;</li>
<li>Lápis;</li>
<li>Borracha;</li>
<li>Régua;</li>
<li>Caderno;</li>
<li>Apontador;</li>
<li>Compasso;</li>
<li>Livro.</li>
</ol>
<br /><br />

O Texto é exibido da seguinte forma:

Materiais - Estão divididos da seguinte forma:

1º - Limpeza

a. Sabão em pó;
b. Detergente;
c. Sabonete;
d. Água sanitária;
e. Sabonete líquido.

2º - Escritório

a. Caneta;
b. Lápis;
c. Borracha;
d. Régua;
e. Caderno;
f. Apontador;
g. Compasso;
h. Livro.

O correto é os itens com letras (a, b, ...) ficarem posicionados 30 pixels após os subitens e os subitens deslocados mais para a esquerda.

Caio Campo
   - 09 mar 2016

Notei que a instrução ol mata a configuração de margem. Colocando uma instrução simples <p class="Especie">Texto</p>, a margem fica correta.