Texto e imagens no mesmo parágrafo

Março 28th, 2007

Se você receber (ou conceber) um layout de uma ou várias páginas com uma situação como abaixo, ou seja, texto junto com imagem, imagem ora para a direita, ora para esquerda. O que você faz ? Cria uma div para cada uma das imagens e sai floatando para tudo que é lado ? Coloca as imagens dentro de divs dentro dos parágrafos e depois vai receber aquela mensagem do validador…. document type does not allow element “div” here; missing one of “object”, “applet”, “map”, “iframe”, “button”, “ins”, “del” start-tag… desiste de tudo e vai assistir a Luciana Gimenez entrevistar a filha da Gretchen e volta a fazer layouts com Front Page e tabelas ???

Ok, demorou para responder. Faça o seguinte:

Insira as imagens dentro dos parágrafos e declare no seu css como elas devem se comportar lá dentro. Por exemplo, você pode dizer que todas as imagens dentro dos parágrafos devem flutuar à direita (conforme a primeira imagem do exemplo acima). Supondo que as imagens estão dentro de uma div de nome “conteudo”, então:

#conteudo p img {
float:right;
}

Pronto, todas as imagens vão obedecer a declaração acima.
Mas…. e quando eu quiser novamente uma imagem à esquerda ????

Simples. Crie uma classe como abaixo:

#conteudo .esquerda {
float:left;
}

Aplique a classe nas imagens que quiser a esquerda.

Veja o arquivo completo.

Até o próximo.

Categoria(s): XHTML