path: root/files/pt-pt/learn/css/css_layout/index.html

---
title: Disposição
slug: Learn/CSS/CSS_layout
tags:
  - CSS:Como_começar
translation_of: Learn/CSS/CSS_layout
translation_of_original: Web/Guide/CSS/Getting_started/Layout
original_slug: Web/CSS/Como_começar/Disposição
---
<p>{{ PreviousNext("CSS:Como começar:Caixas", "CSS:Como começar:Tabelas") }}</p>

<p>Esta página descreve algumas maneiras para ajustar a disposição do seu documento.</p>

<p>Você muda a disposição do seu documento de amostra...</p>

<h2 id="Informa.C3.A7.C3.A3o:_Disposi.C3.A7.C3.A3o" name="Informa.C3.A7.C3.A3o:_Disposi.C3.A7.C3.A3o">Informação: Disposição</h2>

<p>Você pode usar as CSS para especificar vários efeitos visuais que mudam a disposição do seu documento. Algumas técnicas para especificação da disposição são avançadas,e além do alcance deste tutorial básico.</p>

<p>Quando você desenha uma disposição que aparece similar em vários navegadores, sua folha de estilo interage com a folha de estilo padrão do navegador e o motor de disposição em alguns caminhos pode se tornar complexo. Isto é também uma matéria avançada, além do alcance deste tutorial básico.</p>

<p>Esta página descreve algumas técnicas simples que você pode tentar.</p>

<h4 id="Estrutura_do_documento" name="Estrutura_do_documento">Estrutura do documento</h4>

<p>Se você quer controlar a disposição do seu documento, então você pode ter que mudar sua estrutura.</p>

<p>A linguagem de marcação do seu documento pode ter tags com propósito geral para criar a estrutura. Por exemplo, no HTML você pode usar a tag <code>DIV</code> para criar a estrutura.</p>

<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
 <caption>Exemplo</caption>
 <tbody>
  <tr>
   <td>No seu documento de amostra, os parágrafos numerados sob o segundo título não tem um "recipiente" próprio.
    <p>Sua folha de estilo não pode desenhar uma borda ao redor destes parágrafos, porque não há elemento especificado no seletor.</p>

    <p>Para fixar este problema estrutural, você pode adicionar uma tag <code>DIV</code> em torno dos parágrafos. Esta tag é única, então isto pode ser identificado por um atributo <code>id</code>:</p>

    <div style="width: 40em; color: gray;">
    <pre class="eval">
&lt;H3 class="numbered"&gt;Parágrafos numerados&lt;/H3&gt;
<strong style="color: black;">&lt;DIV id="numbered"&gt;</strong>
&lt;P class="numbered"&gt;Lorem ipsum&lt;/P&gt;
&lt;P class="numbered"&gt;Dolor sit&lt;/P&gt;
&lt;P class="numbered"&gt;Amet consectetuer&lt;/P&gt;
&lt;P class="numbered"&gt;Magna aliquam&lt;/P&gt;
&lt;P class="numbered"&gt;Autem veleum&lt;/P&gt;
<strong style="color: black;">&lt;/DIV&gt;</strong>
</pre>
    </div>

    <p>Agora sua folha de estilo pode use uma regra para especificar bordas em tordo de ambas as listas:</p>

    <div style="width: 30em;">
    <pre class="eval">
ul, #numbered {
  border: 1em solid #69b;
  padding-right:1em;
  }
</pre>
    </div>

    <p>O resultado deve ser como este:</p>

    <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
     <tbody>
      <tr>
       <td>
        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Os oceanos</p>

        <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;">
        <ul style="">
         <li>Ártico</li>
         <li>Atlântico</li>
         <li>Pacífico</li>
         <li>Índico</li>
         <li>Antártico</li>
        </ul>
        </div>

        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Parágrafos numerados</p>

        <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;">
        <p><strong>1: </strong>Lorem ipsum</p>

        <p><strong>2: </strong>Dolor sit</p>

        <p><strong>3: </strong>Amet consectetuer</p>

        <p><strong>4: </strong>Magna aliquam</p>

        <p><strong>5: </strong>Autem veleum</p>
        </div>
       </td>
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="Tamanhos_das_unidades" name="Tamanhos_das_unidades">Tamanhos das unidades</h3>

