Então, mesmo depois de muito tempo da versão já lançada, deixo um novo post testados nos browsers [...]]]> Há algum tempo postei sobre como centralizar verticalmente e horizontalmente usando CSS, o que gerou alguns posts de visitantes revoltados porque não funcionava no IE7, fato que na época eu não tinha testado para essa versão do IE.

Então, mesmo depois de muito tempo da versão já lançada, deixo um novo post testados nos browsers Firefox 2, IE6, IE7 e Opera 9.

html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

#table {
    width: 100%;
    height: 100%;
    position: static;
    display: table;
    *overflow: hidden; /* hack para o IE6 e IE7 */
    *position: relative; /* hack para o IE6 e IE7 */
}

#cell {
    vertical-align: middle;
    display: table-cell;
    position: static;
    *top: 50%; /* hack para o IE6 e IE7 */
    *position: absolute; /* hack para o IE6 e IE7 */
}

#conteudo {
    top: -50%;
    width: 500px;
    margin: auto;
    position: relative;
    background: red;
}

link para o outro post e comentários

A idéia então consiste em posicionar o filme por cima dos outros elementos e ele tem que ter o fundo transparente para não “tampar” o conteúdo.

Há duas maneiras de se fazer isso sem muito trabalho.

A primeira consiste em definir a posição do objeto como absolute e suas posições top e left com 50% e tirando a diferença (subtraindo) da metade [...]]]> Uma grande dúvida que sempre surge é como centralizar um elemento no HTML, tanto verticalmente quanto horizontalmente, usando CSS.

Há duas maneiras de se fazer isso sem muito trabalho.

A primeira consiste em definir a posição do objeto como absolute e suas posições top e left com 50% e tirando a diferença (subtraindo) da metade de sua altura e metade de sua largura na margem. Por exemplo se um elemento tem 500px de largura e 400px de altura na margem vai ter um valor negativo (para top e left) igual a metade destes valores:

#minhaDiv {
    width: 500px;
    height: 400px;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -250px;
    position: absolute;
    border: 1px solid black;
}

Ou resumindo: margin: -200px auto auto -250px;

Pronto sua div vai ficar centralizada na janela. Mas temos um problema com isso.

Nesse caso sabemos o valor da altura do objeto, então tiramos a diferença na margem. Mas e se tivessemos um objeto em que sua altura pode variar (ou seja não sabemos o valor da altura) ?

Podemos solucionar isso usando o vertical-align, mas para ele funcionar temos que definir o display da div como table. A má notícia é que o nosso amigo IE não reconhece essa propriedade (e nem o valor table como display). A boa notícia que usando um hack para o IE dá pra acertar isso.

A estrutura para simular uma tabela fica assim:

<div id="tabela">
    <div id="cell">
        <div id="conteudo">
            <p>parágrafo</p>
        </div>
    </div>
</div>

E definimos no CSS o display da div tabela como table e da div cell como table-cell. Mas antes temos que acertar o html, body e a tabela para 100% (largura e altura).

html, body {
    width: 100%;
    height: 100%;
    margin: 0px; /* retirando a margem padrão */
    padding: 0px; /* retirando o padding padrão */
}

#table {
    width: 100%;
    height: 100%;
    display: table;
}

#cell {
    display: table-cell;
}

Com as divs já funcionando como tabela vamos definir a vertical-align como middle, isso na div cell.

#cell {
    vertical-align: middle;
    display: table-cell;
}

Falta agora setar a margin do conteudo como auto. E colocar um valor para largura, senão vai ficar 100%.

#conteudo {
    width: 500px;
    margin: auto;
}

Pronto, a div já vai aparecer centralizada no browser. Mas ainda está faltando o nosso amigo IE.

A idéia é quase a mesma da primeira situação. Como antes do conteudo temos uma div (cell), a gente defini seu position como absolute, e top como 50%. E na conteudo com position como relative, e top como -50%.

Lembrando que para não atrapalhar a definição correta, usaremos um hack que só influenciará no Internet Explorer.

Ficando o CSS final assim:

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#table {
    width: 100%;
    height: 100%;
    display: table;
    background: #f1f1f1;
}

#cell {
    vertical-align: middle;
    display: table-cell;
    _position: absolute;
    _top: 50%;
}

