Pinceladas da WebTutoriais sobre: XHTML, CSS, JavaScript e WebStandards

Desenvolver um menu drop down em CSS que funcione em todos os browsers, incluíndo o Internet Explorer 6, não é uma tarefa fácil, mas hoje vou mostrar aqui uma forma de fazer um menu drop down somente com CSS, sem a utilização de JavaScript e crossbrowser. Vejam uma prévia do menu final.

Para aqueles que não sabem, o Internet Explorer não interpreta o :hover corretamente (digo a versão 6), ele só interpreta o :hover na tag “a”, com isso você não consegue criar o menu drop down somente com CSS, precisa do JavaScript somente para o IE6 para que funcione corretamente.

Um exemplo de uma função em JavaScript utilizada para criar menu dropdown é essa:

Continuar lendo »

A era do currículo em papel já chegou ao fim. Hoje é mais vantajoso você criar um currículo virtual que irá servir de ponte de ligação entre você e as empresas do que ficar perdendo tempo no Word.

Diante disso, deixo aqui a dica de um currículo em HTML onde você só necessita baixar o arquivo, editá-lo e colocá-lo em seu servidor:

Via: WebIntenta

Janko Jovanović, desenvolvedor web localizado em Sérvia e Montenegro e proprietário do blog Janko At Warp Speed desenvolveu um ebook com os melhores tutoriais que ele já escreveu no seu primeiro ano de blog e está o disponibilizando gratuitamente em seu blog.

Continuar lendo »

A algum tempo atrás recebi um e-mail de um leitor aqui do blog me perguntando se conhecia alguma solução para colunas com alturas iguais em CSS, acabei mandando pra ele uma solução em jQuery, mas depois lembrei que conhecia uma solução bem simples utilizando CSS puro, que encontrei aqui no CSSBlog.es. Você pode atingir esse mesmo efeito com a utilização de JavaScipt, mas não atingiria aqueles usuários que não navegam com o JavaScript habilitado por necessidade ou por opção. Recorrer a tabelas? Nem pensar.

Imagem retirada do site de Matthew James Taylor

A solução para conseguir colunas com alturas é que o conteúdo de pelo menos uma delas deve ser maior do que todas as outras, fazendo com que a coluna com menor conteúdo acompanhe as outras em paralelo.

Continuar lendo »

O W3C tem a missão de levar a World Wide Web para o seu pleno potencial através do desenvolvimento de protocolos e orientações que assegurem o crescimento a longo prazo da web, e hoje foi lançado uma versão beta do redesign do seu site.

Analisar o código HTML e o CSS é uma boa aula de boas práticas e semântica, e por falar em boas práticas, aproveitem para dar uma olhada no CSS, vejam que ele é todo inline as propriedades são declaradas em linha, muita gente fala que escrever CSS dessa forma é perda de tempo, mas eu particularmente só escrevo CSS dessa forma e aconselho vocês a segui-la também.

Abaixo você pode ver um vídeo com as partes chave do redesign do site do W3C:

Mais informações: W3C Q&A Weblog.

As listas HTML são de fácil utilização devido a sua flexibilidade. São muito utilizadas para o desenvolvimento de menus, mas nesse tutorial, baseado no original do site Smiley Cat vamos aprender a desenvolver um bloco de texto com efeito :hover com a utilização de listas e CSS. O HTML é muito simples, e se resume no seguinte:

<div id="links">
    <ul>
      <li>
        <a href="#" title="Título do post">
                Título do post
                <em>Descrição do post.</em>
                <span>Data</span>
        </a>
   	  </li>
        <li>
            <a href="#" title="Título do post">
                Título do post
                <em>Descrição do post.</em>
                <span>Data</span>
            </a>
      	</li>
    </ul>
</div>

Continuar lendo »

Após o lançamento do IE7, muita gente havia pensado que a vida no desenvolvimento web iria melhorar um pouco(isso mesmo, um pouco), mas não é isso o que aconteceu, pois a cada dia que passa fico conhecendo mais um bug novo no Internet Explorer. Já ouviram falar do bug de first-child no IE7? O curioso problema que ocorre é o seguinte. Observem a seguinte marcação HTML:

<ul>
    <!-- Esse comentario sera o 1º filho no IE7 -->
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

Como podem ver, nada estranho, de diferente um simples comentário HTML que será o 1º filho no IE7, isso mesmo, ele reconhece aquele comentário HTML como o primeiro filho do “ul”. Vejam nesse exemplo o bug. Uma possível solução é não utilizar comentários. Por favor alguém mande um e-mail para bill@microsoft.com pedindo a descontinuação desse browser.