1

Olha esse código de exemplo:

<article>

 <div>
  <ul>

    <li>

    </li>

    <li>

    </li>

    <li>

    </li>

    <li>

    </li>

</ul>

No meu código dentro de cada li tem alguns a h4 e img, como podem ver existe 4 li dentro da ul, esses 4 li é a fileira de imagem com texto na horizontal. Para cada fileira são 4 imagens com texto dentro de 4 li que e dentro de 1 ul, ou seja para cada fileira é uma ul com 4 li dentro. Meu site, é um site de notícias.

Eu tenho uma parte no site que se chama "Ultimas noticias". Toda vez que eu add uma nova noticia eu tenho que copiar e colar o texto de cima que esta dentro do li, em baixo, para que a nova noticia que add fique em cima, Entende?

Então eu queria saber como eu faço para que sempre que eu add a "nova notica", ela fique no topo da página, sendo a primeiro notícia da fileira.

Se eu não expliquei direito meu problema, é só me dizer.

Obs: Se possivel eu gostaria de saber como resolver isso em HTML ou CSS, sendo que no momento são as unicas linguagem que sei. Se for o caso de não for possivel fazer isso com HTML ou CSS, então eu gostaria que me diga em qual linguagem de progamaçao isso seria possivel.

2
  • 1
    Bom Diogenes o seu site ele é estático, ou seja, tudo nele você tem que abrir o Html dele e inserir manualmente, então a resposta é NÃO, não tem como fazer isto apenas com Html e Css, vc precisará de uma linguagem de programação back-end(Java, Php, C#, etc...) para poder 'buscar' as notícias em um banco de dados e uma linguagem front-end(Javascript e/ou frameworks) para exibir esses dados.
    – LeAndrade
    Commented 21/08/2018 às 21:38
  • O que eu te "aconselharia" é: como o seu site é de notícias, seria interessante vc aprender sobre wordpress, tem bastante material disponível na Internet sobre ele. Basicamente ele já vem contudo pronto, aí seria só inserir as notícias por ele.
    – LeAndrade
    Commented 21/08/2018 às 21:40

2 Respostas 2

1

A forma correta de fazer isso atualmente é com display:flex e flex-direction: column-reverse;

Veja o código abaixo, repare que a propriedade flex-direction: column-reverse faz com que a ordem das divs no HTML comece de forma reversa, ou seja, a última div do HTML que seria a sua notícia mais recente sempre virá primeiro que as outras, pois essas divs são ordenadas de forma reversa, a última vem primeira que as anteriores.

Repare na ordem que a NOVA está no HTML e depois Execute o código para ver a ordem que ela aparece quando a página é renderizada pelo browser.

article	{
  display: flex;
  flex-direction: column-reverse;
}
div{
  padding: 10px;
  border: 1px solid;
}
<article>
  <div>
    Mais ANTIGA
  </div>
  <div>
    ANTIGA 
  </div>
  <div>
    NOVA
  </div>
</article>

2
  • Muito obrigado colega! Você n tem ideia do quanto me ajudou agora.
    – jim
    Commented 25/08/2018 às 19:54
  • Tranquilo @DiogenesSilva que bom que ajudou! Se tiver um tempo para um pouco para estudar sobre FlexBox, pode de ajudar muito com esse tipo de coisa!
    – hugocsl
    Commented 25/08/2018 às 21:12
0

Se você está adicionando essas noticias de forma manual, a única forma que conheço, é você colocando a noticia nova como uma das primeiras divs. Exemplo:

<article>

 <div id="NOTICIA Nova">
  <ul>
   <li></li>
   <li></li>
   <li></li>
  </ul>
 </div>

 <div id="NOTICIA ANTIGA">
  <ul>
   <li></li>
   <li></li>
   <li></li>
  </ul>
 </div>

 <div id="NOTICIA ANTIGA">
  <ul>
   <li></li>
   <li></li>
   <li></li>
  </ul>
 </div>

Mas caso, você queira adicionar elas de forma dinâmica, você precisa utilizar PHP, Javascript e mysql (para o banco de dados). Assim você poderá cadastrar novas noticia em uma base de dados, e quando a pagina for carregada, ela puxa as novas noticia para a tela.

Att,

1
  • 2
    o elemento ID não deve conter espaço e não deve ser repetido. Commented 22/08/2018 às 4:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .