Image Image Image Image Image
Scroll to Top

Topo

20

dez
2011

Sem Comentários

Em Blog
CSS
HTML

Por Allison

3 Métodos para criar colunas de largura igual com CSS

Em 20, dez 2011 | Sem Comentários | Em Blog, CSS, HTML | Por Allison

No mundo da programação, uma das coisas que não é fácil fazer, nomeadamente em CSS é criar colunas de igual largura. No entanto, e como o caro leitor sabe, não há impossíveis! Através de um destes quatro métodos que lhe vamos apresentar, poderá facilmente criar colunas de igual largura em CSS. Durante a apresentação destes quatro métodos poderá observar que existem prós e contras, que em nada alteram o resultado final – colunas com largura igual. Este artigo foi baseado num artigo dos colegas do Vanseodesign. Aconselhamos a leitura dos nossos artigos de CSS para principiantes, nomeadamente CSS para Tótós!, Tutorial: Aprender o básico sobre CSS e ainda Começando com CSS – Dê os primeiros passos em segurança que o irão ajudar a fazer a introdução a esta linguagem, para completar com sucesso os 3 Métodos para criar colunas de igual largura com CSS!

1. BORDERS & NEGATIVE MARGINS

Este método é bastante conhecido e também bastante simples de aplicar. Consiste em definir limites e margens negativas para dar a ilusão de colunas com largura igual. Como temos vindo a dar enfase, o melhor para aprender é praticar, e é isso que vamos fazer:

1. Crie um ficheiro HTML com o seguinte código:

<body>
<div id="container">
    <div id="sidebar">
        <p>Sidebar</p>
    </div>
    <div id="content">
        <p>Main content</p>
    </div>
</div>
</body>

2. De seguida crie um ficheiro CSS, insira o código abaixo e linke-o ao documento HTML. Se não souber como o fazer, visite o artigo Programação CSS para iniciantes (Parte I).

#container {
    width:960px;
    margin: 0 auto;
}
#content {
    float:left;
    width:700px;
    border-left: 260px solid #555;
}
#sidebar {
    float: left;
    width:260px;
    margin-right: -260px;
    position: relative;
}

3. Guarde o ficheiro HTML e o ficheiro CSS e observe o resultado prematuro:

4. Neste método as cores de fundo são definidas em #content no ficheiro CSS. Definimos o limite a 260px para criar espaço para a sidebar e definimos o fundo desse limite, que é o fundo da sidebar. Depois define-se a margem direita negativa de 260px para mover a sidebar para onde queremos, no espaço que criámos dentro do #content, para mover a sidebar para onde queremos. Como o #container está hierarquicamente por cima da #sidebar, é necessário dar a posição relativa para que saia de trás do #content. E basicamente temos as colunas criadas!

2. PSEUDO COLUMNS

As pseudo colunas são uma boa alternativa às “faux columns” pois não necessitam de utilizar uma imagem no fundo como uma cor de fundo. No entanto este método continua a ser similar às faux columns pois também envolve o método de definir um fundo no container. Este não é um método comum, e por isso mesmo é um pouco restrito relativamente a onde pode ser aplicado, mas quando encontrar essa situação onde pode ser aplicado, funciona perfeitamente. Passamos a praticar:

1. Crie um ficheiro HTML e insira o seguinte código:

<body>
<div id="container">
    <div id="sidebar">
        <p>Sidebar</p>
    </div>
    <div id="content">
        <p>Main content</p>
    </div>
</div>
</body>

2. De seguida crie um ficheiro CSS, insira o código abaixo e linke-o ao documento HTML. Se não souber como o fazer, visite o artigo Programação CSS para iniciantes (Parte I).

#container {
    background: #555;
    overflow: hidden
}
#content {
    float:left;
    width:75%;
    background:#eee;
}
#sidebar {
    float:left;
    width:25%;
    background:#555;
}

3. Guarde os ficheiros e observe o resultado:

4. Além da utilização de percentagem ao invés de px, irá notar algumas diferenças relativamente aos outros métodos, como a definição da cor de fundo no #sidebar e no #content. Como referimos neste caso utilizamos uma cor de fundo, e não uma imagem de fundo. A limitação deste método prende-se com o facto de ter de haver uma coluna mais pequena que outra, uma diferença que não se deverá notar por parte de quem visita a página.

3. FAUX COLUMNS

Este método já data de 2004, quando foi introduzido pela primeira vez numa página web. Não só por causa da sua antiguidade mas também pela sua facilidade e fiabilidade, as faux columns são provavelmente o melhor método para criar colunas de igual largura. Em termos básicos, consiste em utilizar uma imagem que é repetida verticalmente, mantendo desta forma a mesma largura ao longo do eixo vertical. Vamos praticar:

1. Crie um ficheiro HTML e insira o seguinte código:

<body>
<div id="container">
    <div id="sidebar">
        <p>Sidebar</p>
    </div>
    <div id="content">
        <p>Main content</p>
    </div>
</div>
</body>

2. De seguida baixe este ficheiro e insira-o na pasta onde estiverem os ficheiros HTML e CSS. Crie um ficheiro CSS, insira o código abaixo e linke-o ao documento HTML. Se não souber como o fazer, visite o artigo Programação CSS para iniciantes (Parte I).

#container {
    width:960px;
    margin:0 auto;
    background: url("faux-columns.png") repeat-y;
    overflow: hidden
}
#sidebar {
    float:left;
    width:340px;
}
#content {
    float:left;
    width:620px;
}

3. Guarde os ficheiros HTML e CSS e observe o resultado:

4. Por outro lado também poderia ter sido usado o <body> como container, mas é preferível criar uma div para esse efeito. O container tem a largura de 960px, e essa largura terá de ser dividida entre a sidebar e o content. Para fazer uma divisão esteticamente bonita, optamos por criar a sidebar com 340px e o container com 620px. Aquilo que irá diferenciar a sidebar e o content é a sua cor de fundo. Como referenciamos anteriormente, utilizámos uma imagem como cor de fundo não só para dar cor como também para delimitar as áreas de conteúdos. Como nota adicional, é necessário definir o overflow: hidden para que a div container se mantenha como pretendemos. Este método é especialmente indicar para larguras fixas, mas poderá obter bons resultados com larguras não fixas.Obviamente não está limitado à cor e estética dada pela imagem de fundo, podendo adicionar efeitos ao seu gosto e alterando a imagem de fundo.

Fonte: Diogo Espinha/escolacriatividade

Redes Sociais

Tags | ,

Enviar um Comentário