Inserir legenda da foto no editor do joomla JCE Editor

[criacaoi7 0]

Oi pessoal, preciso da ajuda dos mais experientes.

 

uso o Joomla com o JCE Editor e na inserçãop de imagens na página não consegui incluir uma legenda bem embaixo da foto, sendo assim, gostaria de inserir a legenda embaixo da foto via código. Como eu faço isso?

 

Peguei no HMTL do editor o código em que ele insere a imagem na página, veja:

 

 

<img longdesc="Teste" width="595" src="images/stories/Cinema/animacao/wall.e1.jpg" alt="wall.e1.jpg" height="298" style="float: left; margin: 5px;" title="wall.e1.jpg" />

 

 

Como eu coloco no código cima por exemplo, a legenda bem abaixo da foto?

 

Alguém pode me ajudar?

 

Grato.

 

Jr.

[Alaerte Gabriel 662]

Movido: PHP http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Webstandards: CSS / XML / XHTML / HTML

[William Bruno 1501]

<div>
<img longdesc="Teste" width="595" src="images/stories/Cinema/animacao/wall.e1.jpg" alt="wall.e1.jpg" height="298" style="margin: 5px;" title="wall.e1.jpg"  style="display:block;" />
<span style="display:block;">legenda</span>
</div>

Acho que isso resolve...a DIV é só para ter um container para posicionar a foto depois..

tem outras formas... talvez depois alguem aparece com uma melhor =P

[criacaoi7 0]

Tio usei o seu código como você postou, mas a legenda não está ficando embaixo da foto e sim do lado... o que pode estar fazendo isso...

 

Vou postar o começo do código em que exibe a foto:

 

<p><img longdesc="Teste" width="595" src="images/stories/Cinema/animacao/wall.e1.jpg" alt="wall.e1.jpg" height="298" style="float: left; margin: 5px;" title="wall.e1.jpg" /><span style="display:block;">legenda</span>Logo no início da animação “Wall.E”, que estréia nesta sexta-feira (27), vemos de longe os contornos de uma

[William Bruno 1501]

^^ é esse float left, que tem na tua imagem...

como você quer que fique o resultado final? tira ele por enqnto... não tinha visto..

 

faz um esboço no paint pra eu ver como é o posicionamento final...

[polloooo 0]

Eu axei uma soluçao em cima do codigo q o Tiu deu....

É so definir o width da div,igual ao width da sua imagem,q forçadamente,o texto vai pra baixo da imagem:

 

 

veja:

 

<div>

<img longdesc="Teste" width="595" src="images/stories/Cinema/animacao/wall.e1.jpg" alt="wall.e1.jpg" height="298" style="teste" title="wall.e1.jpg" style="display:block;" />

<span style="display:block;">legenda</span>

</div>

No CSS

#teste {

width: 595px;

margin: 5px;

}

espero ter ajudado,

responde ai oq deu!

[criacaoi7 0]

polloooo e tiu uill abaixo estou inserindo o link de como eu quero que fique a minha página:

 

 

Essa imagem acima é do meu gerenciador de conteúdo JCE editor no Joomla.

 

Vejam que o texto começa do lado da foto e vai depois para baixo da foto se adaptando automaticamente.

 

Eu usei a sugestão do polloooo mas aconteceu que o texto, até este que está pro lado da foto ficou abaixo também da foto e eu gostaria que ele ficasse como está na imagem em anexo, mas com uma legenda abaixo da foto.

 

Eu preciso inserir uma legendinha bem embaixo da foto, mas preciso fazer isso sem mexer na atual estrutura, sem bagunçar este layout...

 

Testei as opções que vocês me passaram mas ambas deixam o texto apenas abaixo da foto.

 

Como posso resolver isso?

 

Desde já muito obrigado por todos os posts.

[criacaoi7 0]

Pessoal o código da página que está na foto acima é este:

 

