Oportunidade de Emprego

A Mídiaweb está a procura de três profissionais que atuem com webstandards para trabalhar em periodo integral na Agência.

Necessário conhecimento intermediário em XHTML/CSS.

Pré-requisitos:
– XHTML semântico;
– CSS (Cascating Style Sheets);
– Noções de Photoshop e/ou Fireworks;

Desejável:
– Ser aficcionado e apaixonado por Interfaces e principalmente webstandards;
– Capacidade de desenvolver trabalho em grupo;

Os candidatos serão submetidos a testes práticos

Currículos com pretensão salarial para curriculos@midiaweb.com.br

Anúncios

Menus com listas, construindo de forma simples e semântica

Falar em código semântico, tableless, css e como tudo isso se envolve com a W3C pode ser para alguns um grande quebra-cabeça. Na verdade é, mas com um pouco de vontade, teoria e paciência, esses itens podem se transformar numa verdadeira filosofia de trabalho e depois de um aprendizado bem realizado, tornar a produtividade do dia-a-dia um verdadeiro desafio estimulante.

Resumidamente, compreender a utilização correta dos elementos é um passo extremamente saudável para relembrarmos como tudo foi concebido originalmente para ser utilizado e tornar o trabalho simples e mais claro para todos.

O assunto pode ser um verdadeiro martírio para desenvolvedores, que por muitas vezes se auto absolvem da adequação aos padrões web, construindo aplicações e sites que poderiam ser mais leves, mais responsivos, fáceis de usar, e por conseqüência, mais fáceis de atualizar.

Um exemplo muito utilizado atualmente para mostrar como é possível construir mais simples são os menus para sites, sejam horizontais ou verticais, existe uma maneira muito limpa, verdadeiramente semântica e intuitiva para mecanismos de buscas como o Google.

Uma recomendação que faço para a construção de sites e aplicações é começar pela informação e não layout, pois iniciando seu projeto pela estrutura da informação, a possibilidade do projeto perder o foco é muito menor,além disso, como sabemos, hoje o conceito tableless permite a aplicação de layouts como uma camada sobre o seu código.

Falarei aqui sobre a criação de menus utilizando listas, e listas obviamente tem uma série de utilidades que devem ser tratadas de forma específica caso a caso, o que significa que se usada corretamente, torna seu código naturalmente semântico.

Compreendendo Listas

Para compreender listas é importante saber que existem várias opções de utilização para elas, como vemos abaixo:

1.Listas ordenadas

 

<ol>

 <li>Ricardo</li>

 <li>Felipe</li>

 <li>Manoela</li>

</ol>

O resultado para a lista acima é:

1. Ricardo

2. Felipe3. Manoela

Note que pelo fato de termos utilizado as tags corretas, os itens foram automaticamente ordenados e numerados (esse comportamento é padrão, podendo ser personalizado por CSS).

2. Listas não ordenadas

 

<ul>

 <li>Ricardo</li>

 <li>Felipe</li>

 <li>Manoela</li>

</ul>

O resultado agora é:

o Ricardo

o Felipeo Manoela

Note que esse modelo não numera automaticamente os itens, mas por padrão os marca como itens de uma lista (também é comportamento padrão que pode ser alterado por css).

3. Listas de descrição

 

<dl>

 <dt>Livro</dt>

 <dd>Descrição do livro</dd>

</dl>

O resultado:

Livro

Descrição do livro

Utilizando listas para construir menus

Até aqui você já tomou conhecimento de como as listas funcionam dentro do código html, então não vai ter problemas para entender o código abaixo, pois na verdade o segredo estará no css que aplicaremos a lista.

O modelo vertical de menu:

 

<ul class="menu_vertical">

 <li><a href="#">Home</a></li>

 <li><a href="#">História</a></li>

 <li><a href="#">Filosofia</a></li>

 <li><a href="#">Produtos</a></li>

 <li><a href="#">Contato</a></li>

</ul>

Note que definimos em ul utilizará a classe menu_vertical, vamos ao código CSS que faz tudo acontecer como desejamos:

 

<style type="text/css">

ul.menu_vertical {

 margin: 0;

 padding: 0;

 list-style: none;

}

ul.menu_vertical li a{

 display: block;

 padding: 10px;

 color: #333;

 background: #eee;

 border-bottom: 1px solid #fff;

 text-decoration: none;

}

