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