<p><img longdesc="Teste" width="595" src="images/stories/Cinema/animacao/wall.e1.jpg" alt="wall.e1.jpg" height="298" style="float: left; margin: 5px;" title="wall.e1.jpg" />Logo no início da animação “Wall.E”, que estréia nesta sexta-feira (27), vemos de longe os contornos de uma grande cidade. Mas ao aproximar a visão, percebemos que o que pareciam altos e modernos prédios, na verdade, são gigantescas pilhas de lixo.<br /><br />No novo longa-metragem da Pixar, produtora que revolucionou a animação com “Toy Story” e foi comprada pela Disney, a Terra foi tomada por montanhas de lixo, a ponto de se tornar inabitável. E é nessa paisagem pessimista e abandonada que vive o protagonista Wall.e, um robô faxineiro mais humano que muita gente por aí. <br /><br />Como de costume, a produtora deita e rola nas referências pop. As citações a “2001: Uma odisséia no espaço” são muitas: desde a trilha sonora até o computador HAL 9000, vilão do clássico de Stanley Kubrick. Também há referências a “E.T.”, de quem Wall.e parece ser uma reencarnação robotizada.<br /><br /><span><strong>Trama<br /></strong></span>Na história, escrita e dirigida por Andrew Stanton, criador de “Procurando Nemo”, Wall.E é um dos muitos robôs deixados na Terra para limpar a poluição deixada pela humanidade, enquanto a mesma é embarcada numa meganave espacial até que o planeta volte a ser um local habitável. Só que o projeto, que deveria ser realizado em cinco anos, já dura sete séculos, e agoraWall.e é o único robô que ainda funciona.<br /><br />Para sobreviver à solidão, Wall.E (cujo nome é uma abreviação de Waste Allocation Load Lifter Earth-Class, algo como Localizador e Coletor de Lixo Classe Terrestre) conta com a amizade de uma baratinha simpática e se entrega a sonhos românticos. Ele assiste repetidas vezes ao musical “Hello, Dolly!” e coleciona objetos interessantes que encontra por aí, manias de um robô cheio de sentimentos.<br /><br /><img width="270" src="images/stories/Cinema/animacao/wall.e2.jpg" alt="wall.e2.jpg" height="169" style="float: left; margin: 5px;" title="wall.e2.jpg" />Em certo momento, Wall.E ganha uma nova companheira a robô Eva, por quem se apaixona. Com um visual avançado, inspirado no iPod, Eva esbanja uma tecnologia arrojada e destoa do protagonista, que tem rodas enferrujadas e peças de metalremendadas.<br /><br /><span><strong>Sem diálogo</strong><br /></span>Toda a trama é explicada por meio de imagens, sem diálogos. Mesmo com o uso econômico das palavras, que só aparecem quando Eva entra na história, “Wall.E” é a animação da Pixar que traz uma mensagem educativa de forma mais explícita.<br /><br />O filme mostra o que pode acontecer se a humanidade continuar a produzir tanto lixo: o que vemos é um futuro pessimista, em que todas as pessoas são obesas, vivem restritas a uma nave espacial e são controladas por grandes corporações. Mas também há espaço para os temas preferidos da produtora: o amor, a amizade e a lealdade.</p><p><br /><br /><br /><a href="http://g1.globo.com/">Fonte: G1</a></p>

[polloooo 0]

entendi oq você ker....

 

Bem simples,olha só:

Em vez de você colocar o float:left apesar para a imagem,você vai criar uma div e colocar a imagem dentro dela e na ID da div coloca float:left. E,embaixo da imagem,você coloca um span.

 

Aki vai um codigo de exemplo q fiz pra você:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

<!--

#teste{

float:left; /*Faz com q a div se alinhe a esquerda*/

width:100px; /*Coloquei 100px de exemplo,aki você colocar o valor da largura da sua imagem*/

 

}

-->

</style>

</head>

<body>

<div id="teste">

<img src="hover.jpg" alt=imagem>

<center><span>legenda</span></center>

</div>

oiiiiiiiiiiii eu sou um texto exemplo

</body>

</html>

tenta ai amigo!

abc

[criacaoi7 0]

polloooo, segui a sua sugestão, mas tb não resolveu... a legenda aparece do lado direito bem em ciam do texto e não abaixo da foto... mesmo usando as div...

 

Seria o editor o responsável por isso???

 

Fica aqui o registro... se alguém usar o JCE Editor no Joomla e souber responder isso agradeço...

[polloooo 0]

Opa....confere ai se você fez direitinho!!!

pq aki deu certo,olha so!!!

 

[brcontainer 16]

<center><span>legenda</span></center>

center não é correto, use CSS.

 

a legenda fica do lado por que foi aplicado float:; em img.

 

faça assim:

<style>
div#minhadiv{
width:800px;
background:#f0f0f0;
}
div#minhadiv p span.legendado{
width:595px;/*A LAGURA DO SPAN DEE SER IGUAL A DA IMAGEM*/
float:left;/*FLUTUAR PARA ESQUERDA*/
}
div#minhadiv p span.legendado span{
display:block;
font-weight:bold;/*COLOQUEI O BOLD PARA DESTACAR*/
}
</style>

<div id="minhadiv">
<p>
<span class="legendado">
<img src="images/stories/Cinema/animacao/wall.e1.jpg" alt="wall.e1.jpg" />
<span>legenda</span>
</span>
Logo no início da animação "Wall.E",que estréia nesta sexta-feira (27), vemos de longe os contornos de uma
Logo no início da animação "Wall.E",que estréia nesta sexta-feira (27), vemos de longe os contornos de uma
Logo no início da animação "Wall.E",que estréia nesta sexta-feira (27), vemos de longe os contornos de uma
Logo no início da animação "Wall.E",que estréia nesta sexta-feira (27), vemos de longe os contornos de uma
</p>
</div>