[Resolvido]Copiar um Css de um site de noticias

@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;
}

@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;
}

@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;
}

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

Informe como é feita a inserção das notícias no seu site.

Você coloca o endereço das notícias em um iFrame?

Tem uma API?

No site das notícias tem as instruções de inserção?

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

@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>

Boa noite!

quero agradecer Maujor por ter me ajudado nesse problema

vou deixar o link aqui para quem quiser ver como ficou http://agricolaterranova.com.br/

ficou perfeito exatamente como eu queria

Atenciosamente

Fabiano