Imagem ao lado do texto

[andreymor 0]

Olá a todos........como faço, via CSS, pra colocar uma imagem, com um texto ao seu lado, e quando esse texto passar da imagem, ele continue abaixo da imagem?fico grato pelo apoio.Att,Andrey Moretti

[André do Vale 76]

Se a imagem e o texto estiverem em um mesmo container, é só dar um float na imagem, para direita ou esquerda.

[p.d 0]

<img src="nomedaimagem.jpg" style="float:left;" />

[Giovani 104]

Título do tópico editado.

Sai: Ajudinha basica

Entra: Imagem ao lado do texto

[andreymor 0]

certo. isso é sabido.mas nao quero apenas ao LADO do texto........quero que ao terminar o texto, ele vá para baixo da imagem........

[RTaveira 0]

Tirei esse exemplo do site do Maujor.

 

CSS:

 

#ultimas p{line-height:1.4;} #ultimas a.img-left{float:left; margin-right:10px;} #ultimas h3 {margin:0; font-size:1.1em;} #ultimas span.data {float:right; margin-top:-15px; font-size:0.9em;}#ultimas p.resumo {border-bottom:1px solid #ccc; padding-bottom:10px; }

XHTML:

 

<div id="ultimas"><h3>Oito dicas para servir (X)HTML</h3><a href="/tutorial/oito-dicas-xhtml.php"><img src="/imagens/leia.gif" alt="botao com link para matéria" class="img-left" /></a><p class="resumo"><strong>18 de julho de 2007</strong><br /><strong>Tantek Çelik disse:</strong> Eric Meyer, Aaron Gustafson e eu criticamos aspectos referentes à marcação, estilização e scripts de vários sites submetidos para análise por nossos ouvintes no evento "An Event Apart" <span class="nt">(NT: encontro web standard realizado em Nova York na segunda semana de julho de 2006)</span>.<br /> Conforme prometi, apresento a seguir um sumário das minhas críticas. Constatei a existência de uma quantidade razoável de erros comuns e maneiras de corrigí-los, por outro lado, alguns sites forneceram exemplos marcantes e ilustrativos de erros. <a href="/tutorial/oito-dicas-xhtml.php">Ler artigo</a></p></div>

Abraço !

[Guilherme Rambo 4]

Não tem erro, pra um HTML como esse, por exemplo:

<div id="container">
  <p>
     <img src="imagem" alt="" />
     Texto aqui
  </p>
</div>

 

O css seria:

#container img {float:left}

E tá feito, simples assim :)

 

[]'s

[NoX1911 0]

Muito bom cara.. me ajudou muito aqui essa do float. Vacilei em nao ter pensado nisso antes :]

[Ricardo.RFS 0]

o proprio html faz isso<img src="img.jpg" align="left" />

[Giovani 104]

Não é recomendado fazer o que você disse Ricardo.

A tag align está depreciada, a solução correta é a que o #INSIDE# falou.

 

<img src="img.jpg" align="left" />

[Ricardo.RFS 0]

por que?

[Giovani 104]

http://www.maujor.com/dicas/deprecated.php

Boa leitura.

[Ricardo.RFS 0]

valeu...

 

 

 

alguem com conhecimento avançado poderia verifica o topico abaixo

http://forum.imasters.com.br/index.php?showtopic=250834