Melhor forma de implementar um site 3-coluna usando
marcas? [fechadas]

StackOverflow https://stackoverflow.com/questions/83279

  •  01-07-2019
  •  | 
  •  

Pergunta

Estou desenvolvendo um site 3-coluna usando um layout parecido com isto: 

    <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 o CSS padrão propriedade 'posição' de <DIV>'s é 'estático', meu <DIV>'s foram mostrados um abaixo do outro, como esperado.

Então eu definir a propriedade 'posição' CSS para 'relativa', e mudou a propriedade 'top' da <DIV>'s 'meio' e 'direito' de - (menos) a altura do <DIV> anterior. Funcionou bem, mas esta abordagem me trouxe dois problemas:

1) Mesmo que o Internet Explorer 7 mostra 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á um monte de espaço em branco depois que o conteúdo é longo. I would'n gostaria de ter isso.

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

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

Foi útil?

Solução

Se você ainda não tiver verificado A List Apart você deve, pois ele contém alguns excelentes tutoriais e diretrizes para o design do site.

Este artigo em particular, devem ajudá-lo.

Outras dicas

CSS BluePrint uma tentativa. É realmente simples para começar com, mas poderoso o suficiente para a maioria das aplicações.

Fácil de entender tutoriais e exemplos. Tem uma biblioteca tipografia que produz bons resultados em linha reta fora da caixa.

De longe a maneira mais fácil que eu encontrei para fazer 3 colunas (ou qualquer outro número de colunas divididos sobre o espaço disponível em formas estranhas) é YUI grids . Há um YUI Grids Builder para dar-lhe o layout básico. A seguir irá dar-lhe um 750px de largura básica layout de 3 colunas (split 1/3 1/3 1/3) com uma barra lateral esquerda 160px. Mudá-lo para outras larguras, configurações da barra lateral e splits coluna é 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>

Há uma série de exemplos e bibliotecas lá fora, você pode pesquisar on - um casal já listadas (A List Apart é uma leitura obrigatória)

.

Eu usei o Yahoo Usuário Biblioteca Interface (YUI) no meu último par de sites e realmente gosto dele. Yahoo suporta completamente-lo e é rápido para entender e usar. Aqui está lá CSS para Grids , que permite formatar sua página em tantas colunas e seções como você quer.

YUI é bom porque você não tem que reinventar a roda para a fundação de seu site, e eles fazem todo o trabalho de certificar-se de suas fundações trabalhar em todos os navegadores. E o melhor de tudo, é grátis.

Gosto 960 Grid System . É um peso leve, fácil de usar css que devides a tela em 12 (ou 16) colunas. Você pode usá-lo para um projeto de 3 colunas e alinhar o resto do seu conteúdo em conformidade.

Tente flutuante do div para a esquerda, que irá mantê-los todos na mesma linha -. Supondo que haja espaço suficiente

Para coloumn fixo, basta definir altura: xxxpx irá torná-los iguais.

Use este 3 coluna layout do gerador tentar.

Este código de trabalho no meu computador com o 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>

Em primeiro lugar, o posicionamento relativo faz o que você descreveu:. Se reserva espaço na localização original, mas exibe o DIV compensado por uma certa quantidade

Se você flutuar as DIVs em seguida, eles serão empilhados da esquerda para a direita, mas isso pode causar problemas.

Um layout de três colunas usando CSS é muito difícil. Ter um olhar para [ http://www.glish.com/css/7.asp]

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top