Ir para conteúdo
beowlf

[Resolvido]Copiar um Css de um site de noticias

Recommended Posts

Boa noite! 

estou desenvolvendo esse site http://agricolaterranova.com.br/e na parte de noticias eu estou buscando de outro site.

 

a busca das noticias está ok, mas eu não consigo estilizar o meu onde estão as noticias. eu quero que fique como do site que eu estou pegando as informacoes https://www.noticiasagricolas.com.br/noticias/.

 

eu gostaria que alguém me ajudasse para que o resultado ficasse igual o arquivo em anexo

 

Desde ja agradeço pela ajuda, meu whats caso alguem queria falar diretamente (44) 99829-3326-Fabiano

Obrigado!

 

Sem título-1.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

@beowlf

2 horas atrás, beowlf disse:

....caso alguem queria falar diretamente ...

A ideia do fórum é mais ampla do que passar soluções em privado. Trata-se de criar um repositório para que todos possam consultar
problemas e soluções. A solução à sua pergunta poderá ser útil a muitos colegas no futuro.
 

Criei um Fiddle online para replicar a estilização do site conforme você pretende. Consulte https://jsfiddle.net/maujor/dv7719k8/

A seguir eis os códigos usados no Fiddle:

HTML:
 

<div class="tn-noticias"> <!-- container para as notícias -->
  <!-- Dentro do container HTML igual à do site Notícias Agricolas -->
  <h3>15/05/2018</h3>
  <ul>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">20:34</span><div><h2>BRF está proibida de exportar para a Europa a partir desta quarta (16) (por GAZETA DO POVO)</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">20:15</span><div><h2>Coreia do Norte suspende conversa com Coreia do Sul e põe em dúvida reunião de Trump e Kim Jong-Un</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:47</span><div><h2>Governo diminuirá previsão de crescimento do PIB a cerca de 2,5%, mas elevará receitas com leilões de petróleo</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:20</span><div><h2>Milho do Paraná tem pior condição que em 2015/16, quando safra quebrou, diz Deral</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:11</span><div><h2>Exportação de soja do Brasil soma 2,43 mi t na 2ª semana de maio, diz Anec</h2></div>
      </a>
    </li>
  </ul>
</div>

CSS: 

.tn-noticias {
  width: 100%;
  max-width: 522px;
  margin: 0 auto;
  font: 14px arial, sans-serif;
}

.tn-noticias h3 {
  font-size: 14px;
}

.tn-noticias ul {
  margin: 0;
  padding: 0;
}

.tn-noticias li {
  position: relative;
  overflow: hidden;
  clear: both;
  border-bottom: 1px dotted #CCC;
}

.tn-noticias li h2 {
  font-size: 14px;
  font-weight: normal;
}

.tn-noticias li a {
  color: #444;
  text-decoration: none;
}

.tn-noticias li a div {
  margin-left: 85px;
}