<p>Anteriormente neste tutorial, você especificou tamanhos em pixels (<code>px</code>). Estes são apropriados para alguns propósitos em um dispositivo de exposição como uma tela de computador. Mas quando o usuário muda o tamanho da fonte, sua disposição pode ficar errada.</p>

<p>Para muitos propósitos é melhor especificar tamanhos com porcentagem ou em ems (<code>em</code>). Um em é nominalmente o tamanho da fonte corrente (a largura de uma letra m). Quando o usuário muda o tamanho da fonte, sua disposição ajusta-se automaticamente.</p>

<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
 <caption>Exemplo</caption>
 <tbody>
  <tr>
   <td>A borda da esquerda deste texto tem o tamanho especificado em pixels.
    <p>A borda da direita tem o tamanho especificado em ems. No seu navegador, mude o tamanho da fonte para ver como a borda da direita se ajusta mas a borda da esquerda não:</p>

    <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
     <tbody>
      <tr>
       <td>
        <div style="">Redimensione-me por favor</div>
       </td>
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
 </tbody>
</table>

<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
 <caption>Mais detalhes</caption>
 <tbody>
  <tr>
   <td>Para outros dispositivos, outras unidades de comprimento são apropriadas.
    <p>Há mais informação sobre isto em uma página anterior deste tutorial.</p>

    <p>Para detalhes completos sobre os valores e unidades que você pode usar, veja <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> em CSS Specification.</p>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="Disposi.C3.A7.C3.A3o_do_texto" name="Disposi.C3.A7.C3.A3o_do_texto">Disposição do texto</h3>

<p>Duas propriedades especificam como o conteúdo de um elemento é alinhado. Você pode usá-las para ajustes simples na disposição:</p>

<ul>
 <li><code>text-align</code></li>
</ul>

<dl>
 <dd>Alinha o conteúdo. Use um destes valores: <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code></dd>
</dl>

<ul>
 <li><code>text-indent</code></li>
</ul>

<dl>
 <dd>Indenta o conteúdo, colocando o espaço que você especificar.</dd>
</dl>

<p>Estas propriedades aplicam-se a qualquer conteúdo como texto no elemento, não somente ao texto atual. Lembre-se que elas são herdadas pelo elemento filho, então você pode ter que desativá-las nos elementos filhos para não se surpreender com os resultados.</p>

<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
 <caption>Exemplo</caption>
 <tbody>
  <tr>
   <td>Para centralizar títulos:
    <div style="width: 30em;">
    <pre class="eval">
h3 {
  border-top: 1px solid gray;
  text-align: center;
  }
</pre>
    </div>

    <p>Resulta em:</p>

    <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
     <tbody>
      <tr>
       <td>
        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) Os oceanos</p>
       </td>
      </tr>
     </tbody>
    </table>

    <p>Em um documento HTML, o conteúdo que você vê abaixo do título não é contido estruturalmente pelo título. Então quando você alinha um título como isto, as tags abaixo do título não são afetadas pela herança.</p>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="Flutuantes" name="Flutuantes">Flutuantes</h3>

<p>A propriedade <code>float</code> força um elemento para a esquerda ou direita. Isto é uma maneira simples de controlar sua posição e tamanho.</p>

<p>O resto do conteúdo do documento normalmente flui ao redor do elemento flutuado. Você pode controlar isto usando a propriedade <code>clear</code> em outros elementos para fazê-los permanecer sem flutuantes.</p>

<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
 <caption>Exemplo</caption>
 <tbody>
  <tr>
   <td>Em seu documento de amostra, as listas esticam através da janela. Você pode prevenir isto flutuando-os para a esquerda.
    <p>Para manter os títulos no lugar, você precisa também especificar que eles permaneçam limpos de flutuantes à sua esquerda:</p>

    <div style="width: 30em;">
    <pre class="eval">
