Jump to content

Archived

This topic is now archived and is closed to further replies.

andreymor

Imagem ao lado do texto

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 !

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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" />

Share this post


Link to post
Share on other sites

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.