HTML segue sendo minha maneira preferida de editar texto formatado desde 1927. (Houve um tempo, antes de entrar para a CIC, em que eu fazia trabalhos de aula em HTML e depois copiava e colava do browser no Word para imprimir.) Entretanto, esse tal de CSS e seu box model às vezes me decepcionam.
No penúltimo post, eu resolvi colocar uma imagem à esquerda do texto, de modo que o texto seguisse normalmente no espaço vazio à direita da imagem. Trabalho para um elemento floated. Coisa simples, não? Acontece que por três pequenos acasos essa tarefa foi menos trivial do que parecia ser.
O primeiro passo foi adicionar a figurinha com a propriedade float: left e olhar no browser o resultado. Como eu ainda não tinha escrito o resto do texto do post, o que aconteceu é que o link de comentários e o post seguinte ficaram arranjados ao lado da imagem. Embora o problema fosse desaparecer assim que eu continuasse a adicionar texto, por uma questão de princípios eu resolvi garantir que o conteúdo de um post ficaria isolado do post seguinte independentemente de quanto texto houvesse no post. A primeira coisa que eu tentei foi colocar um <DIV> em volta do post inteiro. Isso não resolve o problema: o elemento floated não conta no tamanho da DIV por padrão, e a DIV termina antes da figura. A solução que eu encontrei nas Internets (e que não vou me dar ao trabalho de vasculhar no histórico para descobrir onde achei) foi dar a propriedade overflow: hidden para a DIV que engloba o post. Não, a definição oficial da propriedade overflow: hidden não é essa. Anyway. Primeiro problema resolvido.
Por um acaso infernal, a primeira coisa ao lado da imagem, depois de um subtítulo, era um BLOCKQUOTE. O comportamento normal do BLOCKQUOTE é deixar uma margem à esquerda, indentando o texto citado. Porém, o CSS resolveu calcular a margem a partir da esquerda da DIV do post, ignorando a existência da imagem floated. Como a margem era menor que a largura da imagem, ela era simplesmente desprezada. O mesmo problema acontece com listas (com o bônus de que as bullets de uma lista são posicionadas no espaço da margem por padrão, e conseqüentemente aparecem por cima da imagem).
Não achei uma solução decente para isso. A solução indecente foi:
Agora está tudo certo, certo?
Bem, não. Por outro acaso infernal, a imagem era um link. Lembra do nosso BLOCKQUOTE com margem maluca? Pois a margem maluca invisível agora fica sobreposta à imagem, e com isso o trecho de imagem que fica ao lado do BLOCKQUOTE não é clicável. Tentei tacar z-index na imagem e no BLOCKQUOTE para mudar a ordem de sobreposição. Nada.
Acontece que:
Ou seja, quando eu taquei um position: relative; left: 24px no BLOCKQUOTE, ele passou a ser empilhado sobre a imagem floated, com margem e tudo. A solução, portanto, é tacar um position: relative; z-index: 10 na imagem, para valores arbitrários de 10 (e um z-index: 0 no BLOCKQUOTE por via das dúvidas).
Agora tudo funciona. Certo?
Fiquei com vontade de responder que na segunda tentativa eu já teria usado uma tabela, hehe. Mas aí eu vi que ia ser um inferno também...
Tá certo que meus conhecimentos em CSS se assemelham aos meus conhecimentos em culinária (*), mas o primeiro problema não poderia ser resolvido com um float: clear?
(*) Bom... eu sei que para cozinhar é necessário esquentar a comida. Já é algum conhecimento, né?
Pelo que eu entendi, o "clear" controla se vão aparecer outros elementos floats do lado de um float. Experimentei aqui meio a facão e não funcionou...
(Tabela? Nunca faria tal coisa. Favor não olhar o fonte desta página. :P)
Aaah, o 'clear' vai no próximo elemento, não no float. Funcionaria, mas aí eu teria que colocar o 'clear' no parágrafo com o link de comentários (o que exigiria mudar o fonte deste belo blog system), ou criar uma DIV dummy no final do post...
Copyright © 2010-2024 Vítor De Araújo
O conteúdo deste blog, a menos que de outra forma especificado, pode ser utilizado segundo os termos da licença Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International.
Powered by Blognir.
Valdeni, 2013-01-06 21:43:42 -0200 #
Veja bem que... com o HTML 6, é possível utilizarmos-nos de novas implementações para... melhorar o sistema de boxes do CSS. Porque o HTML 7 dispensa o uso das boxes. O HTML 5 é superior. Não é?
Note que existe outro modelo para a navegação... que é a navegação temporal. Essa navegação é feita de maneira simples em HTML 7.5. Utilizamos uma marcação... HTML. O nome é... meta-refresh. Meta-refresh. Que é o HTML temporal. Vejam... é muito simples... não é?
É sim... Pasmem!