#conteudo {
    width: 500px;
    margin: auto;
    padding: 20px;
    border: 1px solid black;
    _position: relative;
    _top: -50%;
}

E o HTML:

<div id="table">
    <div id="cell">
        <div id="conteudo">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        </div>
    </div>
</div>

Mais sobre:

Exemplo com a primeira situação

Maujor – Centralizar Vertical

[update testado="IE6, IE7, FIREFOX 2 e OPERA 9"]

html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

#table {
    width: 100%;
    height: 100%;
    position: static;
    display: table;
    *overflow: hidden; /* hack para o IE6 e IE7 */
    *position: relative; /* hack para o IE6 e IE7 */
}

#cell {
    vertical-align: middle;
    display: table-cell;
    position: static;
    *top: 50%; /* hack para o IE6 e IE7 */
    *position: absolute; /* hack para o IE6 e IE7 */
}

#conteudo {
    top: -50%;
    width: 500px;
    margin: auto;
    position: relative;
    background: red;
}

[/update]

Já existem inúmeros sites indexadores de sites Tableless (CSS Layout).

Abaixo segue uma listagem de alguns deles:

http://www.cssdrive.com/
http://cssvault.com/
http://www.cssbeauty.com/gallery/
http://www.cssimport.com/
http://www.stylecrunch.com/
http://www.csselite.com/
http://www.unmatchedstyle.com/
http://cssmania.com/
http://www.cssreboot.com/gallery/ [...]]]> Sempre é bom estarmos observando, conhecendo, novos layouts e aprendendo com eles.

http://www.cssdrive.com/
http://cssvault.com/
http://www.cssbeauty.com/gallery/
http://www.cssimport.com/
http://www.stylecrunch.com/
http://www.csselite.com/
http://www.unmatchedstyle.com/
http://cssmania.com/
http://www.cssreboot.com/gallery/
http://www.css-website.com/
http://www.cssbloom.com/
http://www.css-design-yorkshire.com/
http://cssbrain.hu/
http://screenfluent.com/
http://www.isquare.it/
http://www.webdigity.com/cssGallery/
http://www.creative-pakistan.com/

Quer mais?
CSS Galleries

Esses efeitos podem ser criados na sua página usando CSS, há quem use também Javascript. Nesse exemplo usaremos apenas CSS.

Crie um novo arquivo HTML. O texto que receberá um destaque ficará [...]]]> Pullquote é um efeito utilizado em jornais (revistas) para destacar uma certa parte do texto. Um exemplo aqui: link.

Esses efeitos podem ser criados na sua página usando CSS, há quem use também Javascript. Nesse exemplo usaremos apenas CSS.

Crie um novo arquivo HTML. O texto que receberá um destaque ficará assim, dentro da tag blockquote:

<blockquote class=”pull”>Texto aqui dentro</blockquote>

No CSS definimos o tamanho (largura) da caixa, uma borda em cima e em baixo, texto alinhado ao centro. E pronto.

blockquote.pull {
width: 170px;
border-top: 3px solid #CC0099;
border-bottom: 3px solid #CC0099;
text-align: center;
float: right;
margin: 0px 20px;
padding: 15px;
}

Aí como podemos ver a caixa irá flutuar para a direita, podendo ser alterado como prefirir (left/right).

O exemplo final desse tutorial você confere aqui: pullquote.

Veja mais sobre:

Pullquote apenas com CSS:

http://www.sitepoint.com/test/pullquote.htm (inglês)
http://www.brpoint.net/arquivo/css/pull-quotes.html (português)

Pullquote com Javascript:

http://www.fiftyfoureleven.com/sandbox/weblog/2004/jun/javascript-pullquote/ (inglês)

A minha sugestão foi que ao invez de usar um textArea como ele queria, usa-se uma div mesmo, com overflow auto.

Exemplo:

CSS

#contrato {
width: [...]]]> Esses dias no Fórum do Flashmasters perguntaram como poderia fazer um campo de texto que não pudesse ser alterado, modificado. Mas que tivesse uma barra de rolagem.

A minha sugestão foi que ao invez de usar um textArea como ele queria, usa-se uma div mesmo, com overflow auto.

Exemplo:

CSS

