Ir para o conteúdo

Giovani

Cadastrado: 13 Out 2010
Offline Última atividade: Set 25 2012 14:34
-----

#343 Layout Fixo 2 Colunas (Menu Vertical)

Postado por Giovani em 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.


#341 Layout Fixo 3 Colunas

Postado por Giovani em 26 outubro 2010 - 19:18

Layout fixo 3 colunas

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

Nível de dificuldade:
Intermediário

Conceitos necessários:
Propriedades float e clear

Exemplos de sites "3 colunas":
UOL, Yahoo!, stock.xchng (Site de Imagens)

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ítulo do Site</title>
</head>
<body>

<div id="tudo">

	<div id="topo"><h1>Tí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ítulo (1)</h2>
		<p>In nibh odio, porttitor vel, mattis vel, porttitor eget, orci. Duis consectetuer tempus enim. Sed ut felis et tortor feugiat malesuada. Nam vulputate, tellus eu nonummy dapibus, pede risus luctus dolor, ut nonummy urna felis a lacus. Nam in dolor tincidunt ante vehicula dignissim. Nulla id libero ut dui placerat semper. Nulla sit amet nibh at velit facilisis gravida. Phasellus in diam. Pellentesque volutpat scelerisque dolor. Donec venenatis nulla suscipit nisl dignissim tristique. Ut ut lorem sit amet purus ullamcorper mattis. Phasellus ornare ligula non orci. Pellentesque luctus tristique orci. Proin a est. Nulla porta lacus ut leo. Nulla faucibus pede sit amet dui. Nullam aliquet lorem at nunc. Nullam eu tellus.</p>
		<h2>Título (2)</h2>
		<p>Sed tempus turpis vel quam molestie pulvinar. Suspendisse venenatis dolor semper ipsum. Quisque tempus erat ac mi. Aliquam semper, est nec hendrerit dignissim, ligula turpis sagittis purus, ut viverra velit eros at augue. Pellentesque mi nisi, porta eget, pharetra ac, sollicitudin sit amet, nisi. In sapien ligula lorem sollicitudin facilisis, sodales eget, tempus in, mauris. Cras risus sem, adipiscing non, convallis ac, consectetuer eu, dolor. In quam lorem ipsum dolor sit amet. Curabitur tempus aliquam nulla. Etiam eros.</p>
	</div>
	
	<div id="noticias">
		<h3>Notícias:</h3>
		<ul>
			<li><a href="#">Sed accumsan congue</a></li>
			<li><a href="#">Nulla dignissim nec augue</a></li>
			<li><a href="#">Nunc ante elit nulla</a></li>
			<li><a href="#">Aliquam suscipit consequat</a></li>
			<li><a href="#">Cursus sed arcu sed</a></li>
			<li><a href="#">Nulla dignissim nec augue</a></li>
			<li><a href="#">Sed accumsan congue</a></li>
			<li><a href="#">Nulla dignissim nec augue</a></li>
			<li><a href="#">Nunc ante elit nulla</a></li>
			<li><a href="#">Aliquam suscipit consequat</a></li>
			<li><a href="#">Cursus sed arcu sed</a></li>
			<li><a href="#">Sed accumsan congue</a></li>
			<li><a href="#">Nulla dignissim nec augue</a></li>
			<li><a href="#">Nunc ante elit nulla</a></li>
			<li><a href="#">Aliquam suscipit consequat</a></li>
			<li><a href="#">Cursus sed arcu sed</a></li>
			<li><a href="#">Nulla dignissim nec augue</a></li>
			<li><a href="#">Sed accumsan congue</a></li>
			<li><a href="#">Nulla dignissim nec augue</a></li>
			<li><a href="#">Nunc ante elit nulla</a></li>
			<li><a href="#">Aliquam suscipit consequat</a></li>
			<li><a href="#">Cursus sed arcu sed</a></li>
		</ul>
	</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í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.

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

<div id="noticias">
Neste exemplo, o título (<h2>) está como "Notícias", mas pode ser também uma área reservada à banners, propaganda em geral, links de parceiros, etc.

<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: 700px;
}

#topo {
	width: 700px;
	height: 100px;
	background-color: #ff0;
}

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

#conteudo {
	float: left;
	width: 370px;
	padding: 15px;
}

#noticias {
	float: right;
	width: 130px;
	padding: 10px;
	background-color: #ccc;
}

#rodape {
	width: 680px;
	height: 30px;
	padding: 0 10px;
	background-color: #ccf;
	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: 700px;
}
Declaramos a largura (width) da nossa div.

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

#menu {
	float: left;
	width: 130px;
	padding: 10px;
	background-color: #cfc;
}
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: #cfc;).

#conteudo {
	float: left;
	width: 370px;
	padding: 15px;
}
Recebe as mesmas formatações da div "menu", alterando-se apenas os valores das propriedades.

#noticias {
	float: right;
	width: 130px;
	padding: 10px;
	background-color: #ccc;
}
Mudamos a direção do float para right. Dessa maneira, a div "noticias" ficará posicionada ao lado direito da div "tudo". Declaramos também a largura da div (width) e seu padding, além de formatar a cor de fundo.

#rodape {
	width: 680px;
	height: 30px;
	padding: 0 10px;
	background-color: #ccf;
	clear: both;
}
A largura dessa div foi especificada 20px a menos que o total do layout (que é de 700px), devido à aplicação da propriedade padding de 10px dos lados direito e esquerdo (somando os valores de width e dos paddings, teremos os 700px). Especificamos uma altura (height), aplicamos uma cor de fundo 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 3 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 deles 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.10

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

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