Guto1 Postado Janeiro 4, 2009 Denunciar Share Postado Janeiro 4, 2009 (editado) 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 Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Jonathan Queiroz Postado Janeiro 4, 2009 Denunciar Share Postado Janeiro 4, 2009 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 ! Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Guto1 Postado Janeiro 4, 2009 Autor Denunciar Share Postado Janeiro 4, 2009 (editado) 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 Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Jonathan Queiroz Postado Janeiro 4, 2009 Denunciar Share Postado Janeiro 4, 2009 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) Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Guto1 Postado Janeiro 4, 2009 Autor Denunciar Share Postado Janeiro 4, 2009 eu ainda não sei muito de css, poderia me explicar melhor ou dar um exemplo? Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Guto1 Postado Janeiro 5, 2009 Autor Denunciar Share Postado Janeiro 5, 2009 up? Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Thelon Postado Janeiro 6, 2009 Denunciar Share Postado Janeiro 6, 2009 (editado) Não sou muito familiarizado com o CSS mas sei fazer algumas coisas então vou tentar ajudarO que o Jonathan Queiroz tentou dizer é que para fazer isso você precisa trabalhar com o posicionamento das divsDe uma olhada nesses link:http://aprendacss.wordpress.com/2008/07/08...ition-absolute/http://www.maujor.com/tutorial/absrel.phpObs: 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 Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 flavio Postado Janeiro 6, 2009 Denunciar Share Postado Janeiro 6, 2009 (editado) 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 Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
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 por Guto1
Link para o comentário
Compartilhar em outros sites
7 respostass a esta questão
Posts Recomendados
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.