1. #1
    Avatar de helldanger1
    Registo
    Aug 2007
    Localização
    in to the flames of hell
    Idade
    43
    Posts
    29.633

    Padrão Construção CSS com três colunas

    Vejamos como fazer uma página, construída unicamente com Folhas de Estilo em Cascata, composta por três colunas. Com desenho de largura fixa e fluida.
    Por Miguel Angel Alvarez - Tradução de JML



    Este artigo vai presupor que o leitor já compreende construção com CSS e que leu o artigo Contrução CSS com duas colunas. Vamos nos basear neste artigo para compor a página com CSS com três colunas.

    Em linhas gerais, a possibilidade que vamos explorar a seguir para cosntruir uma web com três colunas, consiste no seguinte: Colocaremos a coluna da esquerda flutuando à esquerda, a coluna da direita flutuando à direita e por último colocaremos a parte principal, que aparecerá no centro da página.

    O código HTML para fazer este exemplo será o seguinte:

    <div id="container">
    <div id="cabecalho">
    Cabecalho 01
    </div>
    <div id="corpo">
    <div id="lateral">
    <ul>
    <li><a href="#">Link 1</a>
    <li><a href="#">Vínculo 2</a>
    <li><a href="#">Outro link</a>
    <li><a href="#">Link maneiro</a>
    <li><a href="#">Mais links</a>
    <li><a href="#">Outro último</a>
    </ul>
    </div>
    <div id="otrolado">
    <img src="bannerlateral.gif" width="120" height="600" alt="">
    </div>
    <div id="principal">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla condimentum commodo orci. Nulla eget purus nec massa
    ...
    </div>
    </div>
    <div id="rodape">
    © 2006 CriarWeb.com
    </div>
    </div>

    Vemos que a página contém três partes, o cabeçalho, o corpo e o rodapé. O cabeçalho e o rodapé serão colocados no documento ocupando toda a largura disponível. A parte onde colocaremos as três colunas é o corpo.

    Dentro do corpo, como podemos ver, temos três camadas. A camada "lateral", que é a que pensamos colocar à esquerda. Logo está a camada "outrolado", que é a que planejamos colocar à direita. Por último está a camada "principal", que é a parte central. A camada "principal" aparecerá no centro, porque os dois lados estarão ocupados pelas camadas laterais.

    O CSS que vamos utilizar para construir isso será o seguinte. É muito parecido ao exemplo de construção CSS co duas colunas. Logo o comentaremos.

    BODY {
    font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 10 0 10 0px;
    text-align: center;
    background-color: #ebebeb;
    }
    #container{
    text-align: left;
    width: 770px;
    margin: auto;
    }
    #cabecalho{
    background-color: #d0d0ff;
    color: #333300;
    font-size:12pt;
    font-weight: bold;
    padding: 3 3 3 10px;
    }
    #corpo{
    margin: 10 0 10 0px;
    }
    #lateral{
    width: 160px;
    background-color: #999999;
    float:left;
    }
    #lateral ul{
    margin : 0 0 0 0px;
    padding: 0 0 0 0px;
    list-style: none;
    }
    #lateral li{
    background-color: #ffffcc;
    margin: 2 2 2 2px;
    padding: 2 2 2 2px;
    font-weight: bold;
    }
    #lateral a{
    color: #3333cc;
    text-decoration: none;
    }
    #outrolado{
    width: 120px;
    float: right;
    }
    #principal{
    margin-left: 170px;
    background-color: #ffffff;
    padding: 4 4 4 4px;
    width: 460px;
    }
    #rodape{
    background-color: #cccccc;
    padding: 3 10 3 10px;
    text-align:right;
    clear: both;
    }



    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  2. #2
    Avatar de helldanger1
    Registo
    Aug 2007
    Localização
    in to the flames of hell
    Idade
    43
    Posts
    29.633
    Teremos um container, de 770 píxels (px) de largura, que é onde vamos colocar todas as camadas. Centraremos em explicar a zona do corpo, que é onde aparecerão as três colunas.

    Vemos como a camada "lateral" tem definido uma largura de 160 px, e um float: left; para que flutue à esquerda. Vemos logo como a camada "outrolado" tem 120 px de largura e flutua à direita.

    Logo vemos a camada "principal", que tem uma margem à esquerda de 170 px, para deixar um espaço vazio em relação à camada "lateral". 170 px porque a camada "lateral" ocupa 160 px de largura, mais 10 px que é o que realmente estamos colocando de margem. Na camada "principal" também definimos uma largura de 460 px, para que ocupe justamente o espaço vazio que fica no centro.





    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

  3. #3
    Avatar de helldanger1
    Registo
    Aug 2007
    Localização
    in to the flames of hell
    Idade
    43
    Posts
    29.633
    Desenho fluido

    Os desenhos fluidos são os que se ajustam à largura que tenhamos na janela do navegador. No exemplo anterior o desenho tinha uma largura fixa de 700 píxels e agora vamos fazer duas modificações para que o desenho se ajuste à janela do navegador.

    Simplesmente teremos que tirar a definição de largura da camada "container".

    #container{
    text-align: left;
    margin: auto;
    }

    Logo, também tiraremos a definição de alargura da camada "principal" e acrescentaremos o atributo margin-right: 130px; para que a camada com o conteúdo central tenha uma margem em relação à camada que fica à direita. E 130 px porque a camada da direita ocupava 120 px, mais 10 px que é realmente a margem que estamos deixando.

    #principal{
    margin-left: 170px;
    background-color: #ffffff;
    padding: 4 4 4 4px;
    margin-right: 130px;
    }



    Todos os artigos por mim postados, estão hosp na própria Internet,Qualquer arquivo protegido deve permanecer,no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apaga-lo ou comprá-lo apos 24 horas. - A Aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário.

Tags para este Tópico

Permissões de Postagem

  • Você não pode iniciar novos tópicos
  • Você não pode enviar respostas
  • Você não pode enviar anexos
  • Você não pode editar suas mensagens
  •  

Conectar

Conectar