Quarta-feira, 30 de Janeiro de 2008

Colocar texto ao redor de uma imagem utilizando CSS

Fala Rapazia, 00:31, aproveitar pra postar uma dica bem rapidinho aqui, simples, mais muito interessante.

Você ja deve ter se perguntado como colocar um texto ao redor de uma imagem, ou seja, fazer a imagem seguir a imagem.

Uma solução pra isso é utilizar tabelas, porém, o resultado não é tão satisfatório e pode complicar se você estiver utilizando uma página dinâmica, obtendo informações de uma base de dados.

bom, vamos deixar o texto de acordo com a imagem abaixo, simplesmente utilizando CSS.

Untitled Document_1201660772078

a única coisa que iremos precisar é a TAG IMG do HTML e FLOAT do CSS.

então nosso código ficaria assim:

   1: <img src="imagem.png" alt="Imagem" style="float:left;" />

Onde, adicionamos o atributo STYLE na linha de código da imagem e utilizando o float com valor LEFT, assim, a imagem é posicionada à esquerda do texto.

Caso seja necessário a imagem do lado direito, devemos utilizar RIGHT. ficando assim:

   1: <img src="imagem2.png" alt="imagem2" style="flaot:right;" />

Untitled Document_1201661022296

É isso ae pessoal, espero que esta dica tenha sido muito útil!

Abraços! qualquer dúvida é só entrar em contato!

00:46... vou dormir!

1 comentários:

nóia disse...

BAHH. dica da hora, pegamos uns macetes de css no curso de web design. to estudando vários tutos de css pela web, é muito prático fazer o site usando o css

é isso ai bio.

vlw!