#contrato {
width: 400px;
height: 500px;
padding: 10px;
overflow: auto;
border: 3px groove #CCCCCC;
background: #F1F1F1;
}

Você pode alterar o estilo da borda: estilos de borda css.

HTML

<div id=”contrato”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam massa. Donec bibendum quam a augue. Fusce rhoncus. Proin laoreet facilisis ipsum. Nunc mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque semper porta lorem. Nunc libero. Pellentesque sollicitudin. Integer tincidunt cursus nulla. Vivamus lacinia condimentum ipsum. Quisque lacus diam, scelerisque vitae, vestibulum id, elementum vitae, ante. Cras ipsum. Sed lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

Uma encheção de lingüiça aí.

E com apenas algumas linhas no CSS você tem sua caixa de contrato personalizada.

Clique aqui para ver o exemplo.

Vejamos as principais características do menu: imagem de fundo, inline e efeito over.

Primeiramente vamos desenhar os botôes do menu, feito isso vamos exportar como gif, para que o fundo fique transparente.

Você deve estar se [...]]]> Esse post será voltado para ensinar fazer um menu estilo navbar. Para ser mais específico será esse o menu.

Vejamos as principais características do menu: imagem de fundo, inline e efeito over.

Primeiramente vamos desenhar os botôes do menu, feito isso vamos exportar como gif, para que o fundo fique transparente.

Você deve estar se perguntando por que exportar numa única imagem, sendo que os botões irão estar separados e ter links diferentes. Logo você irá entender o porquê disso.

Depois de desenhado e exportado vamos à linguagem de marcação para estrutura-lo:

<ul id="nav">
	<li id="home"><a href="index.html">home</a></li>
	<li id="sobre"><a href="sobre.html">sobre</a></li>
	<li id="contato"><a href="contato.html">contato</a></li>
</ul>

Escrevemos uma lista não ordenada simples, com os links. Para cada item da lista definimos um nome de identificação, o que vai fazer que cada um receba sua respectiva imagem.

Para “economizar” uma div identificamos também a lista toda – nav – para formatá-la.

A parte da marcação pronta, vamos então ao CSS. Para realmente dar vida ao menu:

ul#nav {
	width: 324px;
	height: 35px;
	_padding-right: 1px;
	list-style-type: none;
	float: right;
}

ul#nav li {
	display: inline;
}

ul#nav li a {
	width: 98px;
	height: 35px;
	margin-left: 5px;
	margin-right: 5px;
	background: url(imgs/nav.gif) no-repeat;
	float: left;
	text-indent: -5000px;
	overflow: hidden;
}

ul#nav li#home a { background-position: 0px 5px; }
ul#nav li#sobre a { background-position: -99px 5px; }
ul#nav li#contato a { background-position: -198px 5px; }

ul#nav li#home a:hover { background-position: 0px 0px; }
ul#nav li#sobre a:hover { background-position: -99px 0px; }
ul#nav li#contato a:hover { background-position: -198px 0px; }

Defindo primeiro o tamanho da lista – ul -, removendo as marcações da lista – list-style-type – e flutuando para a direita, o que não irá interfirir no resultado. Já que foi usado exclusivamente para o site.

Antes tem um CSS hack – _padding-right – devido ao nosso amigo Internet Explorer.

Colocando os itens da lista inline – ul#nav li { display: inline; }.

Agora na tag a vamos definir o tamanho de cada botão, altura, espaçamento e a imagem de fundo. Repare que todos os links do menu irão receber aquela imagem de fundo que foi exportada.

Para a tag a ficar com o tamanho especificado – aceitar essas propriedades – deve-se coloca-la para flutuar, de preferência para a esquerda, senão irá inverter a ordem da lista.

Faça o teste, vendo o menu sem o float.

O identamento negativo juntamente com o overflow setado para hidden é justamente para fazer sumir o texto do botão colocado no HTML. Essa técnica chama-se image-replacement.

Agora que vem a parte legal, definir a posição da imagem de fundo para cada botão. Aproveitando o id de cada li mudamos a posição da tag a do respectivo item.

Como a largura do botão é de 99px, essa será a diferença de cada x, sendo decrementado, já que para cada botão que passa a imagem tem que ser “rolada” para trás.

