Last div in section different background color, Last div in section different background color |
Last div in section different background color, Last div in section different background color |
JohanS |
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: I hope you can help me! Regards, Johan |
pandy |
May 18 2020, 08:25 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 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.
|
JohanS |
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! |
pandy |
May 18 2020, 12:19 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 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 |
JohanS |
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 |
Lo-Fi Version | Time is now: 29th March 2024 - 01:22 AM |