Tulio Faria

Passei um sufoco esses dias tentando alinhar um div dentro do outro apenas com CSS, o qual aliás não consegui nada satisfatório, mesmo achando algumas técnicas interessantes que não chegaram a funcionar comigo. Então parti para o JavaScript, para me ajudar.

Como neste projeto que eu precisava alinhar os divs, eu já estava usando a biblioteca JQuery (que por sinal tem um slogan legal - "Write less, do more" ou seja, escreva menos e faça mais), fiz o alinhamento usando ela mesmo.

Aqui está a explicação do problema:

Onde eu tenho uma div maior, com altura definida. Um div (que tive que adicionar para poder alinhar) com altura variada por conter o texto e uma imagem os quais não tenho controle das suas respectivas alturas.

O primeiro detalhe que temos que fazer é adaptar o código (x)html para ser alinhado. Como disse tive que adicionar um div (o da altura variada), pois sem ele nada feito.

Obs.: não pode haver nenhum espaço ou texto entre os dois divs, porque senão haverá um textNode entre eles e a técnica não funcionará. Tenho que arrumar um workaround para isso e para a preguiça.

[UPDATED 10/07/2007]

Agora vem a parte divertida, JavaScript, para conferir o código entre aqui e veja o Código Fonte de Exemplo.

Obs.: me desculpem por não ter percebido esse erro. Realmente o editor do blog cortou uma parte do fonte JS.

[/UPDATED 10/07/2007]

O que esse código faz, resumidamente, é pegar a altura dos dois divs, subtrair e dividir esse resultado por dois. Para saber o valor do padding-top que temos que definir no div de altura fixa. Que é o mesmo valor que tiraremos de sua altura.

Por que usei setTimeOut? Porque estava dando alguns problemas de não reconhecer a altura dos divs logo após o carregamento da página, assim depois de 1000ms possivelmente já terá renderizado corretamente.

Para baixarem a JQuery: www.jquery.com

Bom pessoal, até a próxima. Qualquer dúvida, comentem

Estudo sobre Image Replacement – Parte 2

Nesta segunda parte iremos trocar o texto por imagem usando text-indent, usando o método desenvolvido por Phark (Phark Method).

Ler o post completo »

Vamos iniciar uma série de tutoriais sobre Image Replacement, que é uma técnica usada para substituir um texto por uma imagem, usando CSS. (e JavaScript, dependendo da maneira que for aplicado). Esta técnica é bastante utilizada para títulos, pois podemos deixa-lo com uma aparência melhorada, além de podermos usar outras fontes que não as convencionais.
Ler o post completo »

Um labirinto 3D Dinâmico feito somente com CSS e DOM, usa a técnica de criação de polígonos com CSS, técnica essa desenvolvida por Tantek Çelik. Bastante interessante para estudo.

Brothercake: http://www.brothercake.com/site/resources/reference/3d/

Exemplo do labirinto: http://www.brothercake.com/games/underground/underground.html

Estudo sobre polígonos regulares feita por Tantek: http://tantek.com/CSS/Examples/polygons.html

O que é isso?

É uma idéia de Ibanescu Nicolae de provar que é possível fazer um site usando somente uma tag, no caso somente big ou small. Mostrando também o poder do CSS e reforçando o quão é importante a semântica, pois, podemos criar um site somente com uma tag tendo o mesmo efeito visual.

Vale a pena conferir: A Big Small Project ( http://big-small.uv.ro/index.html )