ul.menu_vertical li a:hover {

 background: #ccc;

}

</style>

Note que o código CSS é bem simples, mas tem parâmetros chaves importantíssimos que são em “ul” a redução de margin e padding para 0 (zero), pois essa tag tem por padrão valores positivos setados nela; o display: block na tag “a” permite que a área de clique seja maximizada para toda a área disponível dentro da tag li a qual ela está contida.

O resultado visual deste menu é o seguinte:

É importante lembrar que o menu terá automaticamente a largura máxima do seu objeto pai, porém é possível limitar sua largura a um valor específico setando o parâmetro width no CSS da tag ul.

O modelo horizontal de menu:

Este modelo utiliza praticamente o mesmo código, com pequenas modificações, veja:

 

<ul class="menu_horizontal">

 <li><a href="#">Home</a></li>

 <li><a href="#">História</a></li>

 <li><a href="#">Filosofia</a></li>

 <li><a href="#">Produtos</a></li>

 <li><a href="#">Contato</a></li>

</ul>

Só mudei o nome da classe, note que o html continua exatamente o mesmo. Vamos ao CSS:

 

ul.menu_horizontal {

 margin: 0;

 padding: 0;

 list-style: none;

}

ul.menu_horizontal li {display: inline;}

ul.menu_horizontal li a{

 float: left;

 display: block;

 padding: 10px;

 color: #333;

 background: #eee;

 text-decoration: none;

}

ul.menu_horizontal li a:hover {

 background: #ccc;

}
O resultado final:

Observe que é ai que entra o conceito moderno de personalização de layouts através de tableless, pois o html não foi alterado, apenas sua classe, e o código CSS foi o responsável pela mudança da aparência, deixando claro um conceito de camadas, cada uma com sua respectiva função.

As alterações no CSS que permitiram ao mesmo menu ter a aparência horizontal foi que na tag “li” aplicamos display: inline, pois assim ele deixa de ser nativamente um elemento de bloco e passa a ser um elemento de linha, não criando mais quebras de linha antes e depois dele mesmo (padrão a todo elemento de bloco), em seguida determinamos para “a” float: left, o que significa que as tags “a” estarão posicionados lado a lado, a partir da esquerda para a direita.

Os trechos CSS apresentados acima podem ser personalizados eternamente a gosto e necessidade da sua aplicação. Não se esqueça que o CSS dá a você o controle sobre a aparência da sua página ou aplicação.

O importante no conceito tableless é escrever simples, sem complicação, sem redundância e sempre, mas sempre que possível procure rever seu código a busca de limpeza e redução de conteúdo desnecessário.

Para saber mais as incríveis variações de CSS que se pode fazer com listas, você não pode deixar de visitar este site: Listamatic (http://css.maxdesign.com.au/listamatic/).

Seja simples, faça um trabalho limpo e torne-se mais produtivo, antes que seus concorrentes o façam.

Até a próxima!

 

Autor: Roberto Rabadan (e-mail) é Analista de Usabilidade da LocaWeb focado no design de interfaces web. Tem como principal objetivo profissional aprimorar as competências entre design e usabilidade de interfaces, buscando tornar a experiência e prazer de navegação a mais perfeita possível para o usuário final. Graduado em Propaganda e Design, tem mais de 16 anos de experiência com soluções para internet.

Fonte: http://www.imasters.com.br/

Menu horizontal em lista com Imagens

Mostrei como fazer um bonito menu horizontal em lista usando imagens. Image Hosted by ImageShack.us
Dimensões:
Image Hosted by ImageShack.us
Precisaremos da imagem abaixo:
Image Hosted by ImageShack.us

HTML

<div id=”navigation”>
<ul id=”nav”>
<li id=”home”><a class=”current” href=”#”>Inicio</a></li>
<li id=”tutorials”><a href=”#tutorials” >Tutoriales</a></li>
<li id=”resources”><a href=”#resources”>Recursos</a></li>
<li id=”contact”><a href=”#contact”>Contacto</a></li>
</ul>
</div>

CSS

#navigation {
background: #FFF url(pix/bgMenu.gif) left repeat-x;
width: 450px; /* Ancho del contenedor de nuestro menú*/
height: 35px; /*Altura del contenedor de nuestro menú*/
margin:auto;
}

