DIV Inteligente

1. DIV Inteligente

Rodrigo Ferreira Valentim
engos

(usa openSUSE)

Enviado em 11/02/2011 - 18:24h

Tenho um código que estou tentando mudar para tableless, basicamente ele é assim (considere todas as margins e paddings como 0):

<html>
<table border=0px>
<tr>
<td width=200px> menu </td>
<td width=100%> textos </td>
<td width=200px> imagens </td>
</tr>
</table>
</html>

Com isso garanto que idependente da resolução do navegador, os td´s laterais vão sempre estar com tamanho fixo, enquanto que o central vai ser quem varia (tipo a página principal do VOL).

Mudando para DIV´s encontrei um problema, a DIV central nunca fica certa.

Tentei usar as DIV´s com float, mas como só tenho o tamanho das laterais, tentei usar nelas fixo e na central width=100%, como em tabelas, mas ela fica com o tamanho total da largura da tela ao invés de respeitar as outras, empurrando assim a div da direita para baixo.

Tentei mixar entre posições relativas e absolutas, incluindo DIV´s intermediárias, ao redor etc e nada, sempre ao redimensionar a tela acabo com problemas, por exemplo, a DIV central empurra a da direita para baixo, ou fica com largura curta demais e não preencha 100% do espaço entre as DIV´s laterais.

O objetivo é fazer com que o site se comporte parecido com o do VOL, onde ao redimensionar somente o centro é redimensionado e as laterais se mantem fixa, mas as diferenças são:

- a DIV central tem que ocupar 100% do espaço entre as DIV´s laterais, como no código em tabela.
- Quando a resolução for pequena demais, quero que a DIV do centro fique em um z-index que a deixe por cima das outras DIV´s (um dos principais motivos que está me fazendo mudar para tableless).

Alguém tem idéia de como se fazer isso de forma bem limpa e prática?


  


2. Coluna central líquida

Mauricio Calligaris
MCalligaris

(usa Arch Linux)

Enviado em 19/02/2011 - 01:30h

@engos

http://www.thenoodleincident.com/tutorials/box_lesson/basic3_touch.html <-- Um exemplo de como manter a coluna central líquida

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html <-- Embora um pouco velho ainda útil, pelo menos em minha opinião :D






Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts