Ir para o conteúdo

Layout Fixo 2 Colunas (Menu Vertical)


Criado por Giovani, Out 26 2010 19:52

Não há respostas para este tópico
  • Por favor, faça o login para responder

#1 Giovani

Giovani
  • Giovani
  • Colaborador
  • 44 Revisões

Revisou 26 outubro 2010 - 19:52

Layout fixo 2 colunas (menu vertical)

Objetivo:
Vamos construir um layout fixo CSS ("tableless") formado por 2 colunas com um menu vertical, alinhado à esquerda.

Nível de dificuldade:
Intermediário

Conceitos necessários:
Propriedades float e clear

Iniciando a construção:
Vamos começar a construção de nosso layout através de nossa página HTML. Para ter em mente como ficará nosso layout, a imagem abaixo nos mostra como será mais ou menos o resultado (somente divisão, sem o conteúdo).

Imagem postada

Salve o código a seguir com o nome de "layout.htm".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>T&iacute;tulo do Site</title>
	</head>
	<body>

	<div id="tudo">

		<div id="topo"><h1>T&iacute;tulo</h1></div>
	
		<div id="menu">
			<ul>
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
				<li><a href="#">Link 4</a></li>
				<li><a href="#">Link 5</a></li>
				<li><a href="#">Link 6</a></li>
				<li><a href="#">Link 7</a></li>
			</ul>
		</div>
	
		<div id="conteudo">
			<h2>T&iacute;tulo (1)</h2>
			<p>Pellentesque metus massa, lobortis quis, eleifend quis, varius eu, nibh. Aliquam neque mauris, bibendum sit amet, adipiscing vitae, volutpat vitae, purus. Morbi volutpat, metus ut ornare malesuada, tellus eros dapibus lectus, vitae pretium mi risus a massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse sit amet elit vitae metus porta porta. Maecenas in dui. Nullam suscipit ante non erat. In leo lacus, sollicitudin a, imperdiet sit amet, malesuada commodo, erat. Maecenas erat libero, vehicula et, ultricies blandit, mollis sed, enim. Duis felis. Quisque lectus dui, tincidunt vitae, cursus eget, porta ullamcorper, enim. Nam nisl augue, ullamcorper sit amet, consectetuer eu, pharetra ut, erat.</p>
			<h2>T&iacute;tulo (2)</h2>
			<p>Duis dui libero, feugiat eu, facilisis in, imperdiet et, neque. Donec lacinia, enim et malesuada tempor, erat lectus commodo sapien, non tincidunt magna diam a mauris. Vivamus ut urna. Suspendisse sed sem et libero vehicula molestie. Donec tincidunt metus at dui. Phasellus a nunc at neque tempus tristique. Proin congue augue vel pede. Etiam orci massa, fringilla in, laoreet varius, facilisis vitae, nibh. Praesent vulputate commodo nibh. Mauris luctus viverra eros. Maecenas vestibulum mattis sapien. Mauris rhoncus. Mauris arcu nisl, eleifend nec, pulvinar id, tristique eu, augue.</p>
			<hr />
			<h3>Destaque:</h3>
			<p>Phasellus felis odio, pharetra eu, auctor ultrices, egestas eu, tortor. Sed rhoncus. Pellentesque turpis. Vestibulum vitae nulla. Vestibulum pretium erat et orci. Etiam aliquam risus nec orci. Aliquam posuere imperdiet.</p>
		</div>
		<div id="rodape"><p>&reg; Todos os direitos reservados | <a href="#">Web Designer</a></p></div>

	</div>

	</body>
</html>
Entendendo o código HTML:
Analisando o código, temos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Nesta parte temos o DOCTYPE utilizado (XHTML 1.0 Strict).

<html xmlns="http://www.w3.org/1999/xhtml">
Aqui temos a tag de abertura do html, com a definição de "xmlns", que faz parte do DOCTYPE em questão.

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>T&iacute;tulo do Site</title>
</head>
Dentro da tag <head>, temos:

:seta: <meta http-equiv(...) />, especifica a codificação do nosso documento. Além dessa, existem outras meta-tags com informações importantes como palavras-chave, descrição, autor, informações para robôs de busca, etc.
:seta: <title>, define o nome que aparece na Barra de Título do browser.


<div id="tudo">
Podemos classificar como a "camada geral", que engloba todo o conteúdo da página.

<div id="topo">
Aqui é a parte que conterá nosso cabeçalho. Normalmente, nesta seção se coloca, por exemplo, o logotipo mais o nome da empresa, artes, etc. No nosso layout, estamos utilizando a tag de cabeçalho de nível 1 (<h1>).

<div id="menu">
Aqui é onde ficará o nosso menu (vertical).

<div id="conteudo">
Todo o conteúdo principal da página ficará dentro dessa área.

:seta: Dentro do "conteudo", temos a utilização de uma régua horizontal (<hr />), que está ali só para dar um efeito visual, separando a parte onde aparece "Destaque:" dos outros elementos.

<div id="rodape">
Aqui vão as informações de rodapé: quem desenvolveu o site (Web Designer ou empresa), menção aos "direitos autorais", link da Validação do documento, etc.

Nosso arquivo HTML está pronto. Veja o resultado parcial.

Agora, vamos à formatação! CSS em ação...

Criando o código CSS:

Antes de criarmos nosso arquivo CSS, vamos adicionar uma linha de comando que terá a função de "linkar" nossa página ao arquivo CSS externo:
<link href="style.css" rel="stylesheet" type="text/css" />
Obs.: Esta linha deve ser adicionada dentro da tag <head>, no início do documento. Ficará assim:
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link href="style.css" rel="stylesheet" type="text/css" />
	<title>Título do Site</title>