No y foi coloca 5px para dar a impressão que o botão fica maior – sobe – ao passar o mouse sobre. Começando com 5px o botão ficará mais baixo.
Usando a pseudo-classe hover vamos setar o y da posição da imagem para 0px para fazer o efeito descrito anteriormente. Repare que o x permanece o mesmo.

Agora é só salvar e testar o menu.

ps: A utilização de uma única imagem de fundo não quer dizer que todos os demais exemplos serão assim. Como esse exemplo só tem três botões prefiri fazer assim. Para que ao carregar a imagem todos os menus aparecerão ao mesmo tempo.

mais sobre:

Maujor – Barra de Navegação

Dividido em 5 partes – topo, coluna esquerda, coluna central, coluna direita e rodapé.

Você pode ver um exemplo desse layout Nessa segunda estrutura vamos ver um exemplo de site “tipo portal”. Sem largura fixa, se estendendo na tela e mudando o tamanho (largura) dependendo da resolução do usuário (fluido).

Você pode ver um exemplo desse layout aqui.

Estruturando o XHTML:

<!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" xml:lang="pt" lang="pt">
<head>
<title>CSS Layout</title>
<style type="text/css">

</style>
</head>
<body>
	<div id="geral">
		<div id="topo">
			<h2>CSS Layout</h2>
		</div>
		<div id="meio">
			<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>
				</ul>
			</div>
			<div id="banners">
				<p>Nulla nulla. Donec sit amet augue et risus tincidunt eleifend. Vestibulum quis pede. Aliquam erat volutpat. Morbi consequat dignissim dolor. Quisque felis erat, elementum at, aliquet non, bibendum at, nibh. Integer ut nibh imperdiet purus commodo posuere. Sed eget nisl vitae lectus accumsan rhoncus. Nulla semper euismod neque. Nullam gravida. Donec porta dictum arcu. Proin nisl. </p>
			</div>
			<div id="conteudo">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut dapibus neque et felis. Proin nonummy. Suspendisse fermentum lobortis libero. Nam imperdiet imperdiet ipsum. Phasellus laoreet lectus ut neque. Nam tempus vestibulum leo. In posuere adipiscing metus. Sed tincidunt quam non arcu. Suspendisse nibh ante, consectetuer et, dapibus a, semper a, purus. Integer augue. Vestibulum bibendum. Duis sit amet enim vel leo dapibus fermentum. Phasellus sem. Phasellus dapibus, lectus sit amet malesuada tempus, augue elit tempor nisi, ut lacinia est sapien ac nisl. Duis velit eros, laoreet sed, pretium quis, dignissim in, quam. Pellentesque posuere, lectus nec euismod molestie, felis eros mattis orci, eget sollicitudin nisi sapien vel dolor.</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque imperdiet, mauris ac volutpat accumsan, tellus nisi tincidunt turpis, non semper lectus orci quis magna. Fusce consectetuer. Integer in nisi et orci rhoncus ornare. Aliquam sit amet quam sit amet nisi elementum cursus. Sed ipsum. Mauris quis velit eu magna iaculis vulputate. Cras vel sem sit amet turpis consequat feugiat. Curabitur sapien lectus, bibendum eu, tincidunt eget, laoreet et, urna. Quisque eget orci. Curabitur a felis nec leo elementum commodo.</p>
				<p>Quisque turpis eros, pulvinar id, pharetra id, sagittis ac, velit. Aenean nec eros ac magna molestie gravida. Nulla nibh diam, condimentum quis, gravida vel, sodales rhoncus, lectus. Mauris nunc ipsum, viverra in, cursus nec, sagittis a, augue. In libero. Donec eget urna. Nam tempus vehicula orci. Praesent lobortis, dolor a feugiat fermentum, orci libero ullamcorper purus, id mattis est nisi sit amet est. Morbi sed arcu tempus felis mattis pretium. Suspendisse nec risus. Sed a neque.</p>
				<p>In hac habitasse platea dictumst. Sed faucibus, quam sed sodales lacinia, dui metus placerat mi, eget dictum eros tortor et nunc. Ut mauris felis, volutpat nec, consectetuer sit amet, semper eu, odio. Sed volutpat mattis ipsum. Etiam dictum congue augue. Cras tristique eros lacinia sem. Cras est. Cras velit orci, placerat eu, tempor eget, dictum et, urna. Aenean varius viverra metus. Suspendisse aliquam, massa sit amet vehicula consequat, magna risus fringilla arcu, ut cursus ipsum odio id diam. Cras ac ipsum. Aliquam vitae enim. Nulla lacus sapien, adipiscing a, venenatis sed, interdum vel, velit. In est neque, posuere sed, elementum sed, elementum ac, nulla. Suspendisse potenti. Aenean lorem. Sed nisi mauris, facilisis sit amet, congue vel, fermentum sed, nibh. Suspendisse consequat, tortor at mattis rutrum, orci diam commodo ligula, congue lacinia sem leo quis ligula.</p>
				<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras mi ipsum, scelerisque vitae, mollis non, molestie non, odio. Curabitur erat. Praesent fermentum. Curabitur vel lacus vitae metus vehicula mollis. Curabitur ipsum nibh, tempor eu, gravida vel, ultrices vitae, leo. Duis ac lacus. Donec tincidunt scelerisque libero. Suspendisse accumsan. Nullam lorem augue, pellentesque sed, lobortis eget, fermentum vitae, mauris. Aenean bibendum fermentum nulla. Aenean bibendum adipiscing diam. Etiam ipsum velit, tempus a, porta a, sollicitudin non, turpis. Etiam tincidunt odio ac quam.</p>
				<p>Vivamus vel dolor in lectus imperdiet accumsan. Cras et libero nec augue tristique aliquet. Donec tempus. Aenean malesuada, orci et iaculis tristique, metus tellus consequat augue, et dictum nisi magna quis augue. Vivamus ligula leo, faucibus et, auctor vel, molestie vitae, elit. Nam tempus pellentesque sem. Curabitur aliquam hendrerit est. Sed non massa non ante scelerisque tincidunt. In aliquet scelerisque nibh. Phasellus ante risus, vehicula blandit, ultrices ut, scelerisque sed, felis. Nulla sit amet eros id dolor fermentum condimentum. Ut purus velit, ullamcorper sit amet, egestas a, sodales vel, ligula.</p>
			</div>
		</div>
		<div id="rodape">
			<h2>CSS Layout - <a href="http://rogeriolino.wordpress.com/">rogeriolino.wordpress.com</a></h2>
		</div>
	</div>
