Jump to content
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

Share this post


Link to post
Share on other 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;
}

 

Share this post


Link to post
Share on other 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;
}

 

Share this post


Link to post
Share on other 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;
}

 

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By ricardonews
      Olá pessoal eu tenho essa imagem de um login  que vou mostrar aqui, consegui  o css dela , porem não consegui colocar no meu login,  eu vou deixar o login em html,  em css eu estou  dificuldade. Desde já agradeço a todos
       

       então eu o css dela é esse aqui
      *{margin:0; padding:0;} html{ height:100%; background: linear-gradient(rgba(38, 128, 101, 0.9), rgba(52, 177, 140, 0.9)); } .erros, .ok { width:390px; padding:5px; background:rgba(238, 249, 113, 0.9); margin: 20px auto 0 auto; border: 1px solid rgba(222,239,10,0.9); border-radius: 4px; color: #333; } .ok{background: rgba(155,222,143,0.9);border-color: rgba(68, 171, 50, 0.9);color:white;} body{ font-family: "Trebuchet MS", tahoma, arial; } #formulario{ width:500px; margin:40px auto; text-align:center; position:relative; } #formulario fieldset{ background:white; border:0 none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:0 0 15px 1px rgba(0,0,0, 0.4); padding:20px 30px; box-sizing: border-box; width:80%; margin:0 10%; position:absolute; } #formulario input, #formulario textarea{ padding:10px; border:1px solid rgba(38, 128, 101, 0.9); border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; outline:none; box-sizing: border-box; width:100%; font:14px "Trebuchet MS", tahoma, arial; color:#090; margin-bottom:10px; } #formulario .acao{ width:100px; background:rgba(38, 128, 101, 0.9); color:white; text-transform:uppercase; font-weight:bold; padding:12px 0; float:left; margin-right:5%; } #formulario .acao:hover{background:rgba(52, 177, 140, 0.9); cursor:pointer;} Aqui abaixo é o html que eu não consegui deixar no css do jeito que está na imagem.
      <!doctype html> <html> <?php require_once"config.php"; ?> <head> <title>APRENDIZ DE JS</title> <link href="style.css" rel="stylesheet" type="text/css"> <script src="jquery-3.2.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#but_submit").click(function(){ var username = $("#meu_nome").val().trim(); var password = $("#minha_senha").val().trim(); if( username != "" && password != "" ){ $.ajax({ url:'pesquisar.php', type:'post', data:{username:username,password:password}, success:function(response){ var msg = ""; if(response == 1){ window.location = "home.php"; }else{ msg = "Invalid username and password!"; } $("#message").html(msg); } }); } }); }); </script> </head> <body> <div class="container"> <div id="div_login"> <h1>Login</h1> <div id="message"></div> <div> <input type="text" class="textbox" id="meu_nome" name="meu_nome" placeholder="Username" /> </div> <div> <input type="password" class="textbox" id="minha_senha" name="minha_senha" placeholder="Password"/> </div> <div> <input type="button" value="logar" name="but_submit" id="but_submit" /> </div> </div> </div> </body> </html>  
       
    • By egalauber
      Quero que meus links tenham marcadores e que os marcadores fiquem selecionados juntos com o link. Pra isso, coloquei o LI dentro do A. <a><li>meu link</li></a>
      Só que o link ficou muito grande. Mesmo com o mouse longe do texto, ele já ativa o link. Vejam na imagem.
       

       
      Vejam o código:
       
      CSS
      #links_uteis {
              width:482px;
              height:230px;
              float:right;
              margin-top:20px;
              margin-right:20px;
              font-size:20px;
              list-style-type:disc;
              list-style-position:inside;
          }
      #links_uteis table {
              width:420px;
              margin-left:10px;
          }
      #links_uteis td {
              width:210px;
              padding:5px 10px 5px 10px;
          }
      #links_uteis a:hover {
              text-decoration:underline;
              color:#D90000;
          }
       
       
      HTML
      <div id="links_uteis">
      Links úteis
      <div class="barra_titulo"></div>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>
          <a href="#" target="_blank"><li>Inmetro</li></a>
          </td>
          <td>
          <a href="#" target="_blank"><li>Seplag</li></a>
          </td>
        </tr>
        <tr>
          <td>
          <a href="#" target="_blank"><li>Ipsemg</li></a>
          </td>
          <td>
          <a href="#" target="_blank"><li>IOF-MG</li></a>
          </td>
        </tr>
        <tr>
          <td>
          <a href="#" target="_blank"><li>ALMG</li></a>
          </td>
          <td>
          <a href="#" target="_blank"><li>MGS</li></a>
          </td>
        </tr>
        <tr>
          <td>
          <a href="#" target="_blank"><li>Portal de serviços</li></a></td>
          <td>
          <a href="#" target="_blank"><li>Portal do servidor</li></a></td>
        </tr>
      </table>

      </div> <!--Fecha a div links_uteis-->
    • By guzulino
      É o seguinte no cabeçalho do meu projeto tem uma parte um link que leva a parte principal do site, nessa parte a imagem que está lá dentro redireciona o visitante pra página de destino até aí beleza, mas como eu tenho de definir um tamanho pra imagem eu faço via style na tag do link mesmo no <a style=" "></a>, mas quando tento colocar essa parte do código em uma linha dentro do arquivo CSS que contém todas as estilizações padrão, ele simplesmente não acontece. Vou postar a parte do código e como acho que deveria ser, mas pelo jeito não é essa a forma correta.
      <body> <div id="site"> <div id="cabecalho"> <div id="link_home"> <a href="index.php"> <img src="imagens/logo.png" alt="logo" style="height: 50px;"/><!--Esse style="height: 50px;" é que eu quero no CSS pra estilização padrão--> </a> </div><!--Final botão logo--> body { background-color: #131521; width: 1000px; margin: auto; font-family: Arial, Helvetica, sans-serif; } #site { background-color: #ffffff; width: 1000px; float: left; } #cabecalho{ background-color: #ffffff; float: left; width: 1000px; height: 70px; } #link_home{ float: left; height: 50px; margin-top: 5px; margin-left: 5px; } #link_home a img { height: 50px; } /* Quando eu coloco aqui no CSS e tiro do HTML ele não funciona */ A grande moral é que eu não sei como indicar pro CSS que é pra alterar somente aquela img daquele a que está dentro daquela DIV
    • By jujubeas
      Ola pessoal, alguém tem algum código javascript ou pode me dar algum link como referencia que tenha um questionario/quiz que use arrays e estruturas de repetição?
       
       
    • By MurilloCSS
      Bom dia galera venho aqui falar que to com uma duvida imensa mesmo eu criei  4 botões como na foto  e eu quero mover pro lado que ta em vermelho mas de jeito nenhun eu consigo alguem pode me ajudar?


      codigo: 
      < <div class="menubarra"> <img src="imagens/logo.png" alt="Logo" title="" width="200"> <a href="" class="btn btn-purple">Login</a> <a href="" class="btn btn-purple">Carrinnho</a> <a href="" class="btn btn-purple">Amei</a> <a href="" class="btn btn-purple">Notificacao</a> </div> > CSS: < .menubarra{ background: #1E90FF; top: 100%; margin-block-end: 0%; left: 100px; } >

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.