ul, #numbered {float: left;}
h3 {clear: left;}
</pre>
    </div>

    <p>O resultado deve se parecer com isto:</p>

    <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
     <tbody>
      <tr>
       <td>
        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Os oceanos</p>

        <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;">
        <ul style="">
         <li>Ártico</li>
         <li>Atlântico</li>
         <li>Pacífico</li>
         <li>Índico</li>
         <li>Antártico</li>
        </ul>
        </div>

        <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Parágrafos numerados</p>

        <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;">
        <p><strong>1: </strong>Lorem ipsum</p>

        <p><strong>2: </strong>Dolor sit</p>

        <p><strong>3: </strong>Amet consectetuer</p>

        <p><strong>4: </strong>Magna aliquam</p>

        <p><strong>5: </strong>Autem veleum</p>
        </div>
       </td>
      </tr>
     </tbody>
    </table>

    <p>(Um pequeno enchimento é necessário à direita das caixas, onde a borda fica muito perto do texto.)</p>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="Posicionamento" name="Posicionamento">Posicionamento</h3>

<p>Você pode especificar a posição dos elementos de quatro maneiras, especificando a propriedade <code>position</code> e um dos valores seguintes:</p>

<p>Estas são propriedades avançadas. É possível usá-las de maneiras simples — esta é a razão pela qual elas são mencionadas neste tutorial básico. Mas usando-as para disposições complexas pode-se dificultar.</p>

<ul>
 <li><code>relative</code></li>
</ul>

<dl>
 <dd>A posição do elemento é alterada relativamente à sua posição normal.</dd>
 <dd>Use-o para mover um elemento por uma quantidade especificada. Às vezes você pode usar a margem do elemento para obter o mesmo efeito.</dd>
</dl>

<ul>
 <li><code>fixed</code></li>
</ul>

<dl>
 <dd>A posição do elemento é fixa.</dd>
 <dd>Especifique a posição do elemento relativa à janela do documento. Mesmo que o resto do documento seja rolado, o elemento permanece fixo.</dd>
</dl>

<ul>
 <li><code>absolute</code></li>
</ul>

<dl>
 <dd>A posição do documento é fixada relativamente a um elemento pai.</dd>
 <dd>Somente um elemento pai que esteja posicionado com <code>relative</code>, <code>fixed</code> ou <code>absolute</code> o fará.</dd>
</dl>

<dl>
 <dd>Você pode tornar qualquer elemento principal apropriado, especificando <code>position: relative;</code> sem especificar qualquer movimento.</dd>
</dl>

<ul>
 <li><code>static</code></li>
</ul>

<dl>
 <dd>O padrão. Use este valor caso precise desativar a posição explicitamente.</dd>
</dl>

<p>Agora, com estes valores da propriedade <code>position</code> (exeto para <code>static</code>), especifique uma ou mais propriedades: <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>width</code>, <code>height</code> para identificar onde você quer que o elemento apareça, e talvez também seu tamanho.</p>

<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
 <caption>Exemplo</caption>
 <tbody>
  <tr>
   <td>Para posicionar dois elementos no topo, crie um "recipiente" principal em seu documento com os dois elementos dentre dele:
    <div style="width: 30em;">
    <pre class="eval">
&lt;DIV id="parent-div"&gt;
&lt;P id="forward"&gt;/&lt;/P&gt;
&lt;P id="back"&gt;\&lt;/P&gt;
&lt;/DIV&gt;
</pre>
    </div>

    <p>Na sua folha de estilo, faça a posição principal <code>relative</code>. Ela não precisa que seja especificado qualquer movimento atual. Faça a posição subordinada <code>absolute</code>:</p>

    <div style="width: 30em;">
    <pre>
#parent-div {
  position: relative;
  font: bold 200% sans-serif;
  }

#forward, #back {
  position: absolute;
  margin:0px;
  top: 0px;
  left: 0px;
  }

#forward {
  color: blue;
  }