#navigation ul {
display: block;
list-style: none;
background: #FFF url(“pix/my_nav.png”) top left no-repeat;
margin: 0;
padding: 0;
width: 280px; /*Ancho de nuestro menú (la imagen)*/
height: 35px; /*Altura de la imagen*/
}

#navigation ul li {
float: left;
position: relative;
z-index: 100;
margin: 0;
padding: 0;
width: 70px; /*Ancho de cada item u opción de nuestro menú*/
height: 35px; /*Altura de cada item*/
}

#navigation ul li a {
display: block;
text-decoration: none;
text-indent: -999em;
width: 70px; /* Ancho de cada link de nuestro menú*/
height: 35px; /* Alto de cada link*/
}

#navigation ul li a:hover,
#navigation ul li a.current {
background-image: url(“pix/my_nav.png”); /* Estado activo*/
background-repeat: no-repeat;
}

#navigation ul li#home a:hover { background-position: 0px -35px; }
#navigation ul li#home a.current,
#navigation ul li#home a.current:hover { background-position: 0px -70px; }

#navigation ul li#tutorials a:hover { background-position: -70px -35px; }
#navigation ul li#tutorials a.current,
#navigation ul li#tutorials a.current:hover { background-position: -70px -70px; }

#navigation ul li#resources a:hover { background-position: -140px -35px; }
#navigation ul li#resources a.current,
#navigation ul li#resources a.current:hover { background-position: -140px -70px; }

#navigation ul li#contact a:hover { background-position: -210px -35px; }
#navigation ul li#contact a.current,
#navigation ul li#contact a.current:hover { background-position: -210px -70px; }

#navigation ul li a.current:hover { cursor: default; }

Exemplo

Fonte: http://www.infectedfx.net/

Tabelas em Zebra

Você também acha muito trabalhoso ficar colocando cor um linha sim e outra não em uma tabela? Quem sabe esta dica o ajude 😀
Image Hosted by ImageShack.us

HTML

<table align=”center” id=”default” summary=”Ejemplo de tabla”>
<caption>
Autores en InfectedFX.net
</caption>
<thead>
<tr>
<th>Nombre</th>
<th>Ocupación</th>
<th>Website</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=”3″>Total: 4 Usuarios </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Infected-FX</td>
<td>Diseñador</td>
<td><a href=”http://www.infectedfx.net”>www</a></td&gt;
</tr>
<tr>
<td>Zetta</td>
<td>Developer</td>
<td><a href=”http://www.zetaweb.net”>www</a></td&gt;
</tr>
<tr>
<td>Zillah</td>
<td>A.I.</td>
<td><a href=”http://www.blogzillah.com”>www</a></td&gt;
</tr>
<tr>
<td>Hecgo</td>
<td>Developer</td>
<td><a href=”http://www.hecgo.com”>www</a></td&gt;
</tr>
</tbody>
</table>

CSS

#default {
border-collapse:collapse;
background-color: #E8E8E8;
width:100%;
}
#default caption{
background-color:#59819F;
border-bottom:3px solid #C2DBEF;
color:#FFF;
padding:10px;
text-transform:uppercase;
}

#default thead th{
background-color:#18394F;
border-bottom:3px solid #59819F;
color:#FFF;
padding:5px;
}

#default tbody tr td {
padding: 3px 8px;
}

#default tfoot tr td{
background-color:#59819F;
color:#FFF;
padding:4px;
text-align:center;
}

/*/////////////// TABLE DEMO GREEN //////////////////*/

#demoGreen {
border-collapse:collapse;
background-color: #E8E8E8;
width:100%;
}
#demoGreen caption{
background-color:#99CC00;
border-bottom:3px solid #669900;
color:#FFF;
padding:10px;
text-transform:uppercase;
}

#demoGreen thead th{
background-color:#333;
border-bottom:3px solid #000;
color:#FFF;
padding:5px;
}

#demoGreen tbody tr td {
padding: 3px 8px;
}

#demoGreen tfoot tr td{
background-color:#666;
color:#FFF;
padding:4px;
text-align:center;
}

/*/////////////// TABLE DEMO BLUE //////////////////*/
#demoBlue {
border-collapse:collapse;
background-color: #E8E8E8;
width:100%;
}
#demoBlue caption{
background-color:#50ADEA;
border-bottom:3px solid #1975D7;
color:#FFF;
padding:10px;
text-transform:uppercase;
}

