Background-color and spacing between posts in posting system [duplicate]

109
March 05, 2022, at 08:40 AM
This question already has an answer here:
Issues with Posting System PHP [closed] (1 answer)
Closed 23 days ago.

Now, I have a posting system. There's an input field and a submit button. After entering something in the field and clicking the button, it gets displayed as a post.

Now, let's say you make multiple posts (two or three), all of them should be the same (except for the body of the post). However, the issue I'm encountering is that the first post has a background-color of Silver (#C0C0C0), but the second or third posts don't. However, the body, and other content in the post such as the like and comment buttons are there.

To fix this, I inspected the first post and it highlighted only the first post, not the second or third posts, when I hovered over the post div in the console. The posts should have a background color of silver, and if you have multiple posts, there should be some white space in between the posts. But if I increase the height of the background-color, it covers both the first and second post, without any white space. And when I did this (increased the height of the background-color) of the post and inspected the second post, it highlighted both the first and second post as , without any white space in between the two posts. I want there to be if, someone enters more than one post, the posts should have white space between them, and it should be like there's multiple separate posts, and all the posts have a background-color of #C0C0C0 (Silver). Also, the posts should have a border-radius of 5px. How can I accomplish this? Please help.

Code:

<div class="textPost">
  <?php
  $sql = "SELECT * FROM posts";
  $result = mysqli_query($connection, $sql);
  if (mysqli_num_rows($result) > 0) {
    while ($row = mysqli_fetch_assoc($result)) {
  ?>
  <div class="textpostFormat">
    <-- All the post content (body, like button, comment button, etc.) -->
  </div>
  <?php
  }
}
  ?>
</div>
<style media="screen">
   
.textPost {
  margin-top: 170px;
  width: 650px;
  height: 400px;
  background-color: #C0C0C0;
  position: fixed;
  margin-left: 685px;
  border-radius: 15px;
}
.textpostFormat {
  margin-left: -640px;
  position: fixed;
}

I tried this CSS code:

<style media="screen">
.textPost {
  margin-top: 170px;
  width: 650px;
  position: fixed;
  margin-left: 685px;
  border-radius: 15px;
}
.textpostFormat {
  margin-left: -640px;
  position: relative;
  background-color: #C0C0C0;
  margin-bottom: 50px;
  border-radius: 5px;
}
</style>

But, it gives neither the first or second post a background-color at all.

Rent Charter Buses Company
READ ALSO
How to change default date format in JavaScript or in HTML

How to change default date format in JavaScript or in HTML

I've a input field as type date and the of that format is dd/mm/yyyy which is not defaultIn my desktop screen it's working properly and also I've a placeholder in the same field as DD/MM/YYYY

137
How to adjust Bulma Column height when one changes?

How to adjust Bulma Column height when one changes?

is it possible to make a column adjust its height when others change? I have all columns at the same height using flex but when I change one of them dynamically, the others stay the same

117
how to override user agent stylesheet in fullscreen on mobile?

how to override user agent stylesheet in fullscreen on mobile?

I'm working on mobile version of http://library-devbdrc

170
Javascript onclick event out of phase in Angular

Javascript onclick event out of phase in Angular

Using Angular framework to build my website's front-end, I'm trying to include a button/icon capable of opening and closing this sidenav:

121