#back {
  color: red;
  }
</pre>
    </div>

    <p>O resultado deve ser como isto, com a contra barra (\) sobre a barra (/):</p>

    <div style="position: relative; left: .33em; font: bold 300% sans-serif;">
    <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p>

    <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p>
    </div>

    <table style="border: 2px outset #36b; padding: 1em; width: 30em; height: 5em; background-color: white;">
     <tbody>
      <tr>
       <td> </td>
      </tr>
     </tbody>
    </table>

    <p> </p>
   </td>
  </tr>
 </tbody>
</table>

<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
 <caption>Mais detalhes</caption>
 <tbody>
  <tr>
   <td>A história completa sobre posicionamento toma dois complexos capítulos em CSS Specification: <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> e <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>.
    <p>Se você está desenhando folhas de estilo para trabalharem em vários navegadores, então você também precisa levar em conta as diferenças na maneira em que os navegadores interpretam o padrão, e talvez bugs em algumas versões de alguns navegadores.</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="A.C3.A7.C3.A3o:_Especificando_a_disposi.C3.A7.C3.A3o" name="A.C3.A7.C3.A3o:_Especificando_a_disposi.C3.A7.C3.A3o">Ação: Especificando a disposição</h2>

<p>Mude seu documento de amostra e sua folha de estilo usando os exemplos anteriores nas seções <strong>Estrutura do documento</strong> e <strong>Flutuantes</strong>.</p>

<p>No exemplo dos <strong>Flutuantes</strong>, adicione enchimento para separar o texto da borda direita por 0,5 em.</p>

<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
 <caption>Desafio</caption>
 <tbody>
  <tr>
   <td>Mude seu documento de amostra, adicionando esta tag perto do fim, somente antes de <code>&lt;/BODY&gt;</code>
    <pre>
&lt;IMG id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"&gt;
</pre>

    <p>Se você não baixou o arquivo de imagem anteriormente neste tutorial, baixe-o agora:</p>

    <table style="border: 2px solid #ccc;">
     <tbody>
      <tr>
       <td><img alt="Image:Yellow-pin.png" class="internal" src="/@api/deki/files/2557/=Yellow-pin.png"></td>
      </tr>
     </tbody>
    </table>

    <p>Prediga onde a imagem irá aparecer no seu documento. Então atualize seu navegador para ver se você estava certo.</p>

    <p>Adicione uma regra à sua folha de estilo que fixe a imagem no topo e a direita do seu documento.</p>

    <p>Atualize seu navegador e diminua o tamanho da janela. Cheque se a imagem permanece no topo e a direita mesmo que você role seu documento:</p>

    <div style="position: relative; width: 29.5em; height: 18em;">
    <div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;">
    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Os oceanos</p>

    <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;">
    <ul style="">
     <li>Ártico</li>
     <li>Atlântico</li>
     <li>Pacífico</li>
     <li>Índico</li>
     <li>Antártico</li>
    </ul>
    </div>

    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Parágrafos numerados</p>

    <div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;">
    <p><strong>1: </strong>Lorem ipsum</p>

    <p><strong>2: </strong>Dolor sit</p>

    <p><strong>3: </strong>Amet consectetuer</p>

    <p><strong>4: </strong>Magna aliquam</p>

    <p><strong>5: </strong>Autem veleum</p>
    </div>

    <p style=""> </p>

    <div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="/@api/deki/files/2557/=Yellow-pin.png"></div>
    </div>
    </div>
   </td>
  </tr>
 </tbody>
</table>

<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>

<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Disposi%C3%A7%C3%A3o" title="Talk:pt/CSS/Como_começar/Disposição">Discussão</a>.</p>

<p>A próxima página descreve seletores para regras mais avançadas das CSS, e algumas maneiras específicas de estilizar tabelas: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Tabelas" title="pt/CSS/Como_começar/Tabelas">Tabelas</a></strong></p>

<p>{{ PreviousNext("CSS:Como começar:Caixas", "CSS:Como começar:Tabelas") }}</p>