CSS no Lanche

Quando você inicia seus estudos com CSS, uma das primeiras coisas que quer aprender é a centralizar divs na página independente da resolução do usuário. Existe uma forma muito simples de fazer isso somente com a utilização de CSS. Observe a seguinte marcação HTML:

<div id="box"></div>

O que nós vamos fazer agora é centralizar essa div na tela do usuário utilizando o seguinte CSS:

#box {background-color:#ff0000; height:480px; left:50%; position:absolute; top:50%; width:640px}

A primeira vista você pode pensar que somente definindo position:absolute e as coordenadas left e top com 50% para a div funcionarão, mas vejam nesse exemplo o que acontece. Infelizmente assim não conseguiremos centralizar a div horizontalmente nem verticalmente, o segredo para que isso aconteça é muito simples, temos que adicionar margens negativas ao elemento que você deseja centralizar, da seguinte forma:

#box {background-color:#ff0000; height:480px; left:50%; margin:-240px 0 0 -320px; position:absolute; top:50%; width:640px}

Agora se repararem nesse exemplo, verão que a div estará sempre centralizada na tela independente da resolução do usuário. O segredo é utilizar as margens top e left com valores negativos. A base para se chegar a esses valores é a seguinte: Para a margin-top você deve pegar a altura total do elemento e dividir por 2, como temos alí uma div com um height de 480px, o valor final é de 240px, e para margin-left pegamos a largura total do elemento, que alí é de 640px, dividimos por 2, e chegamos ao valor de 320px. A partir daí basta utilizar esses valores negativos.

Testei e funciona perfeitamente nos seguintes Browsers: IE6, IE7, Firefox 2.0.0.18, Firefox 3, Safari 3(Win), Opera 9.5, Opera 10 Alpha, Google Chrome e Flock.

Está interessado em aprender boas práticas no desenvolvimento CSS? Então seria uma boa você dar uma olhada nesse overview:

| View | Upload your own

Segue abaixo um simples código para se produzir bordas redondas com CSS:

border-radius: 9px; /* CSS 3 */
-o-border-radius: 9px; /* Opera */
-icab-border-radius: 9px; /* iCab */
-khtml-border-radius: 9px; /* Konqueror */
-moz-border-radius: 9px; /* Firefox */
-webkit-border-radius: 9px; /* Safari */

Internet Explorer? Como ele não possui suporte a CSS 3, a solução seria ignorá-lo, ou então utilizar JavaScript ou imagens. Exemplo.