Ajuda:Elementos estruturais de página

Ir para: navegação, pesquisa

Colunas

Duas Colunas

Classes de layout para duas colunas já estão predefinidas. As seguintes dividem as partes do conteúdo nas seguintes proporções:

  • 75% / 25% (Classes c75l e c25r)
  • 66% / 33% (Classes c66l e c33r)
  • 62% / 38% (Classes c62l e c38r)
  • 50% / 50% (Classes c50l e c50r)
  • 38% / 62% (Classes c38l e c62r)
  • 33% / 66% (Classes c33l e c66r)
  • 25% / 75% (Classes c25l e c75r)

A nidificação das classes de colunas é possível, assim:

Coluna esquerda (62%)

Esta é a coluna esquerda. Abrange 62% da largura. Esta é a coluna esquerda. Abrange 62% da largura. Esta é a coluna esquerda. Abrange 62% da largura. Esta é a coluna esquerda. Abrange 62% da largura. Esta é a coluna esquerda. Abrange 62% da largura. Esta é a coluna esquerda. Abrange 62% da largura.

Coluna direita (38%)

Esta é a coluna direita. Abrange 38% da largura. Esta é a coluna direita. Abrange 38% da largura. Esta é a coluna direita. Abrange 38% da largura. Esta é a coluna direita. Abrange 38% da largura.

O código para esta aparência é este: 

<!-- 2 Columns, ratio 66/33 -->
<div class="subcolumns">
 <div class="c66l">
  <div class="subcl">
   ...Conteúdo da coluna esquerda...
  </div>
 </div>
 <div class="c33r">
  <div class="subcr">
   ...Conteúdo da coluna direita...
  </div>
 </div>
</div>

Três colunas

Classes de layout para três colunas já estão predefinidas. A seguitne divide as partes do conteúdo na propor ção de 33% para cada coluna.

Coluna à esquerda (33%)

Esta é a coluna esquerda. Abrange 33% da largura. Esta é a coluna esquerda. Abrange 33% da largura. Esta é a coluna esquerda. Abrange 33% da largura. Esta é a coluna esquerda. Abrange 33% da largura.

Coluna no meio (33%)

Esta é a coluna do meio. Abrange 33% da largura. Esta é a coluna do meio. Abrange 33% da largura. Esta é a coluna do meio. Abrange 33% da largura. Esta é a coluna do meio. Abrange 33% da largura.

Coluna à direita (33%)

Esta é a coluna à direita. Abrange 33% da largura. Esta é a coluna à direita. Abrange 33% da largura. Esta é a coluna à direita. Abrange 33% da largura. Esta é a coluna à direita. Abrange 33% da largura.

O código desta aparência de colunas é este: 

<!-- 3 Columns, ratio 33/33/33 -->
<div class="subcolumns">
 <div class="c33l">
  <div class="subcl">
   ...Conteúdo da coluna à esquerda...
  </div>
 </div>
 <div class="c33l">
  <div class="subc">
   ...Conteúdo da coluna no meion...
  </div>
 </div>
 <div class="c32r">
  <div class="subcr">
   ...Conteúdo da coluna à direita...
  </div>
 </div>
</div>

Caixas

As caixas no menu da esquerda podem ser usadas dentro da área de conteúdo, também. Elas consistem em um cabeçalho e rodapé fornecendo os cantos redondos, uma barra de título facultativa coloridas, um rodapé opcional cor e área de conteúdo. Portanto, o layout de caixa é muito flexível, com várias combinações. De preferência use as caixas em combinação com Colunas.

Caixas simples

Uma caixa verde

Esta é a área de conteúdo da caixa verde. Quaisquer tipos de conteúdo em formato wiki/HTML podem ser colocados aqui.

Uma caixa cinza

Esta é a área de conteúdo da caixa cinza. Quaisquer tipos de conteúdo em formato wiki/HTML podem ser colocados aqui.


O código para estas caixas é este: 

<div class="green_box">
 <div class="box_top_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
 <div class="box_title_row">
  <div class="box_title">
   ...Título da caixa...
  </div>
 </div>
 <div class="box_content">
  ...Conteúdo...
 </div>
 <div class="box_bottom_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
