Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Last div in section different background color

Posted by: JohanS May 18 2020, 08:00 AM

Hi All!

I am creating an image gallery, and so far its going pretty good. Its a gallery where for every species two divs are created via PHP. One for the name of the species family and the second for a picture and common name (there are multiple species and thus pictures/common names).

So far so good, it all works great, untill the last specis family is shown. The background color should be white, but is grey (like the body). Since im new to HTML, i could use some help!

Here is the code:

CODE

<html>
      <head>
        <title>Species</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>

        body{
          text-align:center;
          background-color: #EEEEEE;
          font-family: font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;;
        }

        .container{
          width:1000px;
          margin: auto;
          background-color:white;
          font-family:Helvetica,arial;
          font-weight: normal;

         }

        .item1{
           width: 980px;
           margin-top: 25px;
           padding-bottom: 10px;
           border-bottom: 1.4px solid  #a9a9a9;
           display: inline-block;
           background-color: white;
           font-size: 24px;
           color: #242424;
           }

        .item2{
            padding-top: 15px;
            font-size: 13px;
            width: 300px;
            height: 180px;
            margin: 16px;
            float: left;
            }

        img{
            border-radius: 3%;
            }

          a{
            text-decoration:none;
            color: inherit;
            }

      @media only screen and (max-width: 70em) {
      .container{
        width: 98%;
      }
      div.item2{
        width: 95%;
       }
}
    </style>
  </head>
  <p style="font-size:40px">Species</p>

<?php
      echo"
      <p style='font-size:26px'> Species ($queryResult) </p>
      ";
?>
<body>
<section class='container'>
          <?php
                 while($data= mysqli_fetch_assoc($result)){
                   {
                     if($previousItem != $data['family_common_name'])
                        {
                        echo "<div class='item1'>
                             ".$data['family_common_name']."
                              </div>";

                        $previousItem = $data['family_common_name'];
                        }

                       echo "
                              <div class='item2'>
                              <a href='images_normal/".$data['photo_id'].".jpg'><img src='images/".$data['photo_id'].".jpg' ></a><br>
                              <b>".$data['common_name']."</b>
                              </div>";
                        }
          }
          ?>
</section>
</body>
</html>



Output:

IPB Image

I hope you can help me!

Regards,

Johan

Posted by: pandy May 18 2020, 08:25 AM

Could you show the output of the script rather than the script, please? Best if you can link to the page. If you can't, view source and copy.

Posted by: JohanS May 18 2020, 09:24 AM

OK! I have it local, so i cannot provide a link. Here the ouput (i deleted some species, since there are a lot):

CODE

!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>


</head>
<body>
<html>
      <head>
        <title>Species</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>

        body{
          text-align:center;
          background-color: #EEEEEE;
          font-family: font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;;
        }

        .container{
          width:1000px;
          margin: auto;
          background-color:white;
          font-family:Helvetica,arial;
          font-weight: normal;

         }

        .item1{
           width: 980px;
           margin-top: 25px;
           padding-bottom: 10px;
           border-bottom: 1.4px solid  #a9a9a9;
           display: inline-block;
           background-color: white;
           font-size: 24px;
           color: #242424;
           }

        .item2{
            padding-top: 15px;
            font-size: 13px;
            width: 300px;
            height: 180px;
            margin: 16px;
            float: left;
            }

        img{
            border-radius: 3%;
            }

          a{
            text-decoration:none;
            color: inherit;
            }

      @media only screen and (max-width: 70em) {
      .container{
        width: 98%;
      }
      div.item2{
        width: 95%;
       }
}
    </style>
  </head>
  <p style="font-size:40px">Species</p>


      <p style='font-size:26px'> Species (596) </p>
      <body>
<section class='container'>
          <div class='item1'>
                              Wolf herring
                              </div>
                              <div class='item2'>
                              <a href='images_normal/119.jpg'><img src='images/119.jpg' ></a><br>
                              <b>Dorab wolf-herring</b>
                              </div><div class='item1'>
                             Wrasses
                              </div>
                              <div class='item2'>
                              <a href='images_normal/6.jpg'><img src='images/6.jpg' ></a><br>
                              <b>Scale-rayed wrasse</b>
                              </div>
                              <div class='item2'>
                              <a href='images_normal/64.jpg'><img src='images/64.jpg' ></a><br>
                              <b>Spanish hogfish</b>
                              </div>
                    
                              <div class='item2'>
                              <a href='images_normal/590.jpg'><img src='images/590.jpg' ></a><br>
                              <b>Pearly razorfish</b>
                              </div></section>
</body>
</html>


I hope this helps!

Posted by: pandy May 18 2020, 12:19 PM

Ah, it's just the floats sticking out of the box. You need to clear the floats. See the below page.

https://web.archive.org/web/20160524140725/http://css-discuss.incutio.com/wiki/Clearing_Space



Posted by: JohanS May 19 2020, 02:56 PM

Hi Pandy,

Thanks for the help! It solved my problem.

Reagards,

Johan

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)