</body>
</html>

Foi colocado na coluna da esquerda (id=”menu”) um menu, na coluna do meio (id=”conteudo”) um texto qualquer e na coluna da direita (id=”banners”) um pequeno parágrafo só para encher lingüiça.

Agora você deve estar se perguntando por que a coluna do meio vem depois da coluna da direita, já que na hora de ver fica ao contrário.

Resposta: Simplesmente não funciona se a coluna da direita vier primeiro da coluna do meio. Na hora de colocar para flutuar (direita), a coluna do meio não “sobe”. Fica no centro certim mas não fica alinhado acima com as demais colunas. Resumindo essa ordem realmente é importante. =]

Desenrolando com o CSS:

#topo {
	height: 120px;
	border: 1px solid #f1f1f1;
	text-align: center;
}

#topo h2 {
	color: #999999;
	font-family: verdana, Arial, Sans-Serifv;
}

#meio {
	margin-top: 10px;
}

#menu {
	width: 150px;
	float: left;
}

#menu ul {
	width: 150px;
	border: 1px solid #f1f1f1;
	padding: 0;
	margin: 0;
}

#menu ul li {
	width: 150px;
	list-style: none;
	padding: 0;
	margin: 0;
}

#menu ul li a {
	width: 130px;
	_width: 150px;
	height: 20px;
	display: block;
	padding: 3px 0 0 20px;
	text-decoration: none;
	color: #999999;
	font: 12px verdana, Arial, Sans-Serif;
}

#menu ul li a:hover {
	color: #000000;
	background: #f1f1f1;
}

#conteudo {
	margin: 0 180px;
	text-align: justify;
}

#conteudo p {
	font: 12px Verdana, Arial, Sans-Serif;
}

#banners {
	width: 150px;
	float: right;
	border: 1px solid #f1f1f1;
}

#rodape {
	height: 50px;
	border: 1px solid #f1f1f1;
	clear: both;
	text-align: center;
}

