Ir para conteúdo / Skip to content

POSICIONANDO TEXTO AO REDOR DAS IMAGENS

Postado em: 20 de junho de 2006 por Pedro Rogério

Antigamente 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;
  }

Veja aqui um exemplo.

Se tiver um tempo, leiam também:

Deixe seu comentário

6 comentários para esse post

  1. Felipe Ranieri disse: 20.06.06 ás 21:22
    #1

    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!!

  2. Robson Cavalcante disse: 01.12.06 ás 13:32
    #2

    Se tiver várias imagens na mesma página, como se aplica?

    Abraços.

  3. Pedro Rogério disse: 01.12.06 ás 19:28
    #3

    Robson,

    Faça da seguinte forma, crie uma classe com as definições e aplique a mesma as imagens!!!!

  4. Fred disse: 09.10.07 ás 19:19
    #4

    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;
    }

  5. Pedro Rogério disse: 09.10.07 ás 21:11
    #5

    @Fred,

    Coloca um clear:both no texo que ele fica abaixo da imagem;

  6. Fred disse: 10.10.07 ás 13:06
    #6

    Valeu Pedro Rogério!

Deixe seu comentário