Encostar linha com imagem e título da notícia.

[Guto1]

Boa noite, gostaria de saber se existe algum modo de eu encostar a linha que as setas apontam na imagem acima com a imagem da notícia que eu postar. Neste site eles conseguirem, alguém poderia me encinar?

Editado Janeiro 4, 2009 por Guto1

[Jonathan Queiroz]

Pra fazer isso você teria que criar um div e colocar a position como absolute.

Depois, é só mudar os atributos left e top para que o texto fique no lugar correto !

[Guto1]

ficaria mais ou menos assim?:

#linha{

padding: 0px;

border-top: 1px solid #d5d5d5;

width: 650px;

height: 2px;

float: right;

position: absolute;

}

?

edit: eu uso o fusion news, que é um sistema de notícia....

o código do template da notícia é esse:

<div style="width: 650px; margin-left: 1px; margin-right: 1px;">

{cat_icon} {subject}<center></center><small><small>{date}</small></small>

<div style="float:left; padding-bottom:3px; padding-right:3px">{icon}</div>

<p><small>{news}</small></p>

</div>

como ficaria?

EDIT:

eu coloquei assim:

<div style="width: 650px; margin-left: 1px; margin-right: 1px;">

{cat_icon} {subject}<center><div id="linha"></div></center><small><small>{date}</small></small>

<div style="float:left; padding-bottom:3px; padding-right:3px">{icon}</div>

<p><small>{news}</small></p>

</div>

só a data, que fica em baixo da linha ficou grudada, o título e a imagem não...

Editado Janeiro 4, 2009 por Guto1

[Jonathan Queiroz]

O position absolute está certo !

Mas falta adcionar os atributos left e top na sua imagem !

Eles servem que você possa colocar um objeto exatamente no local que quiser !

Obs.:

Poste seus códigos dentro da tag code (ou html, se for o caso)

[Guto1]

eu ainda não sei muito de css, poderia me explicar melhor ou dar um exemplo?

[Guto1]

up?

[Thelon]

Não sou muito familiarizado com o CSS mas sei fazer algumas coisas então vou tentar ajudar

O que o Jonathan Queiroz tentou dizer é que para fazer isso você precisa trabalhar com o posicionamento das divs

De uma olhada nesses link:

http://aprendacss.wordpress.com/2008/07/08...ition-absolute/

http://www.maujor.com/tutorial/absrel.php

Obs: Por favor não post nada apenas para fazer seu tópico na lista é contra as regras do fórum

Editado Janeiro 6, 2009 por Thelon

[flavio]

Se você quiser aprender CSS e fazer um trabalho "organizado", siga os conselhos do Thelon.

Mas se você é mais dos "desesperados" que querem o resultado pra ontem, você pode simplemente olhar o código fonte deles... (espero, mesmo, q você tenha pensado nisso!!)

Resumão do que eles fizeram:

<table width="682" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="682" cellpadding="0" cellspacing="0"><tr>
<td align="right" valign="bottom"> <img alt="The Sims 3 icon" style="border: none;" src="http://www.sims3maniacos.net/pt/layout/categorias/thesims3.gif" />
</td>
<td width="100%" align="left" valign="bottom" class="titulo18">Nova música no The Sims 3! Agora da banda Dexter Freebish
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="2" background="http://www.sims3maniacos.net/pt/layout/paginas_separador2.gif"></td>
</tr>
</table>

Eles não usaram CSS pra criar esse efeito, mas o seu uso tornaria tudo mais elegante e fácil de realizar manutenção. (Com todo o respeito, o código daquele site tá muito sujo.)

Editado Janeiro 6, 2009 por flavio