ti-enxame.com

A melhor maneira de implementar um site de 3 colunas usando as tags <DIV>?

Estou desenvolvendo um site de 3 colunas usando um layout como este:

    <div id='left'   style='left:      0; width: 150px; '> ... </div>
    <div id='middle' style='left:  150px; right: 200px'  > ... </div>
    <div id='right'  style='right:     0; width: 200px; '> ... </div>

Mas, considerando a propriedade CSS 'position' padrão de <DIV>'s é 'estático', meu <DIV>'s foram mostrados um abaixo do outro, conforme o esperado.

Então, defino a propriedade CSS 'position' como 'relativa' e alterei a propriedade 'top' de 'middle' e 'right' <DIV>'s a - (menos) a altura do anterior <DIV>. Funcionou bem, mas essa abordagem me trouxe dois problemas:

1) Embora o Internet Explorer 7 mostre três colunas corretamente, ele ainda mantém a barra de rolagem vertical como se o <DIV>'s foram posicionados um abaixo do outro e há muito espaço em branco após o término do conteúdo. Eu não gostaria disso.

2) A altura desses elementos é variável, então eu realmente não sei qual valor definir para cada <DIV> 's' top 'propriedade; e eu não gostaria de codificá-lo.

Então, minha pergunta é: qual seria a melhor maneira (simples + elegante) de implementar esse layout? Eu gostaria de evitar o posicionamento absoluto e também manter meu design sem tabelas.

20
E.Z.

Se você ainda não fez check-out A List Apart você deve, pois contém alguns excelentes tutoriais e diretrizes para o design do site.

Este artigo em particular, deve ajudá-lo.

23
Josh

Experimente BluePrint CSS uma tentativa. É realmente simples começar, mas poderoso o suficiente para a maioria dos aplicativos.

Tutoriais e exemplos fáceis de entender. Possui uma biblioteca de tipografia que produz resultados decentes diretamente da caixa.

2
Mats Wiklander

Eu gosto 960 Grid System . É um css leve e fácil de usar, que divide a tela em 12 (ou 16) colunas. Você pode usá-lo para um design de 3 colunas e alinhar o restante do conteúdo de acordo.

1
sdfx

Existem vários exemplos e bibliotecas por aí que você pode pesquisar - alguns já listados (uma lista à parte é uma leitura obrigatória).

Eu usei o Yahoo User Interface Library (YUI) nos meus últimos sites e realmente gostei. O Yahoo oferece suporte completo e é rápido para entender e usar. Aqui está CSS para Grids , que permite formatar sua página em quantas colunas e seções você desejar.

O YUI é legal porque você não precisa reinventar a roda para a fundação do seu site, e eles fazem todo o trabalho para garantir que suas fundações funcionem em todos os navegadores. E o melhor de tudo, é grátis.

1
Baer

De longe, a maneira mais fácil de encontrar três colunas (ou qualquer outro número de colunas divididas no espaço disponível de maneiras estranhas) é YUI Grids . Existe um YUI Grids Builder para fornecer o layout básico. A seguir, é apresentado um layout básico de 3 colunas com 750 px (dividido em 1/3 1/3 1/3) com uma barra lateral esquerda de 160 px. Mudar para outras larguras, configurações da barra lateral e divisões de colunas é realmente fácil.

1    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
2    "http://www.w3.org/TR/html4/strict.dtd"> 
3   <html> 
4   <head> 
5      <title>YUI Base Page</title> 
6      <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> 
7   </head> 
8   <body> 
9   <div id="doc" class="yui-t1"> 
10     <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> 
11     <div id="bd"> 
12      <div id="yui-main"> 
13      <div class="yui-b">    <div class="yui-gb"> 
14          <div class="yui-u first"> 
15      <!-- YOUR DATA GOES HERE --> 
16              </div> 
17          <div class="yui-u"> 
18      <!-- YOUR DATA GOES HERE --> 
19              </div> 
20          <div class="yui-u"> 
21      <!-- YOUR DATA GOES HERE --> 
22              </div> 
23      </div> 
24  </div> 
25      </div> 
26      <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div> 
27       
28      </div> 
29     <div id="ft">Footer is here.</div> 
30  </div> 
31  </body> 
32  </html> 
1
Peter Kelley

Tente flutuar os divs para a esquerda, para mantê-los todos na mesma linha - supondo que haja espaçamento suficiente.

0
Joshua

Este código funciona no meu computador com IE 8, Chrome, Firefox.

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title> Test </title>
    </head>
    <body>
        <div id="grad2" style="width:15%; height:100%; position:fixed; top:0px; left:0px; background-color:rgb(147,81,73);">
        <a href="http://abv.bg"> Column1 </a> </div>
        <div id="grad4" style="width:70%; height:100%; position:fixed; top:0px; left:15%; background-color:rgb(0,0,0);">
        <font color="#FFFFFF">Column 2 </font> </div>
        <div id="grad3" style="width:100%; height:100%; position:fixed; top:0px; left:85%; background-color:rgb(60,255,4);">
        <a href="http://abv.bg"> Column 3 </a> </div>
    </body>
</html>
0
Nqko

Para colunas fixas, basta definir height: xxxpx as tornará iguais.

Use este gerador de layout de 3 colunas para tentar.

0
unigogo