Criando um Menu CSS com listas

Uma das coisas que os iniciantes em CSS tem certa dificuldade é em criar menus CSS, mas isso como veremos é uma uma das coisa mais simples de se fazer.

Menus CSS são tão belos como menus em flash, e melhor, são mais acessiveis, amigaveis e ajudam os mecânismos de busca como por exemplo o google.

Centralizando Layout com CSS

Em css, o método mais utilizado para centralizar um layout, é o das margens.

Suponha que você tenha um container e queira centralizalo na tela do navegador. Você poderia ajustar diversos valores para margens esquerda ou direita até centraliza-lo, mas isso fica meio complicado quando você não sabe a resolucão do usuário. Então existe a necessidade de um método que o faça automaticamente.

Recomendação de Livros para Web Design

Quando o assunto é Web Design não faltam sites na web sobre o assunto, mas eu sempre defendo a idéia de que nenhum site é tão bom como um livro, afinal um livro além de ter conteúdo mais confiável possui todas as informações muito bem organizadas. Se você quer se tornar um bom Web Designer livros não devem faltar no seu curriculo.

Hoje vou fazer algumas recomendações de bons livros para o pessoal da web. Todos os livros que listo abaixo já li e recomendo todos, portanto incluirei apenas a descrição dos mesmos. São livros sobre CSS, XHTML, JavaScript, PHP, Ajax, MySql e também sobre design.

Inserindo Flash Corretamente no XHTML

Quem se preocupa com padrões com certeza já se deparou com o problema de colocar um flash que válida na página e/ou com texto alternativo caso o usuário não tenha o flash instalado.

Na internet podemos encontrar códigos como este:

function putFlash(x, y, file){
document.write("<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0' width='"+x+"' height='"+y+"'>");
document.write("<param name='movie' value='"+file+"' />");
document.write("<param name='quality' value='best' />");
document.write("<param name='wmode' value='transparent' />");
document.write("<embed src='"+file+"' wmode='transparent' quality='best' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width='"+x+"' height='"+y+"'></embed>");
document.write("</object>");
}

Funciona bem até o momento que o usuário tenha o javascript ativo no seu navegador, caso não tenha ou não tenha o flash nada sera exibido.

Bug da margem duplica no Internet Explorer 6

Este talvez seja um dos bugs mais conhecidos pelos desenvolvedores, e é também o mais fácil de ser corrigido.

Ele ocorre quando temos elementos flutuando dentro de um container.

Veja o exemplo:

XHTML:

<div id="container">
<div id="coluna1"></div>
</div>

CSS:
obs: as bordas foram adicionadas apenas para facilitar a vizualização dos elementos.

#container{
width:600px;
height:300px;
border:1px solid #000;
}

#coluna1{
float:left;
margin-left:100px;
width:100px;
height:150px;
border:1px solid #000;
}

Nesse exemplo temos uma div com id container que contem outra div com id coluna1, a div coluna1 esta flutuado a esquerda dentro da div container, sendo que a div coluna1 também esta com margem esquerda de 20px. Bom, pelo menos deveria ter 20px, pois se executarmos o código no IE6 notaremos que na verdade a div esta distanciada em 40px.

Então, em resumo esse bug sempre ocorre no IE6 quando definimos uma margem do mesmo lado do float, como margin-left e float-left ou margin-right e float-right.

Visualização no IE6

Visualização no Firefox

Porque isso ocorre?

Provavelmente o programador da Microsoft não era muito bom de matemática. Mas brincadeiras de lado o fato de esse bug ocorrer é desconhecido, assim como a maioria dos bugs do IE.

Para corrigilo é simples, basta adicionar a propriedade display:inline na div coluna1 e as margens funcionarão normalmento no IE6.

Ficando assim o CSS da div coluna1:

#coluna1{
float:left;
display:inline;
margin-left:100px;
width:100px;
height:150px;
border:1px solid #000;
}

Problemas com floats - Desobstruindo floats

Vamos ver aqui como resolver o seguinte problema: floats obstruidos.

O que é isso?

Quando temos um ou mais elementos flutuantes dentro de um container alguns navegadores não conseguem distinguir mais a altura dos elementos flutuantes fazendo com que o container se contrai-a.

Veja o exemplo na figura abaixo:

A div1 é container da div2 e div3 que estão flutuando, note que a div1 se contraiu ficando menor que a div2 ou div3.

O código que resultaria isso seria algo assim:

xhtml:

<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>

css

#div1{
width:600px;
}

#div2{
width:250px;
float:right;
}

#div3{
width:250px;
float:left;
}

Para resolver esse problema podemos criar uma div abaixo da ultima div que flutua e colocar nela o estilo clear:both, ficando assim:

xhtml:

<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div class="clear"></div>
</div>

css

#div1{
width:600px;
}

#div2{
width:250px;
float:right;
}

#div3{
width:250px;
float:left;
}

.clear{
clear:both;
}

Na visualização:

E pronto, problema resolvido.

É muito comum iniciantes em layouts com css terem esse problema que geralmete pode ser resolvido sem marcação extra adicionando o clear:both no rodape da página.

CSS para Inspiração

Bom dia pessoal!

Pesquisando layouts para inspiração encontrei alguns sites que tem os mais belos trabalhos feitos com Web Standards. Vou postar alguns deles aqui, para que sirvam de inspiração para você também.

W3C Sites

CSS WebSite

CSS Drive

CSS Import

CSS Heaven