helldanger1
GForum VIP
- Entrou
- Ago 1, 2007
- Mensagens
- 29,631
- Gostos Recebidos
- 1
Criamos a lateral da página, onde se mostram várias caixas com um buscador e acesso a outras informações.
Por Miguel Angel Alvarez - Tradução de JML
Nos passos anteriores deste manual vimos como criar o cabeçalho e o corpo da página. Agora vamos ver como fazer a lateral direita da página.
A camada lateral
Na lateral direita situamos uma nova camada, que oferece acesso a serviços e outras informações.
<div id="lateral">
... conteudo lateral...
</div>
O conteúdo que vamos situar dentro desta camada será visto por partes, pois têm bastantes detalhes para serem destacados tranqüilamente. Os estilos são os seguintes:
#lateral{
width: 200px;
background-color: #EBF2FE;
border-bottom : 1px solid #cccccc;
border-left : 1px solid #cccccc;
float:right;
}
Define-se uma largura, uma cor de fundo e bordas de cor cinza claro na parte lateral esquerda e abaixo, os outros dois lados não terão borda por estar em contato com a borda de outros elementos.
Ademais, com o atributo float:right, indicamos que esta lateral deve "flutuar" para a direita. Assim, o corpo flutua à esquerda e a lateral à direita, com o qual conseguimos uma disposição em 2 colunas.
Por Miguel Angel Alvarez - Tradução de JML
Nos passos anteriores deste manual vimos como criar o cabeçalho e o corpo da página. Agora vamos ver como fazer a lateral direita da página.
A camada lateral
Na lateral direita situamos uma nova camada, que oferece acesso a serviços e outras informações.
<div id="lateral">
... conteudo lateral...
</div>
O conteúdo que vamos situar dentro desta camada será visto por partes, pois têm bastantes detalhes para serem destacados tranqüilamente. Os estilos são os seguintes:
#lateral{
width: 200px;
background-color: #EBF2FE;
border-bottom : 1px solid #cccccc;
border-left : 1px solid #cccccc;
float:right;
}
Define-se uma largura, uma cor de fundo e bordas de cor cinza claro na parte lateral esquerda e abaixo, os outros dois lados não terão borda por estar em contato com a borda de outros elementos.
Ademais, com o atributo float:right, indicamos que esta lateral deve "flutuar" para a direita. Assim, o corpo flutua à esquerda e a lateral à direita, com o qual conseguimos uma disposição em 2 colunas.