#demoBlue thead th{
background-color:#F5F5F5;
border-bottom:3px solid #CCC;
color:#666;
padding:5px;
}

#demoBlue tbody tr td {
padding: 3px 8px;
}

#demoBlue tfoot tr td{
background-color:#E7E7E7;
color:#B7B7B7;
padding:4px;
text-align:center;
}

JavaScript

<script type=”text/javascript”>
// this function is needed to work around
// a bug in IE related to element attributes
function hasClass(obj) {
var result = false;
if (obj.getAttributeNode(“class”) != null) {
result = obj.getAttributeNode(“class”).value;
}
return result;
}

function stripe(id) {

// the flag we’ll use to keep track of
// whether the current row is odd or even
var even = false;

// if arguments are provided to specify the colours
// of the even & odd rows, then use the them;
// otherwise use the following defaults:
var evenColor = arguments[1] ? arguments[1] : “#F0F8FF”;
var oddColor = arguments[2] ? arguments[2] : “#C2DBEF”;

// obtain a reference to the desired table
// if no such table exists, abort
var table = document.getElementById(id);
if (! table) { return; }

// by definition, tables can have more than one tbody
// element, so we’ll have to get the list of child
// <tbody>s
var tbodies = table.getElementsByTagName(“tbody”);

// and iterate through them…
for (var h = 0; h < tbodies.length; h++) {

// find all the <tr> elements…
var trs = tbodies[h].getElementsByTagName(“tr”);

// … and iterate through them
for (var i = 0; i < trs.length; i++) {

// avoid rows that have a class attribute
// or backgroundColor style
if (! hasClass(trs[i]) &&
! trs[i].style.backgroundColor) {

// get all the cells in this row…
var tds = trs[i].getElementsByTagName(“td”);

// and iterate through them…
for (var j = 0; j < tds.length; j++) {

var mytd = tds[j];

// avoid cells that have a class attribute
// or backgroundColor style
if (! hasClass(mytd) &&
! mytd.style.backgroundColor) {

mytd.style.backgroundColor =
even ? evenColor : oddColor;

}
}
}
// flip from odd to even, or vice-versa
even = ! even;
}
}
}
</script>

