Esta página descreve algumas maneiras para ajustar a disposição do seu documento.
Você muda a disposição do seu documento de amostra...
Informação: Disposição
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.
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.
Esta página descreve algumas técnicas simples que você pode tentar.
Estrutura do documento
Se você quer controlar a disposição do seu documento, então você pode ter que mudar sua estrutura.
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 DIV para criar a estrutura.
| No seu documento de amostra, os parágrafos numerados sob o segundo título não tem um "recipiente" próprio.
Sua folha de estilo não pode desenhar uma borda ao redor destes parágrafos, porque não há elemento especificado no seletor. Para fixar este problema estrutural, você pode adicionar uma tag <H3 class="numbered">Parágrafos numerados</H3> <DIV id="numbered"> <P class="numbered">Lorem ipsum</P> <P class="numbered">Dolor sit</P> <P class="numbered">Amet consectetuer</P> <P class="numbered">Magna aliquam</P> <P class="numbered">Autem veleum</P> </DIV> Agora sua folha de estilo pode use uma regra para especificar bordas em tordo de ambas as listas:
ul, #numbered {
border: 1em solid #69b;
padding-right:1em;
}
O resultado deve ser como este:
|
Tamanhos das unidades
Anteriormente neste tutorial, você especificou tamanhos em pixels (px). 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.
Para muitos propósitos é melhor especificar tamanhos com porcentagem ou em ems (em). 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.
| A borda da esquerda deste texto tem o tamanho especificado em pixels.
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:
|
| Para outros dispositivos, outras unidades de comprimento são apropriadas.
Há mais informação sobre isto em uma página anterior deste tutorial. Para detalhes completos sobre os valores e unidades que você pode usar, veja Values em CSS Specification. |
Disposição do texto
Duas propriedades especificam como o conteúdo de um elemento é alinhado. Você pode usá-las para ajustes simples na disposição:
text-align
- Alinha o conteúdo. Use um destes valores:
left,right,center,justify
text-indent
- Indenta o conteúdo, colocando o espaço que você especificar.
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.
Para centralizar títulos:
h3 {
border-top: 1px solid gray;
text-align: center;
}
Resulta em:
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. |
Flutuantes
A propriedade float força um elemento para a esquerda ou direita. Isto é uma maneira simples de controlar sua posição e tamanho.
O resto do conteúdo do documento normalmente flui ao redor do elemento flutuado. Você pode controlar isto usando a propriedade clear em outros elementos para fazê-los permanecer sem flutuantes.
| Em seu documento de amostra, as listas esticam através da janela. Você pode prevenir isto flutuando-os para a esquerda.
Para manter os títulos no lugar, você precisa também especificar que eles permaneçam limpos de flutuantes à sua esquerda:
ul, #numbered {float: left;}
h3 {clear: left;}
O resultado deve se parecer com isto:
(Um pequeno enchimento é necessário à direita das caixas, onde a borda fica muito perto do texto.) |
Posicionamento
Você pode especificar a posição dos elementos de quatro maneiras, especificando a propriedade position e um dos valores seguintes:
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.
relative
- A posição do elemento é alterada relativamente à sua posição normal.
- Use-o para mover um elemento por uma quantidade especificada. Às vezes você pode usar a margem do elemento para obter o mesmo efeito.
fixed
- A posição do elemento é fixa.
- Especifique a posição do elemento relativa à janela do documento. Mesmo que o resto do documento seja rolado, o elemento permanece fixo.
absolute
- A posição do documento é fixada relativamente a um elemento pai.
- Somente um elemento pai que esteja posicionado com
relative,fixedouabsoluteo fará.
- Você pode tornar qualquer elemento principal apropriado, especificando
position: relative;sem especificar qualquer movimento.
static
- O padrão. Use este valor caso precise desativar a posição explicitamente.
Agora, com estes valores da propriedade position (exeto para static), especifique uma ou mais propriedades: top, right, bottom, left, width, height para identificar onde você quer que o elemento apareça, e talvez também seu tamanho.
Para posicionar dois elementos no topo, crie um "recipiente" principal em seu documento com os dois elementos dentre dele:
<DIV id="parent-div"> <P id="forward">/</P> <P id="back">\</P> </DIV> Na sua folha de estilo, faça a posição principal
#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;
}
O resultado deve ser como isto, com a contra barra (\) sobre a barra (/): / \
|
| A história completa sobre posicionamento toma dois complexos capítulos em CSS Specification: Visual formatting model e Visual formatting model details.
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. |
Ação: Especificando a disposição
Mude seu documento de amostra e sua folha de estilo usando os exemplos anteriores nas seções Estrutura do documento e Flutuantes.
No exemplo dos Flutuantes, adicione enchimento para separar o texto da borda direita por 0,5 em.
Mude seu documento de amostra, adicionando esta tag perto do fim, somente antes de </BODY>
<IMG id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> Se você não baixou o arquivo de imagem anteriormente neste tutorial, baixe-o agora:
Prediga onde a imagem irá aparecer no seu documento. Então atualize seu navegador para ver se você estava certo. Adicione uma regra à sua folha de estilo que fixe a imagem no topo e a direita do seu documento. 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: (A) Os oceanos
(B) Parágrafos numerados 1: Lorem ipsum 2: Dolor sit 3: Amet consectetuer 4: Magna aliquam 5: Autem veleum
 |
O que vem depois?
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 Discussão.
A próxima página descreve seletores para regras mais avançadas das CSS, e algumas maneiras específicas de estilizar tabelas: Tabelas