#rodape h2 {
	color: #999999;
	font: 11px verdana, Arial, Sans-Serif;
}

Para quem ainda não viu ou não conhece ainda o CSS, esse código vai dentro da tag style. Que por sua vez fica dentro da tag head. Isso para adicionar o CSS no próprio arquivo, caso queira chamar um arquivo externo aqui tem um exemplo.

Bem, olhando o código não tem muito o que explicar. Primeiramente definimos os tamanhos das camadas (topo: altura=120px, rodape: altura=50px, menu: largura=150px, banners: largura=150px).

Colocando as colunas do canto para flutuar (menu: float=left, banners: float=right).

Foi criado um menu no layout também, e se você reparar tem um CSS Hack nele, para que ele funcione corretamente no Internet Explorer 6 ou anterior. Nesse post não vou explicar como e o que foi feito, para mais aqui.
Na coluna do meio defini-se uma margin para ambos lados para deixá-lo com uma largura única e não deixando o texto “escapar” para os lados.

E lembrando de colocar o clear como both no rodape. Para ele ficar sempre abaixo das demais camadas.

No site do Tableless tem um vídeo tutorial muito bom, mostrando exatamente como faz um layout desse tipo, mas dando mais exemplos para deixa-lo ou não fixo. No qual eu quase que praticamente fiz igual. Só que o vídeo tutorial é bem mais explicativo e melhor montado, vale muito a pena conferir.

Primeiro temos que analisar o que queremos, ou que teremos de, exibir na página. Se vai ter [...]]]> Agora que já sabemos como escrever um XHTML e temos uma referência de CSS, vamos fazer o nosso primeiro layout.

Primeiro temos que analisar o que queremos, ou que teremos de, exibir na página. Se vai ter um menu horizontal ou vertical, se vai ter rodapé, quantas colunas, etc.

Depois de feito isso é hora de estruturar o “esqueleto” da página no XHTML. Nesse primeiro exemplo vamos ver uma página com duas coluna, topo e rodapé. No qual a coluna do lado esquerdo vai conter o menu e do lado direito o conteúdo da página.

XHTML:

<!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” xml:lang=”pt” lang=”pt”>
<head>
<title> Título </title>
<meta name=”Generator” content=”” />
<meta name=”Author” content=”” />
<meta name=”Keywords” content=”” />
<meta name=”Description” content=”” />
<meta name=”language” content=”pt-br” />
<!– Favicon –>
<link rel=”shortcut icon” href=”favicon.ico” />
<!– Style –>
<link rel=”stylesheet” href=”style.css” type=”text/css”/>
</head>
<body>
<div id=”geral”>
<div id=”topo>

<h2>Título da Página</h2>

</div>
<div id=”meio”>
<div id=”esquerda”>

<ul>

<li><a href=”#” alt=”Página Inicial”>Home</a></li>

<li><a href=”#” alt=”Quem Sou”>Sobre</a></li>

<li><a href=”#” alt=”Contato”>Contato</a></li>

</ul>

</div>
<div id=”direita”>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum nulla. Mauris sollicitudin ante sed orci. Vivamus vitae sapien id felis lobortis aliquam. Suspendisse potenti. Integer pellentesque. Nulla vehicula, nisl a lacinia egestas, justo dolor semper justo, sed faucibus nibh orci eu magna. Curabitur vel nisi vulputate est vehicula rhoncus. Curabitur est ligula, vehicula ornare, suscipit vitae, ornare varius, justo. Suspendisse lacus. Sed pulvinar vehicula lectus. Curabitur quis augue. Nullam gravida tortor at felis. Aliquam neque massa, scelerisque at, auctor lobortis, placerat ut, erat. Fusce adipiscing. Phasellus imperdiet blandit quam. Maecenas posuere.</p>
</div>
</div>
<div id=”rodape”>

<h3>Minha Página – 2006</h3>

</div>
</div>
</body>
</html>

Foram colocadas seis camadas, DIVs, uma chamada geral que engloba todo o site para ter um maior controle, a topo – aonde vem a imagem de topo e título da página -, a meio que dentro tem duas, esquerda – menu – e direita – conteúdo – e rodapé - aonde tem os créditos -.