<script type=”text/javascript”>
window.onload = function() {
stripe(‘default’);
stripe(‘demoGreen’, ‘#ECFFAF’, ‘#F3FFCF’);
stripe(‘demoBlue’, ‘#FFFFFF’, ‘#F6F6F6’);
stripe(‘demoRed’, ‘#FFEFEF’, ‘#EFC2C2’);
}
</script>

Exemplos

Fonte: http://www.infectedfx.net/

Formulario elegante

Vou mostrar como fazer um formulário ficar mas atraente usando css e algumas pequenas imagens.
Image Hosted by ImageShack.us
Precisaremos:

  • Image Hosted by ImageShack.us icon_user.gif
  • Image Hosted by ImageShack.us icon_pass.gif
  • Image Hosted by ImageShack.us bgForm.gif

HTML

<form action=”#” method=”post” name=”formLogin”>
<fieldset>
<legend>Acceso a usuarios </legend>
<p>

<label for=”username1″ accesskey=”n”>Username: </label>
<input id=”username1″ name=”username1″ tabindex=”1″ value=”” title=”username1″ type=”text”>
</p>
<p>
<label for=”password2″ accesskey=”e”>Password:</label>
<input id=”password2″ name=”password2″ tabindex=”2″ title=”password2″ type=”password2″>
</p>
<p>

<input value=”Ingresar” id=”submit3″ class=”button” tabindex=”3″ type=”submit”>
</p>
</fieldset>
</form>

CSS

.formLogin {
width: 250px;
margin:auto;
font-size:10px;
}

.formLogin fieldset {
background:#F9F9F9 url(pix/bgForm.gif);
border:1px solid #CCC;
padding: 10px;
margin: 0;
}

.formLogin fieldset legend {
color:#666;
}

.formLogin label {
display: block;
float: left;
padding: 0;
width:70px;
margin:5px 5px 5px 0px;
}

.formLogin fieldset label:first-letter {
color:#999;
}
.formLogin input {
width:50%;
border:1px solid #A0A0A0;
font-size:10px;
padding:3px 0px 3px 25px;
}
.formLogin input#username {
background:#FFF url(pix/icon_user.gif) no-repeat left;
}
.formLogin input#password {
background:#FFF url(pix/icon_pass.gif) no-repeat left;
}

.formLogin input.button {
width:95%;
background-color:#C2C7C0;
border:1px solid #A0A0A0;
padding:3px;
color:#FFF;
}

Image Hosted by ImageShack.us

Fonte: http://www.infectedfx.net/

Este exemplo esta no link acima no arquivo compactado

Slides com JavaScript

Um ótimo recurso, segue abaixo

HTML

<!– CONTENEDOR –>
<div id=”slides_content”>
<!– LISTADO DE ITEMS –>
<ul class=”buttons”>
<li><a id=”current” href=”javascript:void(0)” onclick=”change(0,this);”>Slide 01</a></li><li><a href=”javascript:void(0)” onclick=”change(520,this);”>Slide 02</a></li>
<li><a href=”javascript:void(0)” onclick=”change(1040,this);”>Slide 03</a></li>
<li><a href=”javascript:void(0)” onclick=”change(1560,this);”>Slide 04</a></li>
</ul>

<!– ELEMENTOS –>
<div id=”elementos” style=”width:2100px; margin:0 0 0 0;”>
<!– SLIDE 01 –>

<div class=”slide 1″>
<h2>Title Content Slide 01</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque consequat tincidunt libero. Aenean euismod. Aenean tempus. Praesent purus dui, aliquam congue, aliquam eget, mattis vitae, libero. Integer sagittis magna quis mi. Donec iaculis odio vel purus. Morbi erat. Nam et libero. Proin eleifend elit quis enim. Vivamus sagittis nibh nec tellus. Donec lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
<p>Cras scelerisque mi auctor orci. Nullam laoreet. Sed gravida. Donec tellus arcu, hendrerit eu, fermentum consequat, accumsan at, dui. Sed a ipsum. Praesent sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed eu massa vitae nibh dictum mollis. Aliquam viverra. Suspendisse id enim. Mauris lobortis ante nec tellus. Aliquam interdum nisi vel nisl. Integer congue augue. Sed justo. Donec dui mi, imperdiet non, molestie sit amet, tristique ut, dui. Donec interdum elit ac nisl. Sed vitae lacus sed pede molestie placerat. Aenean faucibus consectetuer pede. </p>
</div>
<!– SLIDE 02 –>
<div class=”slide 2″>

<h2>Title Content Slide 02</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque consequat tincidunt libero. Aenean euismod. Aenean tempus. Praesent purus dui, aliquam congue, aliquam eget, mattis vitae, libero. Integer sagittis magna quis mi. Donec iaculis odio vel purus. Morbi erat. Nam et libero. Proin eleifend elit quis enim. Vivamus sagittis nibh nec tellus. Donec lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
</div>
<!– SLIDE 03 –>
<div class=”slide 3″>
<h2>Title Content Slide 03</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque consequat tincidunt libero. Aenean euismod. Aenean tempus. Praesent purus dui, aliquam congue, aliquam eget, mattis vitae, libero. Integer sagittis magna quis mi. Donec iaculis odio vel purus. Morbi erat. Nam et libero. Proin eleifend elit quis enim. Vivamus sagittis nibh nec tellus. Donec lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>

<p>Cras scelerisque mi auctor orci. Nullam laoreet. Sed gravida. Donec tellus arcu, hendrerit eu, fermentum consequat, accumsan at, dui. Sed a ipsum. Praesent sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed eu massa vitae nibh dictum mollis. Aliquam viverra. Suspendisse id enim. Mauris lobortis ante nec tellus. Aliquam interdum nisi vel nisl. Integer congue augue. Sed justo. Donec dui mi, imperdiet non, molestie sit amet, tristique ut, dui. Donec interdum elit ac nisl. Sed vitae lacus sed pede molestie placerat. Aenean faucibus consectetuer pede. </p>
</div>
<!– SLIDE 05 –>
<div class=”slide 4″>
<h2>Title Content Slide 04</h2>
<p>Cras scelerisque mi auctor orci. Nullam laoreet. Sed gravida. Donec tellus arcu, hendrerit eu, fermentum consequat, accumsan at, dui. Sed a ipsum. Praesent sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed eu massa vitae nibh dictum mollis. Aliquam viverra. Suspendisse id enim. Mauris lobortis ante nec tellus. Aliquam interdum nisi vel nisl. Integer congue augue. Sed justo. Donec dui mi, imperdiet non, molestie sit amet, tristique ut, dui. Donec interdum elit ac nisl. Sed vitae lacus sed pede molestie placerat. Aenean faucibus consectetuer pede. </p>
</div>

</div>
<!– TERMINA ELEMENTOS –>
</div>
<!– TERMINA EL CONTENDOR –>

JavaScript

/*//////////////////////////////////////////////////////////
/////////////Codigo original: Azer Koçulu//////////////////
/////////////Modificado: Infected-FX//////////////////////
/////////////////www.infectedfx.net//////////////////////
///////////////////////////////////////////////////////*/

function change(x,item)
{
document.getElementById(“current”).id = “”;
item.id = “current”;
if((x * (-1))<(getElementPosition(“elementos”).left – 10)){
distance = (x + getElementPosition(“elementos”).left) / 5;
start = getElementPosition(“elementos”).left;
for(i=0; i<=distance; i++){
setTimeout(“document.getElementById(\”elementos\”).style.margin = \”0 -” + ((start * (-1)) + (i*5)) + “px\””, i*5);
if(i==distance){
setTimeout(“document.getElementById(\”elementos\”).style.margin = \”0 -” + x + “px\””, i*5);
}
}
}else if((x * (-1))>(getElementPosition(“elementos”).left)){
distance = ((x + getElementPosition(“elementos”).left) / 5) * (-1);
start = getElementPosition(“elementos”).left;
for(i=0; i<=distance; i++){
setTimeout(“document.getElementById(\”elementos\”).style.margin = \”0 -” + ((start * (-1)) – (i*5)) + “px\””, i*5);
if(i==distance)
setTimeout(“document.getElementById(\”elementos\”).style.margin = \”0 -” + x + “px\””, i*5);
}
}
}

function getElementPosition(object){
var position = new Object;
position.left = parseInt(document.getElementById(object).style.marginLeft)
position.top = parseInt(document.getElementById(object).style.marginTop)
return position;
}

CSS

/*///////////////////
///// SLIDES JS /////
///////////////////*/

/* GENERALES*/

body {
font:12px Arial, Helvetica, sans-serif;
color:#818181;
}

a {
outline:none;
text-decoration:none;
}

a:link,
a:visited {color:#006699;}
a:hover {color:#00CCFF;}

.center {text-align:center;}

/* CONTENIDO GLOBAL*/
#slides_content {
width:520px; /* ANCHO DEL CONTENEDOR*/
overflow:hidden;
margin:auto;
}

/* HEADERS */
#slides_content h2 {
font:24px Arial;
letter-spacing:-1px;
font-weight:bold;
margin:5px;
color:#FF6600;
}

/* SLIDE */
#slides_content .slide {
float:left;
width:500px; /* ANCHO DE CADA SLIDE */
height:300px; /* ALTURA DE CADA SLIDE */
padding:10px;
border-top:5px solid #7596B7;
}