</div>

<div class="grey_box">
 <div class="box_top_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
 <div class="box_title_row">
  <div class="box_title">
   ...Título da caixa...
  </div>
 </div>
 <div class="box_content">
  ...Conteúdo...
 </div>
 <div class="box_bottom_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
</div>

Caixas duplas

Uma caixa verde dupla

Esta é a área de conteúdo da caixa dupla verde. Quaisquer tipos de conteúdo em formato wiki/HTML podem ser colocados aqui.

...Rodapé da caixa dupla verde...
Uma caixa cinza dupla

Esta é a área de conteúdo da caixa dupla verde. Quaisquer tipos de conteúdo em formato wiki/HTML podem ser colocados aqui.

...Rodapé da caixa cinza dupla...


O código destas caixas é este: 

<div class="green_box_double">
 <div class="box_top_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
 <div class="box_title_row">
  <div class="box_title">
   ...Título da caixa...
  </div>
 </div>
 <div class="box_content">
  ...Conteúdo...
 </div>
 <div class="box_footer_row">
  <div class="box_footer">
   ...Rodapé...
  </div>
 </div>
 <div class="box_bottom_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
</div>

<div class="grey_box_double">
 <div class="box_top_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
 <div class="box_title_row">
  <div class="box_title">
   ...Título da Caixa...
  </div>
 </div>
 <div class="box_content">
  ...Conteúdo...
 </div>
 <div class="box_footer_row">
  <div class="box_footer">
   ...Rodapé...
  </div>
 </div>
 <div class="box_bottom_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
</div>

Reunião de caixas

Uma reunião de caixas verdes

Esta é a primeira área de conteúdo de uma reunião de caixas verdes. Quaisquer tipos de conteúdo em formato wiki/HTML podem ser colocados aqui.

Subtítulo 1

Esta é a segunda área de conteúdo de uma reunião de caixas verdes. Quaisquer tipos de conteúdo em formato wiki/HTML podem ser colocados aqui.

Subtítulo 2

Esta é a terceira área de conteúdo de uma reunião de caixas verdes. Quaisquer tipos de conteúdo em formato wiki/HTML podem ser colocados aqui.

Reunião de duas caixas cinzas

Esta é a primeira área de conteúdo de uma reunião de caixas cinzas. Quaisquer tipos de conteúdo em formato wiki/HTML podem ser colocados aqui.

Subtítulo

Esta é a segunda área de conteúdo de uma reunião de caixas cinzas. Quaisquer tipos de conteúdo em formato wiki/HTML podem ser colocados aqui.

...Rodapé das caixas cinzas reunidas...


Os códigos destas caixas são estes: 

<div class="green_box">
 <div class="box_top_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
 <div class="box_title_row">
  <div class="box_title">
   ...Título da caixa...
  </div>
 </div>
 <div class="box_content">
  ...Conteúdo_1...
 </div>
 <div class="box_title_row">
  <div class="box_title" style="padding-top: .5em">
   ...Subtítulo_1...
  </div>
 </div>
 <div class="box_content">
  ...Conteúdo_2...
 </div>
 <div class="box_title_row">
  <div class="box_title" style="padding-top: .5em">
   ...Subtìtulo_2...
  </div>
 </div>
 <div class="box_content">
  ...Conteùdo_3...
 </div>
 <div class="box_bottom_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
</div>

<div class="grey_box_double">
 <div class="box_top_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
 <div class="box_title_row">
  <div class="box_title">
   ...título da caixa...
  </div>
 </div>
 <div class="box_content">
  ...Conteúdo_1...
 </div>
 <div class="box_title_row">
  <div class="box_title" style="padding-top: .5em">
   ...Subtítulo_1...
  </div>
 </div>
 <div class="box_content">
  ...Conteúdo_2...
 </div>
 <div class="box_footer_row">
  <div class="box_footer">
   ...Rodapé...
  </div>
 </div>
 <div class="box_bottom_row">
  <div class="box_left"></div>
  <div class="box_right"></div>
 </div>
</div>
Obtida de "https://pt.opensuse.org/index.php?title=Ajuda:Elementos_estruturais_de_página&oldid=5192"