GustavoRibeiro.net

A propriedade border-collapse tem como objetivo dividir ou não as bordas das tabelas via CSS e possui os seguinte atributos: collapse e separate.

Por padrão, toda tabela renderizada recebe o atributo separate mesmo que não seja especificado no CSS da página, ou seja, cada elemento possui sua própria borda.

Exemplo de tabela com o atributo separate.

<table style="border:solid 1px #00f">
    <tbody>
        <tr>
            <td style="border:solid 1px #0f0">célula 1</td>
            <td style="border:solid 1px #0f0">célula 2</td>
            <td style="border:solid 1px #0f0">célula 3</td>
        </tr>
    </tbody>
</table>

Exemplo de tabela com o atributo collapse.

<table style="border:solid 1px #00f;border-collapse:collapse">
    <tbody>
        <tr>
            <td style="border:solid 1px #0f0">célula 1</td>
            <td style="border:solid 1px #0f0">célula 2</td>
            <td style="border:solid 1px #0f0">célula 3</td>
        </tr>
    </tbody>
</table>

Outras dicas são bem vindas nos comentários

A quase dois meses atrás, postei um tópico, chamado Corrigindo a propriedade float via CSS, explicando o porque de sempre que utilizarmos um objeto com a propriedade float ele perder a herança do elemento pai e como corrigir esse bug.

Foi descoberto Atualmente descobri que podemos ter a mesma solução sem ter que incluir aquelas linhas todas do .clearfix. A solução é que, devemos sempre lembrar que o elemento pai possui sua propriedade overflow como auto.

<div>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
    </ul>
</div>

div { overflow: auto }
ul li { float: left }

Fontes:
http://br.groups.yahoo.com/group/webstandards-br/message/20126
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Quem nunca passou por problemas ao criar um menu, ou qualquer outra coisa que seja, utilizando a propriedade float? Pois é! Procurando sobre o que escrever nesse blog, resolvi deixar aqui uma solução para o problema da imagem abaixo.

Continuar lendo…

“Image Replacemente” é uma técnica bastante utilizada hoje em dia quando queremos substituir um texto em nosso site por uma imagem, nos possibilitando o uso de diversos tipos de fontes etc. Abaixo coloco um exemplo utilizado aqui no blog, aonde eu substituo o texto “gustavoribeiro.net” por uma imagem chamada “logo.jpg”. A técnica é bastente simples:

Costumo utilizar sempre a tag <h1> para inserção de logo nos sites que faço, ficando assim:

<h1><a href="index.php"><span>gustavoribeiro.net</span></a></h1>

Já no CSS, aplico a imagem da logo como background da tag <a>, fazendo assim, um link para a home do site e na <span> escondo o texto para que o mesmo não apareça em cima da imagem.

h1 a {
    float:left;
    width:148px;
    height:22px;
    margin-top:9px;
    background:url('img/logo.jpg') no-repeat;
}
h1 span {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    visibility:hidden;
}

Dessa forma, ao utilizar-mos o Jaws ou o Lynx não iremos perder nenhuma informação disponível no site por causa de imagens. Experimente também, desabilitar o CSS utilizando a extension web developer do firefox e veja o que acontece com a imagem do logo.

ps off topic: parabéns para mim