/* LISTA DE ITEMS */
.buttons{
text-align:center;
width:500px; /* ANCHO DEL MENU */
clear:both;
display:block;
list-style:none;
white-space: nowrap;
padding:0px;
margin:0px 0px 0px 0px;
}

.buttons li{
display: inline;
list-style-type: none;
}

.buttons li a{
text-align:center;
margin:0px 3px 0px 0px;
padding:8px 14px;
line-height:31px;
}

.buttons li a:link,
.buttons li a:visited{
background-color:#B5CADF; color:#000;
}

.buttons li a:hover{
color:#FFFF00;
background-color:#7596B7;
}

.buttons li a#current{
background-color:#7596B7;
color:#FFF;
}

Exemplo

Fonte: http://www.infectedfx.net/

Min-Height para Internet Explorer

Não sei por que cargas d’água M$ internet explorer não lê corretamente o “min-height”, bom procurei no google e achei um esquema legal, que funcionou, segue abaixo:

Cascading Style Sheet
/* for understanding browsers */
.container {
width:20em;
padding:0.5em;
border:1px solid #000;
min-height:8em;
height:auto;
}
/* for Internet Explorer */
/*\*/
* html .container {
height: 8em;
}
/**/

Fonte: http://www.cssplay.co.uk/boxes/minheight.html