Imagem com Link Paralelo

[FabianeDaz]

Olá.. Eu preciso de uma mega ajuda de quem entende de HTML (Eu acho que é isso mesmo..rs)

Depois de fazer o tutorial aqui, para aprender algumas coisas que eu queria, tentei fazer um código que me permitisse adicionar na lateral do meu blog uma imagem com link e ao lado um texto com link ambas da mesma "notícia".. o código que eu cheguei foi esse :

<center>

<a href="Link da Notícia" title="Título" style= "float:left;" ><img border="0" src="Imagem" /></a>

<a href="Link da Notícia" title="Título"> <font face="Hobo Std" size="2"> A Notícia </font> </a>

</center>

Eu imagino que para quem entende do assunto, deve ter como simplificar e conseguir o mesmo objetivo...

Mas a questão é que esse código cumpre muito bem o que preciso, mas apenas quando uso só para uma notícia... Assim :

mas quando eu quero colocar várias (que é meu obejetivo), uma interfere na outra e não fica legal, não fica centralizado, resumindo fica feio demais.. Assim :

Se alguém puder me dar uma luz, eu ficaria imensamente grata..

Eu também tentei usar esse código :

<center><a href="Link da Notícia" target="_blank" title="Título" style= "float:left;" > A Notícia<img border="0" src="Link da Imagem" /></a></center>

Mas ai, centralizado fica apenas a primeira frase da notícia..

Fica assim :

Resumindo : Eu queria poder fazer algo pareciso com isso :

Se alguém quiser dá uma olhada no blog para ver o que eu quero :

http://filmeclubes.blogspot.com/

(Lá está mais ou menos o que eu preciso, em "Mais Notícias", so que para conseguir eu precisei separar os códigos e ficou um espaço muito grande entre eles -feio )

Desde já.. Muito obrigada para quem ao menos teve a coragem de ler esse pedido de socorro..rsrs

[DiF]

Olá, tente fazer com listas nao ordenadas.

exemplo:

<div id="noticias">
<ul >
    <li> 
         <a href="#"><img src="img/superman.jpg" alt="foto"/></a>
         <a href="#"><span>Imagens Revelam Detalhes da Rouba do Superman</span></a> 
    </li>
    <li> 
         <a href="#"><img src="img/anneehugh.jpg" alt="foto"/></a>
         <a href="#"><span>Anne Hathaway e Hugh Jackman Podem Atuar Juntos em Musical </span></a> 
    </li>
    <li> 
         <a href="#"><img src="img/mulher.jpg" alt="foto"/></a>
         <a href="#"><span>"Contágio" Ganha Pôster em Português</span></a> 
    </li>
    <li> 
         <a href="#"><img src="img/monstro.jpg" alt="foto"/></a>
         <a href="#"><span>"Os Vingadores" Ganha Imagens Promocionais</span></a> 
    </li>
    <li> 
         <a href="#"><img src="img/mulher2.jpg" alt="foto"/></a>
         <a href="#"><span>Novas Imgens de "Cada Um Tem a Gêmea que Merece</span></a> 
    </li>
</ul>
</div>

e no css você estiliza sua lista:

<style type="text/css">
*{ margin: 0; padding: 0;} 
#noticias{width: 250px;}
#noticias ul{ list-style: none;}
#noticias li {margin-bottom: 0.5em; }
#noticias li span{position: absolute; width: 10em; margin-left: 10px; text-align: justify;}

</style>

detalhes: onde tem " #" você substitui pelo link. e substita as fotos também..

para posicionara div noticias ali onde você quer, use o atributo:

position: absolute; left: numero de px; top: numero de px;

veja exemplo aqui. acho q era isso que você queria.

abraço

[FabianeDaz]

Opa.. Obrigada por ter respondido..

Então.. ficou bem parecido com o que eu quero.. So não entendi duas coisas..

Primeiro é como eu faço para ela não ultrapassar minha coluna (que é de 170)

Porque ela tá assim :

Segundo : Você sabe se tem como tirar as espaços entre as palavras ?

(Mas acho que uma coisa está ligada a outra )

Obrigada mesmo.. Abraço

[DiF]

desculpe, que você nao tinha especificado o tamanho de sua coluna.

então ela tem largura de 170px certo?

basta você ajustar no css de #noticias: width: 170px;

e no #noticias li span: ajustar o width para 170px e text-align: center;

os espaços no texto era porque eu tinha deixado em justificado, troque para center que ficara como você quer.