No mundo da programação, uma das coisas que não é facil 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!

css3

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, optámos 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 referenciámos 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.

Abraço e até já!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Jose
    11 de dezembro de 2011

    Olá.
    Estou precisando da sua ajuda.
    Que livro devo eu comprar para começar a aprender php?



  2. Luiz
    20 de maio de 2012

    não é mais facil assim

    #geral { width: 960px;
    height: 490px;
    font-family: Verdana, Geneva, sans-serif;
    font-size:11px;
    margin: 0 auto;
    }
    #esquerdo{
    width: 520px;
    height: 490px;
    float: left;
    }

    #direito{
    width: 430px;
    float: right;
    }


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz