posicionamento de imagem e texto!

[diegoholiveira 3]

Galera, beleza?

 

Olha só, to precisando colocar uma imagem dentro de um paragrafo e fazer com que o texto siga a imagem sem dar aquela distorção que o texto fica lá no pe da imagem e continua a partir dai. eu quero que o texto siga a imagem lado a lado e quando acabe a imagem ele expanda pro resto da tela.

 

Acredito que não seja dificil fazer isso, mas eu tentei muitas vezes e não tive sucesso.

 

se alguem puder me ajudar, fico grato. abaixo minha estrutura:

 

<p>			<img src="images/foto7.jpg" border="0" />			O eucalipto é a madeira nobre dos próximos anos. Seguindo esta tendência, nossa empresa oferece peças da mais alta qualidade e resistência sem agredir seu bolso. Temos o que há de melhor para a fabricação de móveis, objetos decorativos, acabamentos nobres para interiores, cercas e uma grande variedade de outros usos que requerem uma madeira forte, bonita e ecologicamente correta.			<br /><br />			Ajudamos você a realizar seus projetos preservando a natureza e sua consciência!		</p>

 

obrigado

[Paulo de Tarso F. M. 24]

Não tem nenhum link para visualizarmos o problema? :mellow:

[diegoholiveira 3]

Um exemplo do problema: http://www.ciadoeucalipto.com.br/empresa

olha no final da pagina.

 

ate

[Paulo de Tarso F. M. 24]

Bom, na Linha 48, temos esse trecho aqui:

<img class="foto" src="images/foto7.jpg" border="0" />

Pergunta número 1: para que especificar uma class à foto se essa class não existe? (Analisando seus arquivos CSS, não pûde encontrá-la)... Segunda pergunta: por que utilizar ainda o atributo border? Tá, tudo bem, você ainda está usando um Doctype que permite o uso deste atributo, mas saiba que o mesmo está em desuso pelas novas especificações do W3C, onde este tipo de formatação deve ser feita com CSS (pelo menos usando os DTDs XHTML). Bom, vamos lá então...

 

Primeiro passo: No arquivo content.css (ou, claro, se preferir usar o layout.css... Mas outra pergunta aqui: por que ter 2 arquivos CSS? Eles não possuem muito conteúdo, é melhor deixar tudo em um só...), crie uma id com o nome de foto (usando o nome seu exemplo), e insira os seguintes parâmetros:

#foto {	float: left;	margin-right: 10px;	border: 0;	width: 225px;	height: 338px;}

Até aqui tudo certo?

 

Segundo passo: no seu arquivo HTML, lá na linha 48 de novo, altere este trecho citado:

<img class="foto" src="images/foto7.jpg" border="0" />

... por este abaixo:

<img src="foto7.jpg" id="foto" />

Pronto! Veja o resultado... Espero que tenha ajudado... Um abraço!

[diegoholiveira 3]

Bom, na Linha 48, temos esse trecho aqui:

<img class="foto" src="images/foto7.jpg" border="0" />

Pergunta número 1: para que especificar uma class à foto se essa class não existe? (Analisando seus arquivos CSS, não pûde encontrá-la)... Segunda pergunta: por que utilizar ainda o atributo border? Tá, tudo bem, você ainda está usando um Doctype que permite o uso deste atributo, mas saiba que o mesmo está em desuso pelas novas especificações do W3C, onde este tipo de formatação deve ser feita com CSS (pelo menos usando os DTDs XHTML). Bom, vamos lá então...

obrigado pelo dica, vou tentar nunca me esquecer dela. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

 

Primeiro passo: No arquivo content.css (ou, claro, se preferir usar o layout.css... Mas outra pergunta aqui: por que ter 2 arquivos CSS? Eles não possuem muito conteúdo, é melhor deixar tudo em um só...), crie uma id com o nome de foto (usando o nome seu exemplo), e insira os seguintes parâmetros:

#foto {	float: left;	margin-right: 10px;	border: 0;	width: 225px;	height: 338px;}

Até aqui tudo certo?

 

Segundo passo: no seu arquivo HTML, lá na linha 48 de novo, altere este trecho citado:

<img class="foto" src="images/foto7.jpg" border="0" />

... por este abaixo:

<img src="foto7.jpg" id="foto" />

Pronto! Veja o resultado... Espero que tenha ajudado... Um abraço!

não funcionou cara. testei no ie e no ff!!!

 

se quiser visualizar ta no mesmo endereço: http://www.ciadoeucalipto.com.br/empresa

 

o que será hein???

 

obrigado

[Giovani 104]

Vou tentar contribuir, espero que ajude.

Você quer que a imagem "flutue" e fique no lado do texto.

 

Uma maneira de fazer isso é assim:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif o texto e a imagem estarão dentro de uma div.

 

#suaDiv{color.....padding....margin...}#suaDiv img{float: left;margin: 5px;}

A imagem que for colocada dentro dessa div irá flutuar a esquerda e o texto vai ficar do lado direito dela.

 

Espero ter ajudado.... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

[Paulo de Tarso F. M. 24]

Você esqueceu de adicionar este bloco no seu arquivo CSS:

#foto {	float: left;	margin-right: 10px;	border: 0;	width: 225px;	height: 338px;}

Quanto ao uso do float, observe que ele está ali no código que te passei, mas você acabou esquecendo de incluir no seu CSS... Tente lá mano...

 

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

[diegoholiveira 3]

Galera, muito obrigado!Agora funcionou!!!