No topo foi colocado o título da página dentro da tag hn, realmente utilizada para isso.

Para fazer o menu foi usada uma lista indefinida (ul – undefined list) com apenas três links.

Na parte de conteúdo foi colocado o famoso “Lorem Lipsum” para não ter que colocar aqueles “bla bla bla” ou “non non non“.

E por fim um crédito no rodapé dentro de ourta tag hn.

CSS:

Agora é a vez do estilo. Como no XHTML o link do CSS está apontando para um arquivo chamado style.css, salve-o com esse nome. Caso deseje colocar outro, mude na página o destino.

#geral {
	width: 726px;
}

#topo {
	width: 720px;
	height: 100px;
	border: 3px solid #999999;
	background: #FFFFFF;
}

#meio {
	width: 720px;
	border: 3px solid #999999;
	background: #FFFFFF;
}

#esquerda, #direita {
	padding: 15px;
}

#esquerda {
	width: 150px;
	float: left;
}

#direita {
	width: 490px;
	float: right;
}

#rodape {
	width: 720px;
	height: 50px;
	border: 3px solid #999999;
	background: #FFFFFF;
	clear: both;
}

Neste caso a página vai ter 720 pixeis de largura e as camadas uma borda de 3 pixeis, totalizando 726px (720+3+3) de largura para a camada geral. Então as camadas topo, meio e rodape terão 720px de largura.

O topo com altura de 100px e o rodapé com 50px. Para as camadas esquerda e direita terem um espaçamento entre o topo e o rodapé, tem um padding de 15px.

Para colocar as duas camadas, esquerda e direita, uma do lado da outro, atribui-se a propriedade float, com valor left para esquerda e right para direita. Fazendo com que ambas flutuem para o lado desejado.
No rodapé foi colocado o clear como both para ele ficar abaixo do meio, devido que as camadas esquerda e direita estão flutuando.

Alguns exemplos aqui.

mais sobre:

Maujor.com – Layout CSS sem tabelas

Maujor.com – Layout CSS 3 colunas

Little Boxes – Examples

<!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” xml:lang=”pt” lang=”pt”>

<head>
<title> Título </title>
<meta name=”Generator” content=”" />
<meta name=”Author” content=”" />
<meta name=”Keywords” content=”" />
<meta [...]]]> Mãos à obra, vamos agora escrever nosso primeiro código XHTML. Abaixo o código já pronto e comentado:

<!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” xml:lang=”pt” lang=”pt”>

<head>
<title> Título </title>
<meta name=”Generator” content=”" />
<meta name=”Author” content=”" />
<meta name=”Keywords” content=”" />
<meta name=”Description” content=”" />
<meta name=”language” content=”pt-br” />
<!– Favicon –>
<link rel=”shortcut icon” href=”favicon.ico” />
<!– Style –>
<link rel=”stylesheet” href=”style.css” type=”text/css”/>

</head>
<body>

</body>
</html>

Antes de iniciar a tag html é declarado o tipo da página, o Doctype, se você não sabe o que é: leia aqui e/ou aqui.

Nesse caso foi definido como Strict, caso você ainda não esteje preparado pode utilizar como Transitional.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Você deve estar se perguntando: Por que aquele “xmlns” dentro da tag html ?

É chamado de namespace e serve para mostrar para o browser quais elementos pertencem a qual linguagem no documento. Dúvida? Mais? Mais!

As tags meta servem para colocar informações adicionais, tais como, autor, idioma, palavras-chave e etc. – essas tags são utilizadas por mecanismos de buscas, como o Google por exemplo, para localizar os sites. Um site bem estruturado e definido tem chance maior de aparecer primeiro na busca.

Logo abaixo aparece a tag link referenciando um arquivo externo, ícone. Chamado Favicon – ícone do favoritos – que é nada mais nada menos do que aquele íconezinho que fica aparecendo no browser ao lado do endereço do seu site e nos favoritos também é claro. Caso ainda tenha dúvida veja aqui.

Depois como já vimos aparece novamente a tag link para “puxar” o arquivo de estilo da página – CSS.

Fecha-se a tag head, abre e fecha a body e fecha a html, e pronto. O seu XHTML já está pronto.

Na próxima veremos o um layout já pronto com o CSS.