Conheça o Plugfeed | » Início » Desenvolvimento » CSS e Tableless » Layout Líquido ou Fluido
Conheça o Plugfeed | » Início » Desenvolvimento » CSS e Tableless » Layout Líquido ou Fluido -->
 
Avaliação: | Publicado em: 18/12/2006
Layout Líquido ou Fluido
Leonardo L Procopio (mas pode me chamar de Léo!). Sou formado em Analise e Desenvolvimento de Sistemas. Trabalho com desenvolvimento deskop e web. Meu objetivo e transmitir o que sei de forma simples e descontraída!
Layout Líquido ou Fluido

Salve, salve!!!
Estava meio sumido, mas to na área de novo!
Tenho visto por ai que a duvida em criar layout fluido (ou líquido) é grande, então, venho com um novo artigo pra eliminar isso!

Mas antes de tudo, gostaria de deixar claro que não gosto muito disso não, porque o layout (na minha opinião deve ter um limite, tanto pra + quanto pra -).

Vamos começar, p/evitar a falação!!!!
Essa é a estrutura básica de nossa pagina, e ela pode ser encontrada no meu outro artigo Criando Layout simples, parte 2

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Duas Colunas</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<div id="tudo">
    <div id="topo">
        <h1>Duas Colunas</h1>
    </div>
    <div id="colEsq">
         <h3>Menu</h3>
         <p>texto, com texto, com texto</p>
         <p>texto, com texto, com texto</p>
         <p>texto, com texto, com texto</p>
         <p>texto, com texto, com texto</p>
         <p>texto, com texto, com texto</p>
         <p>texto, com texto, com texto</p>
         <p>texto, com texto, com texto</p>
         <p>&nbsp;</p>
    </div>
    <div id="colDir">
         <h2>Conteudo</h2>
         <p>quanto mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!</p>
         <p>quanto mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!quanto mais, mais quanto!quanto
         mais, mais quanto!</p>
    </div>
    <div id="rodape">
         Desenvolvido...
    </div>
</div>
</body>
</html>

----------------------------------

Até aqui tranquilo né?!
Então vem a próxima parte que é a formatação css. Eu sugiro que você de uma lida naquele tutorial, pois ele esta mostrando o que cada pedaço de código de css faz, e nós vamos reutiliza-lo aqui, somente comentando 2 linhas p/obter nosso layout fluído!!!

------------------------------------

<style>
* {
    margin: 0;
}
#tudo {
    /*width: 770px; AQUI ENTRA O 1° COMENTÁRIO PARA FUNCIONAR O NOSSO LAYOUT FLUIDO */
    margin: 5px auto;
    text-align: left;
}
body {
    text-align: center;
}
#topo {
    height: 110px;
    text-align: center;
    background-color: #339999;
}
#colEsq {
    width: 170px;
    float: left;
    background-color: #6699ff;
}
#colDir {
    /*width: 600px; AQUI ENTRA O 2° COMENTÁRIO PARA FUNCIONAR O NOSSO LAYOUT FLUIDO */
    float: left;
    background-color: #fff;
}
#rodape {
    background-color: #339999;
    height: 20px;
    text-align: center;
    clear: both;
}
</style>

------------------------------

Mas ai tu pergunta: Léo é só isso?
Pode parecer mentira, mas é somente isso!
Bem simples, bem tranquilo!!!
Você retirou o tamanho do div#tudo, e retirou o tamanho também do div#colDir. Deixando assim para o navegador adequar o conteúdo a toda tela.
Mas repare que a coluna da esquerda não vai mudar, pois ela ainda tem o tamanho!!!
Viu com é molezinha?!!!

Bom, espero que essa dúvida não apareça nunca mais!!!
Grande abraço p/todos, e se não entenderam algo, ou se tem algo errado, pode falar que estou aqui para isso!!!
Valeu!

msn: leonardomerce@hotmail.com
twitter.com/eek_

relatosnoturno.blogspot.com
Este artigo é a parte 1 de 1 da seguinte série:
  1. Layout Líquido ou Fluido

Olá amigo! Funciona bem no IE7.
Mas no Firefox não funcionou...
O conteúdo fica abaixo do menu.
Qual seria a solução?
Leonardo L Procópio <leonardolp@gmail.com>
Muito bem lembrado!!!
substitui o codigo css #colDir por esse

#colDir {
margin-left: 171px;
background-color: #fff;
}
e tudo vai ficar correto!!
vou mudar isso em breve no artigo!!!
Obrigado Eduardo!
deuterio <deuterioo>
gostei do site que tem como ponto alto distribuir informação a todos sem excesão.
Adorei! Era exatamente o que eu estava precisando. Tenho uma pergunta: Gostaria de saber se é possível deixar uma margem de 5 px do lado direito e esquerdo e se é posível colocar borda em tudo. Agradeceria muuuuuito...
Leonardo L Procópio <leonardolp@gmail.com>
Silvana você pode coloar um padding: 0 5px; no body, e use o comando border: 1px solid black; nos lugares que você quer colocar a borda!
Grande abraço!
Eduardo Virginio <dupa31@hotmail.com>
Quero saber se funciona em um site feito em FRAME c/ 3 frame ou mais na página principal ?
Leonardo L Procópio <leonardolp@gmail.com>
Pra vc trabalhar com frame use tamanhos relativos (%). no frame
preciso fazer um layout liquido ...mas em flash ,....tem como?
Leonardo L Procópio <leonardolp@gmail.com>
James, de flash não entendo nada! Não sei se teria como fazer!
Grande abraço!
Leo excelente tuto, mas gostaria de saber o seguinte: tem como fazer a coluna da esquerda e da direita fica na metade e abaixo delas acrescentar mais 3 div's independentes ? Ex: para colocar, parceiros, publicidades, etc... Antecipadamente agrdeço a atenção dispensada.

Leonardo L Procópio <leonardolp@gmail.com>
Claro que da sim Clodoaldo!
Faz um teste, coloca as divs dentro das colunas que você quer, ou então basta repetir.
E para deixar mais a baixo, utilize o comando margin-top ou padding-top.
Seria isso?
Grande abraço! : Não avaliado
André Sabino <de-ssabino@uol.com.br>
Gostei do código, funcionou em todos os browsers que hoje em dia são muito utilizados, mas e se eu quiser 3 colunas? A da esquerda e a da direita fixas, mas a central ajustar-se ao restante da área? Estou tendo dificuldades para realizar este tipo de lay-out.

Obrigado desde já.
Oi, gostei, muito.
Você sabe como deixar o fundo estático e o conteudo no roll, veja o exemplo:
http://cursos.brunoavila.com.br/como-vender-sites.html
HHHHHHHHHHHHHHHHHHHH <HHHHHHHHHHHHHHHH>
p
HHHHHHHHHHHHHHHHHHHH <HHHHHHHHHHHHHHHH>
hhhhhhhhhhhhhhhhhhhhhh
HHHHHHHHHHHHHHHHHHHH <HHHHHHHHHHHHHHHH>
wqeweq








Um produto Detetive.net