Posicionando texto ao redor das imagens
Postado por: Pedro Rogério emAntigamente muitas pessoas faziam isso com tabelas, se criava uma célula, onde se colocava a imagem, e na célula ao lado, era colocado o texto, e tinha-se a ilusão de que o texto estava fluindo ao lado da imagem. Fazer isso com CSS é muito simples, usaremos a propriedade float. O nosso HTML fica da seguinte forma:
<img src="logo.jpg" alt="Pinceladas da Web" />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum at purus sed erat lobortis suscipit. Cras
facilisis viverra wisi. Class aptent taciti sociosqu...
</p>
Se você quiser que a imagem fique alinhada a esquerda e o texto flua a sua direita, é só definir a propriedade float como left, isso quer dizer que a imagem irá flutuar a esquerda, seu CSS deverá ficar da seguinte forma:
img {
float:left;
margin:0 20px 10px 0;
}
Aqui é importante definir valores para margin para que o nosso texto não fique colado na imagem. Veja aqui um exemplo.
Mas caso você queira que sua imagem fique a direita do texto, é só definir o float como rigth, isso quer dizer que a imagem irá flutuar a direita do seu texto, o CSS fica da seguinte forma:
img {
float:rigth;
margin:0 0 10px 20px;
}
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Muito boa dica!! Ta ai mais uma prova de que tabelas são apenas para DADOS TABULADOS, como calendários e a própria tabela periódica, pena que muitos desenvolvedores ainda preferem ignorar as web standards.
Abraços!!
Se tiver várias imagens na mesma página, como se aplica?
Abraços.
Robson,
Faça da seguinte forma, crie uma classe com as definições e aplique a mesma as imagens!!!!
Usei este código para colocar uma imagem na página onde eu queria mas agora como faço para colocar um texto abaixo dela.
já tentei de várias formas e não consigo
#shalom {
position:absolute;
top:36%;
left:62%;
width:670px;
height:auto;
margin-left:-335px;
margin-top:-97px;
text-align:left;
border:0px solid #f00;
}
@Fred,
Coloca um clear:both no texo que ele fica abaixo da imagem;
Valeu Pedro Rogério!
Vlw, precisava de uma dica rápido e fácil e essse tutorial me ajudou muito.
Com este exemplo, o texto fica legal, mas a área da tag fica por baixo da imagem.
Se você colocar uma borda ou uma cor de fundo você irá ver.
Existe alguma forma de isso não acontecer?
hahaha!
tinha colocado o img debaixo da div do texto e só dava pau… agora consegui… vendo aki!
vlww!
nao consigo colocar legenda de baixo de uma imagem?
Pô, até hoje não sabia fazer isso, negócio simplíssimo! Valeu pela ajuda aí, companheiro!
Mas eu devo ser antiquado, pois gosto mesmo de diagramar a página com tables. Acho muito confuso usar div layers.
realmente muito simples
E seu eu quiser que o texto flua dos dois lados da imagem? A imagem no centro e texto fluindo dos dois lados.
Valeu Pedro me ajudou bastante.
muito bom
Parabéns pelo post! Resolveu meu problema.
valeu amigão!!
obg, mas eu queria mesmo era colocar várias imagens ao lado uma da outra e com legenda, será que a melhor forma é criar uma tabela???
Legal, e obrigado por compartilhar esse conhecimento.
E se o caso for exibir a imagem sobre uma div, no meu caso eu queria plotar uma foto e um postal em cima