Problemas e Soluções #0
Sabe quando você esta quebrando a cabeça para resolver um problema, seja ele no trabalho ou em casa, e derrepente, a solução para o seu problema aparece para te deixar extremamente satisfeito.
Pois bem, essa será uma seção onde eu mostrarei alguns problemas que acabo enfrentando no dia a dia, seja por desconhecimento, ou por mera desatenção mesmo.
Neste primeiro post, eu vou falar sobre um problema que tive relacionado a tag DIV, e uma imagem em uma DIV, e como uma propriedade de CSS salvou um layout tableless no qual eu estava trabalhando.
Problema:
No layout da página, haviam alguns divs que seriam utilizados para mostrar noticias com imagens e conteúdo escrito também, mas o conteúdo e as imagens dentro dele seriam dinâmicos, por tanto, o tamanho poderia variar, e pra piorar, algumas vezes o conteúdo escrito seria menor do que a imagem, e por conseguência, a imagem acabava saindo dos limites do DIV.
Solução:
Procurando em alguns fóruns, acabei achando a solução pro meu problema no fórum do iMasters.
A propriedade table do elemento display foi quem salvou o dia. Ela fez com que o elemento, no meu caso o DIV, se comportasse como uma tabela, e por conseguência a imagem, mesmo sendo maior que o DIV, ficaria toda dentro do elemento, e assim não estourando mais.
Para quem quiser ler alguma coisa sobre o elemento display e as suas propriedades, basta acessar os links abaixo:
The ‘display’ property: http://www.w3.org/TR/2003/WD-CSS21-20030915/visuren.html#display-prop
CSS display Property: http://www.w3schools.com/css/pr_class_display.asp
Obs.: O IE não possue a propriedade table no display, mas há uma propriedade que faz a mesma coisa, que é a “inline-block”. Por tanto, se você quiser manter o site funcionando pelo menos no Firefox e no IE, você devera fazer um hack no seu CSS.
Se você esta lendo este post e testou essa propriedade em outros browsers, por favor comente aqui :).