How do I make a text that recently adds to the code stand at the top of the page?

Question

How do I make a text that recently adds to the code stand at the top of the page?

Asked 6 years, 3 months ago

Viewed 63 times

1

Look at this example code:

<article>

 <div>
  <ul>

    <li>

    </li>

    <li>

    </li>

    <li>

    </li>

    <li>

    </li>

</ul>

In my code inside each li there are some to H4 and img, as you can see there are 4 li inside ul, those 4 li is the row of image with horizontal text. For each row are 4 images with text within 4 li which and within 1 ul, ie for each row is a ul with 4 li inside. My website, is a news site.

I have a piece on the website called "Latest News". Every time I add a new news I have to copy and paste the text from the top that is inside the li, at the bottom, so that the new news that add is on top, Understand?

So I wanted to know how I do so that whenever I add the "new news", it stays at the top of the page, being the first news of the row.

If I haven’t explained my problem properly, just tell me.

Note: If possible I would like to know how to solve this in HTML or CSS, which at the moment are the only language I know. If it is not possible to do this with HTML or CSS, then I would like you to tell me in which programming language this would be possible.

1

Good Diogenes your site it is static, IE, everything on it you have to open his Html and insert manually, then the answer is NAY, there is no way to do this only with Html and Css, you will need a programming language back-end(Java, Php, C#, etc...) to be able to 'search' the news in a database and a language front-end (Javascript and/or frameworks) to display this data.

– LeAndrade

2018/08/21 at 21:38
What I would "advise" you is: as your site is news, it would be interesting you learn about wordpress, has enough material available on the Internet on it. Basically it already comes however ready, then would just insert the news by it.

– LeAndrade

2018/08/21 at 21:40

2 answers

1

The correct way to do this is currently with display:flex and flex-direction: column-reverse;

See the code below, note that the property flex-direction: column-reverse causes the order of divs in HTML start backwards, ie the last div HTML that would be your latest news will always come before the others, because these divs are reversed, the latter comes first than the previous.

Notice the order that the NEW is in HTML and then Execute the code to see the order it appears when the page is rendered by the 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>

Thank you very much colleague! You have no idea how much you have helped me now.

– jim

2018/08/25 at 19:54
Quiet @Diogenessilva good that helped! If you have a little time to study about Flexbox, you can help a lot with this kind of thing!

– hugocsl

2018/08/25 at 21:12

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Tec.Alves • **133** points · Answer 1 · 2018-08-21T21:31:12+00:00

If you’re adding this news manually, the only way I know how, is by putting the new news as one of the first Ivs. Example:

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

But if you want to add them dynamically, you need to use PHP, Javascript and mysql (for the database). So you can register new news in a database, and when the page is loaded, it pulls the new news to the screen.

Att,