</head>
Agora, salve o código a seguir com o nome de "style.css" (este nome é o que será usado no nosso layout):
body {
	font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

#tudo {
	width: 720px;
	border: 2px solid #999;
}

#topo {
	width: 720px;
	height: 100px;
	background-color: #808080;
}

#topo h1 {
	margin: 0;
}

#menu {
	float: left;
	width: 130px;
	padding: 10px;
	background-color: #ccc;
}

#conteudo {
	float: left;
	width: 550px;
	padding: 10px;
}

#rodape {
	width: 700px;
	height: 30px;
	padding: 0 10px;
	background-color: #999;
	clear: both;
}

#rodape p {
	line-height: 28px;
}
Entendendo o código CSS:
Vamos analisar agora cada informação contida em nosso código CSS.
body {
	font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
Definimos o tamanho da fonte e a lista das fontes que devem ser utilizadas em nosso documento.

#tudo {
	width: 720px;
	border: 2px solid #999;
}
Declaramos a largura (width) da nossa div e aplicamos uma borda com largura de 2px (border).

#topo {
	width: 720px;
	height: 100px;
	background-color: #808080;
}
Declaramos que a div "topo" terá largura (width) de 720px, ocupando toda a extensão da div-pai (a div "tudo"). Especificamos sua altura (height) e aplicamos uma cor de fundo (background-color: #808080).

#topo h1 {
	margin: 0;
}
Ao abrir o documento sem essa formatação da tag <h1>no Firefox 2.0 e no Opera 9.20, é adicionado um espaço em branco indesejado na parte superior do layout. Isso deve ocorrer por causa da propriedade "margin padrão" que essa tag atribui. Para corrigir, o margin da tag <h1> que está dentro da div "topo"foi "zerado".

Obs.: No Internet Explorer 6, mesmo sem essa especificação, o erro não aparece. Por isso é recomendável testar os documentos em mais de um browser.


#menu {
	float: left;
	width: 130px;
	padding: 10px;
	background-color: #ccc;
}
Aqui vem a formatação da área do nosso menu. Um dos elementos mais importantes na construção do layout é a propriedade float. Com ela, conseguimos posicionar elementos lado a lado, fazendo com que o elemento que vem logo após a div "menu" na estrutura (no nosso layout, é a div "conteudo") fique posicionado ao lado direito da div "menu", e não abaixo, que é a forma de visualização "padrão" dos browsers. Especificamos uma largura (width) de 130px e aplicamos um padding de 10px. Também aplicamos uma cor de fundo (background-color: #ccc;).

#conteudo {
	float: left;
	width: 550px;
	padding: 10px;
}
Recebe as mesmas formatações da div "menu", alterando-se apenas os valores das propriedades (com execção à background-color, que não foi especificada aqui).

#rodape {
	width: 700px;
	height: 30px;
	padding: 0 10px;
	background-color: #999;
	clear: both;
}
A largura dessa div foi especificada 20px a menos que o total do layout (que é de 720px), devido à aplicação da propriedade padding de 10px dos lados direito e esquerdo (somando os valores de width e dos paddings, teremos os 720px). Especificamos uma altura (height), aplicamos uma cor de fundo (background-color: #999;) e encontramos uma propriedade chamada clear. Essa propriedade definida como both indica que a div "rodape" não poderá ter elemento algum ao seu lado, tanto direito quanto esquerdo, fazendo com que a mesma seja "empurrada" para baixo de todas as outras divs.

#rodape p {
	line-height: 28px;
}
Especificamos a altura da linha do parágrafo que contém as informações de rodapé.

Pronto! Temos nosso layout de 2 colunas. Veja o resultado final.

Considerações finais:
Para adequar este layout às suas necessidades, você pode alterar qualquer propriedade com exceção às float e clear. Fique atento quanto às novas medidas especificadas, caso as altere.

Os nomes escolhidos para o id das divs utilizados neste tutorial são somente exemplos. Você pode escolher um outro nome. Foram utilizados estes para facilitar a compreensão e identificar com clareza a posição de cada um no nosso layout. Lembre-se que qualquer nome pode ser atribuído, claro, desde que se respeite as regras. Veja esta nota do site do Maujor:

Nota: Para o nome que você "inventa" evite usar números e caracteres especiais. Tanto quanto possível use só letras de a-z e de A-Z. Há restrições quanto ao uso de números e caracteres.


Testado nos navegadores:
Internet Explorer 6
Firefox 2.0
Opera 9.20

Problemas/Soluções:

:seta: Situação 1: Ao visualizar o arquivo final, você se depara com a seguinte situação:

Imagem postada

Para contornar essa situação, existe uma técnica chamada Faux Columns. Veja esse tutorial: Técnica "Faux Columns" para layouts CSS.

:seta: Situação 2: Como fazer para remover o espaço em branco que existe em cima e do lado esquerdo, como mostra a imagem abaixo?

Imagem postada

Adicione a linha abaixo ao seu código CSS:
body {
	margin: 0; /* O margin "zero" atribuído ao body é o responsável pela remoção dos espaços */
	font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

Outras referências:
Meta-tags

Apoio:
Layout fixo 3 colunas

-----
Autor: Paulo de Tarso F. M.




1 usuário(s) está(ão) lendo este código

1 membro(s), 0 visitante(s) e 0 membros anônimo(s)