The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Last div in section different background color, Last div in section different background color
JohanS
post May 18 2020, 08:00 AM
Post #1





Group: Members
Posts: 5
Joined: 18-May 20
Member No.: 27,354



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 18 2020, 08:25 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,884
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JohanS
post May 18 2020, 09:24 AM
Post #3





Group: Members
Posts: 5
Joined: 18-May 20
Member No.: 27,354



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 18 2020, 12:19 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,884
Joined: 9-August 06
Member No.: 6



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/.../Clearing_Space


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JohanS
post May 19 2020, 02:56 PM
Post #5





Group: Members
Posts: 5
Joined: 18-May 20
Member No.: 27,354



Hi Pandy,

Thanks for the help! It solved my problem.

Reagards,

Johan
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 7th July 2020 - 06:16 PM