Ir para conteúdo
Fórum Script Brasil
  • 0

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


Guto1

Pergunta

7 respostass a esta questão

Posts Recomendados

  • 0

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 por Guto1
Link para o comentário
Compartilhar em outros sites

  • 0

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 por Thelon
Link para o comentário
Compartilhar em outros sites

  • 0

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 por flavio
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...