Melhor forma de implementar um site 3-coluna usando marcas? [fechadas]
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.
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]