.tn-noticias span {
  position: absolute;
  width: 75px;
  text-align: center;
  top: 50%;
  margin-top: -6px;
  line-height: 12px;
  font-size: 12px;
  display: block;
  color: #006db4;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@beowlf

2 horas atrás, beowlf disse:

....caso alguem queria falar diretamente ...

A ideia do fórum é mais ampla do que passar soluções em privado. Trata-se de criar um repositório para que todos possam consultar
problemas e soluções. A solução à sua pergunta poderá ser útil a muitos colegas no futuro.
 

Criei um Fiddle online para replicar a estilização do site conforme você pretende. Consulte https://jsfiddle.net/maujor/dv7719k8/

A seguir eis os códigos usados no Fiddle:

HTML:
 

<div class="tn-noticias"> <!-- container para as notícias -->
  <!-- Dentro do container HTML igual à do site Notícias Agricolas -->
  <h3>15/05/2018</h3>
  <ul>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">20:34</span><div><h2>BRF está proibida de exportar para a Europa a partir desta quarta (16) (por GAZETA DO POVO)</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">20:15</span><div><h2>Coreia do Norte suspende conversa com Coreia do Sul e põe em dúvida reunião de Trump e Kim Jong-Un</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:47</span><div><h2>Governo diminuirá previsão de crescimento do PIB a cerca de 2,5%, mas elevará receitas com leilões de petróleo</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:20</span><div><h2>Milho do Paraná tem pior condição que em 2015/16, quando safra quebrou, diz Deral</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:11</span><div><h2>Exportação de soja do Brasil soma 2,43 mi t na 2ª semana de maio, diz Anec</h2></div>
      </a>
    </li>
  </ul>
</div>

CSS: 

.tn-noticias {
  width: 100%;
  max-width: 522px;
  margin: 0 auto;
  font: 14px arial, sans-serif;
}

.tn-noticias h3 {
  font-size: 14px;
}

.tn-noticias ul {
  margin: 0;
  padding: 0;
}

.tn-noticias li {
  position: relative;
  overflow: hidden;
  clear: both;
  border-bottom: 1px dotted #CCC;
}

.tn-noticias li h2 {
  font-size: 14px;
  font-weight: normal;
}

.tn-noticias li a {
  color: #444;
  text-decoration: none;
}

.tn-noticias li a div {
  margin-left: 85px;
}

.tn-noticias span {
  position: absolute;
  width: 75px;
  text-align: center;
  top: 50%;
  margin-top: -6px;
  line-height: 12px;
  font-size: 12px;
  display: block;
  color: #006db4;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@beowlf

2 horas atrás, beowlf disse:

....caso alguem queria falar diretamente ...

A ideia do fórum é mais ampla do que passar soluções em privado. Trata-se de criar um repositório para que todos possam consultar
problemas e soluções. A solução à sua pergunta poderá ser útil a muitos colegas no futuro.
 

Criei um Fiddle online para replicar a estilização do site conforme você pretende. Consulte https://jsfiddle.net/maujor/dv7719k8/

A seguir eis os códigos usados no Fiddle:

HTML:
 

<div class="tn-noticias"> <!-- container para as notícias -->
  <!-- Dentro do container HTML igual à do site Notícias Agricolas -->
  <h3>15/05/2018</h3>
  <ul>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">20:34</span><div><h2>BRF está proibida de exportar para a Europa a partir desta quarta (16) (por GAZETA DO POVO)</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">20:15</span><div><h2>Coreia do Norte suspende conversa com Coreia do Sul e põe em dúvida reunião de Trump e Kim Jong-Un</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:47</span><div><h2>Governo diminuirá previsão de crescimento do PIB a cerca de 2,5%, mas elevará receitas com leilões de petróleo</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:20</span><div><h2>Milho do Paraná tem pior condição que em 2015/16, quando safra quebrou, diz Deral</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:11</span><div><h2>Exportação de soja do Brasil soma 2,43 mi t na 2ª semana de maio, diz Anec</h2></div>
      </a>
    </li>
  </ul>
</div>

CSS: 

.tn-noticias {
  width: 100%;
  max-width: 522px;
  margin: 0 auto;
  font: 14px arial, sans-serif;
}

.tn-noticias h3 {
  font-size: 14px;
}

.tn-noticias ul {
  margin: 0;
  padding: 0;
}

.tn-noticias li {
  position: relative;
  overflow: hidden;
  clear: both;
  border-bottom: 1px dotted #CCC;
}

.tn-noticias li h2 {
  font-size: 14px;
  font-weight: normal;
}

.tn-noticias li a {
  color: #444;
  text-decoration: none;
}

.tn-noticias li a div {
  margin-left: 85px;
}

.tn-noticias span {
  position: absolute;
  width: 75px;
  text-align: center;
  top: 50%;
  margin-top: -6px;
  line-height: 12px;
  font-size: 12px;
  display: block;
  color: #006db4;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia! Maujor

desculpa pelo comentário 

Citar

....caso alguem queria falar diretamente ...

vou retirar

 

em relação ao código que você passou ficou perfeito, porem o site em que eu pego as informações não é estático, estou usando um código php para pegar essas noticias de outro site.

 

A minha duvida é acerca do código que se mantem aparamente estático e não estiliza junto com as atualizações das noticias. na imagem abaixo é o exemplo como fica na minha pagina.

 

vou colocar o link do meu site http://agricolaterranova.com.br/

vou colocar o link de onde eu pego essas informações https://www.noticiasagricolas.com.br/noticias/

 

Obrigado por seu tempo...

Atenciosamente,

Fabiano

Sem título-2.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Boa tarde!  Maujor

 

vou anexar aqui com eu insiro a noticia no site, esse é o código em php que pega as informações que eu preciso.

<?php

//url do site
$url = 'https://www.noticiasagricolas.com.br/noticias/';

//pegando todo o conteudo 
$dadosSite = file_get_contents($url);

$var1 = explode('<h3>',$dadosSite);
$var2 = explode("</ul>",$var1[1]);

print $var2[0];

?>

e esse é o frame que eu coloco no site

<iframe src="http://www.herbiterra.com.br/noticias.php" name="cotacao" width="200" height="327" frameborder="0" scrolling="yes"></iframe>

Agradeço desde ja 

 

Atenciosamente.

 

Fabiano

Compartilhar este post


Link para o post
Compartilhar em outros sites

@beowlf

Retire o iframe e no local da inserção das notícias insira o seguinte código:

<?php
//url do site
$url = 'https://www.noticiasagricolas.com.br/noticias/';
//pegando todo o conteudo 
$dadosSite = file_get_contents($url);
$var1 = explode('<h3>',$dadosSite);
$var2 = explode("</ul>",$var1[1]);
$var2 = str_replace("<a href=\"/noticias","<a target=\"_blank\" href=\"https://www.noticiasagricolas.com.br/noticias",$var2);
?>
<style rel="stylesheet">
.tn-noticias {
  width: 100%;
  max-width: 522px;
  font: 14px arial, sans-serif;
}
.tn-noticias h3 {
  font-size: 14px;
}
.tn-noticias ul {
  margin: 0;
  padding: 0;
}
.tn-noticias li {
  position: relative;
  overflow: hidden;
  clear: both;
  border-bottom: 1px dotted #CCC;
}
.tn-noticias li h2 {
  font-size: 14px;
  font-weight: normal;
}
.tn-noticias li a {
  color: #444;
  text-decoration: none;
}
.tn-noticias li a div {
  margin-left: 85px;
}
.tn-noticias span {
  position: absolute;
  width: 75px;
  text-align: center;
  top: 50%;
  margin-top: -6px;
  line-height: 12px;
  font-size: 12px;
  display: block;
  color: #006db4;
}
</style>
<div class="tn-noticias">
<h3>
<?php
  print utf8_encode($var2[0]);
?>
</div>

 

  • Obrigado! 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por alecram28
      Preciso criar um album de fotos que ao clicar na imagem apareça uma descrição, e ao clicar novamente na imagem a descrição desapareça. 
      Consigo fazer aparecer o texto mas não consigo oculta-lo depois de clicar novamente.
      Outra duvida, coloquei a div texto mas a formatação css que coloco nao aparece.
       
      HTML:
        <body> <h1>ÁLBUM DE FOTOS</h1>   <div class="album"> <img src="foto1.jpg" onclick="mostrarTexto('Descriçao1!')" max width="300" max height="300"> </div> <div class="album"> <img src="foto2.jpg" onclick="mostrarTexto('terbrbrb!')" max width="300" max height="300"> </div> <div class="album"> <img src="foto3.jpg" onclick="mostrarTexto('aaaaaaa!')" max width="300" max height="300"> </div> <div class="album"> <img src="foto4.jpg"onclick="mostrarTexto('bbbbbbbb')" max width="300" max height="300"> </div> <div class="album"> <img src="foto5.jpg" onclick="mostrarTexto('cccccccc')" max width="300" max height="300"> </div>   <div class="album"> <img src="foto6.jpg" onclick="mostrarTexto('dddddddd')" max width="300" max height="300"> </div> <div id= "texto"></div> <div class="album"> <img src="foto7.jpg" onclick="mostrarTexto('eeeeeee')" max width="300" max height="300"> </div> <div class="album"> <img src="foto8.jpg" onclick="mostrarTexto('fffffff')" max width="300" max height="300"> </div> <div class="album"> <img src="foto9.jpg" onclick="mostrarTexto('ggggggg')" max width="300" max height="300"> </div>     </body>  
      CSS:
      html { font-family: Arial, Helvetica, sans-serif   }   h1{ font-family: Arial, Helvetica, sans-serif; color: rgb(117, 170, 231); font-size:2rem; text-align: left; }   .album{ float: left; width: 500px; }   .texto{ font-family: Arial, Helvetica, sans-serif; font-size:2rem; color: rgb(92, 192, 92);   }  
      JS:
      function mostrarTexto(msg) { texto.innerHTML= msg;   }
    • Por MeninaMouse
      Alguém pode me ajudar na elaboração de tabela de status no asp.net e mantendo os dados atualizados em tempo real? 
    • Por raphaelgs
      Preciso de um sistema que o usuário do site, faça o upload das fotos dentro de uma moldura com três imagens, e que ele veja a Previa de como vai ficar depois disso conclua a comprar.
      Alguém faça este sistema.
      mande orçamento para raphael@comunicandoideias.com.br 

    • Por Felipe Medeiross
      Eu quero criar uma pagina simples com um formulário com os campos nome e telefone e os dados serem gravados em um arquivo. Pensei em usar json ou xml mas nao sei exatamente se essas linguagens são destinadas a isso. 
       
      A minha intensão é criar uma lista telefônica e que o usuário possa criar, alterar e excluir os dados caso necessite. Pra mim seria facil usar php e mysql, mas no meu caso não posso usar um servidor.
       
      Fico grato a quem puder me dar uma sugestão.
    • Por Anderson.dsm
      Olá, estou criando um sistema de postagens, ao fazer a postagem eu tenho os seguintes conteudos...
       
      Título
      Descrição
      Imagem
      Publicado em: Dia/mês/ano - hora
      Publicado por: Nome
       
      Mas eu gostaria que quando eu fisse a postagem fosse assim: Dia/mês/ano há 1 minuto, e assim por diante até chegar 24:00 horas, depois disso só mostra-se isso  ->
       
      Publicado em: Dia/mês/ano há 1 dia, 2 dias, 3 dias e por diante até chegar o ano. 1 ano, 2 anos. Etc, alguém pode me explicar como fazer isso. 
       
      Sei apenas publicar para que mostre a hora e data, mas não a contagem como expliquei. Agradeço quem ajudar.
       
      Um exemplo disso que expliquei está no anexo (print) que mandei..

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.