alinhar imagem com texto em css

[kklj 0]

amigos ja procurei na net, mas nao encontrei nada q pudesse me ajudar, estou tentando colocar uma foto ao lado de um texto, porem essa foto ficara alinha a direita e tem fotos q ficara alinha a direita. essas fotos tem um tamanho medio de 110px e 100px, porem qdo eu coloco elas ao lado do texto, fica uma linha apenas na frente da foto e o restante em baixo, eu queria q ficasse em volta da imagem e qdo terminar passar para baixo dela. queria fazer isso usando css. ha e p meu texto ja esta em css.

 

<p class="style2" ><img src="trabalho.JPG" align="left"/> AKI ESTÁ O MEU TEXTO </p>

isso é so um paragrafo, pois meu texto é bem maior.

 

se alguem puder me ajudar ficarei muito grato

[donato 0]

Procure usar o float:left; ou right, como preferir.

 

abraços

 

 

CSS

.foto1 { float: left;

[inforsis 1]

kklj, Boa Tarde!

Segue a dica do donato e da uma conferida na busca aqui do forum, irá encontrar um bom material que te ajudará.

 

Persistindo a dúvida post novamente, e nao esqueca de retornar ao topico para informar caso consiga resolver. ;)

[donato 0]

Procure usar o float:left; ou right, como preferir.

 

abraços

 

CSS 
.foto1 { float: left; 
margin: 4px; 
background: url(trabalho.JPG) center;
}


html
<div id="foto1"></div> aqui vai texto

procure fazer assim

 

basicamente assim, mas pode melhorar o que achar melhor, dê uma pesquisada

[Giovani 104]

donato, por que abrir e logo fechar a div?

Fica meio solta ali dentro. Olhe minha sugestão:

 

#suaDiv{propriedades da div}
#suaDiv img{float: left; margin: 10px;}

Quando for "chamar" a div:

<div id="suaDiv">
   
   imagem

   texto

</div>

Fica ai minha sugestão.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[kklj 0]

donato, por que abrir e logo fechar a div?

Fica meio solta ali dentro. Olhe minha sugestão:

 

#suaDiv{propriedades da div}
#suaDiv img{float: left; margin: 10px;}

Quando for "chamar" a div:

<div id="suaDiv">
   
   imagem

   texto

</div>

Fica ai minha sugestão.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

giovane, nao entendi o seu codigo, sou iniciante, o q você quis dizer com propriedades do div? e onde eu coloco essa primeira parte q você postou ai?

 

eu tentei do jeito q o donato falou mas nao consegui, nao deu certo. o meu codigo esta assim

 

<img src="img/trabalho.jpg" align="left" margin="10" width="111" height="110"  />

<p class="style2" > meu texto </p>

o texto q ja esta num css eu chamo ele na class. eu tenho um arquivo onde estao todos os meus css, sera q tem alguma coisa haer para nao estar funcionando?

do jeito q meu codigo esta, ta funcionando, porem o texto esta colado com a imagem e tbm eu queria no css.

 

obrigado

[brcontainer 16]

é algo assim que o giovani quis lhe dizer:

<style>
#suaDiv{
width:200px;
height:auto;
}
#suaDiv img{float: left;}
</style>
<div id="suaDiv">
   <img src="" alt="">
   <p>texto texto texto texto texto texto texto texto texto texto texto texto texto</p>
</div>

testa ae ;)

[donato 0]

é que quando coloco imagens que não são dinamicas eu coloco como background, acho melhor. ao contrário de alt, coloco title="" no html, sei lá é uma opção tb.

[Leonardo P 0]

donato, depende muito do contexto usar imagem como background ou com <img>m,

caso a imagem faça parte do conteúdo, o "certo" seria usar a tag <img> mesmo.

[Portal Zulupa 0]

 

amigos ja procurei na net, mas nao encontrei nada q pudesse me ajudar, estou tentando colocar uma foto ao lado de um texto, porem essa foto ficara alinha a direita e tem fotos q ficara alinha a direita. essas fotos tem um tamanho medio de 110px e 100px, porem qdo eu coloco elas ao lado do texto, fica uma linha apenas na frente da foto e o restante em baixo, eu queria q ficasse em volta da imagem e qdo terminar passar para baixo dela. queria fazer isso usando css. ha e p meu texto ja esta em css.

 

<p class="style2" ><img src="trabalho.JPG" align="left"/> AKI ESTÁ O MEU TEXTO </p>

isso é so um paragrafo, pois meu texto é bem maior.

 

se alguem puder me ajudar ficarei muito grato

Amigo, acho que se você de clarar a propriedade :

float: left; tanto para a imagem quanto para o tesxto vai funcionar como você está querendo.

[xanburzum 169]

Olá... por favor dê preferência em responder tópicos recentes, pois esse é de 2008... está um pouco... antigo.

 

obrigado