Muitas vezes nos preocupamos tanto em como fazer um menu horizontal com CSS que quando vamos fazer um menu vertical temos aquele branco!
Segue abaixo um exemplo:
CSS:

#left_menu {
width: 173px;
margin-left: 5px;
}

#left_menu ul li{
height: 23px;
line-height: 23px;
background: url(/images/menu_left_item.jpg) no-repeat;
width: 163px;
font-size: 11px;
padding-left: 10px;
color: #505050;
}

#left_menu ul li a{
text-decoration: none;
color: #505050;
}

#left_menu ul li a:hover{
text-decoration: underline;
color: #505050;
}

#left_menu ul li.ativo {
background: url(/images/menu_left_item_active.jpg) no-repeat;
font-weight: bold;
text-decoration: [...]

Ler post completo »

Depois de todo o BOOOM!! do Tableless muitos sites e especialistas no assunto estão dizendo: Fora Tableless!!

O grande ponto de tudo isso é utilizar “tableless” de forma equivocada!
Quando um desenvolvedor aprende e começa utilizar os padrões web, a primeira coisa que vem a cabeça é: Meu site tem que ser tableless ou seja, não deverá [...]

Ler post completo »

Um dos pontos importantes de nosso site de pré-lançamento é o menu horizontal.
Fizemos tal menu utilizando somente CSS. Gostaríamos de dar um simples exemplo de como fazer um menu horizontal utilizando CSS.
Arquivo CSS:

#menu {
display: table;
background-image: url(/images/menu.gif);
background-repeat: no-repeat;
width: 628px;
text-align: left;
margin:0 auto;
position:relative;
height: 24px;
}

#menu ul {list-style:none;}
#menu ul li {display:inline}
#menu ul li a {
font: 10px Verdana, Arial,tahoma, sans-serif;
color: white;
text-decoration: [...]

Ler post completo »

Estamos terminando o site de pré-lançamento. Quem chegou ver o Screenshot, pode perceber que todo o conteúdo é baseado em um box com bordas arredondadas sem utilizar imagens.
Lá vai nossa pergunta: Qual é a melhor forma de se fazer isso? Há muitas maneiras.  Nesse caso, utilizamos essa, postado no site: códigofonte.com.br pelo Gabriel Fróes.
Vamos lá:
CSS:

.bordaBox [...]

Ler post completo »

Enquanto nossa animação de apresentação está sendo desenvolvida, começaremos a gerar o HTML para o site do pré-lançamento.
Temos que definir o seguinte: Vamos utilizar o máximo possível de webstandards e microformats, porém, nossa opinião sobre isso é a seguinte:
Acreditamos que a utilização de webstandards nos dá vários diferenciais como:

Redução no código fonte
Site mais leve, utiliza [...]

Ler post completo »