function filterImages() {
let input = document.getElementById('searchbar').value;
input = input.toLowerCase();
let images = document.getElementsByClassName('gallery');
for (let i = 0; i < images.length; i++) {
if (!images[i].innerHTML.toLowerCase().includes(input)) {
images[i].style.display = "none";
} else {
images[i].style.display = "block";
}
}
}body {margin: 0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: rgb(255, 255, 255);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
ul.topnav li a:hover:not(.active) {background-color: #111;}
ul.topnav li a.active {background-color: #ffffff;}
ul.topnav li.right {float: left;}
@media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {float: none;}
}
#MENSIS {
background-image: url("Images/lady-maria-bloodborne-4k.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.h1brain {
border: 2px solid rgb(255, 255, 255);
margin-top: 270px;
margin-bottom: 100px;
margin-right: 80px;
margin-left: 80px;
color: white;
}
#searchbar {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 16px;
border: none;
font-size: 17px;
}
input[type=text] {
width: 30%;
-webkit-transition: width 0.15s ease-in-out;
transition: width 0.15s ease-in-out;
}
#list{
font-size: 1.5em;
margin-left: 90px;
margin-right: 90px;
}
.games{
display: block;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
background-color: rgb(255, 255, 255);
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
#nostyle {
list-style-type: none;
}
.pyrus {
background-color: light-grey;
width: 90%;
border: 1px solid black;
padding: 50px;
position: static;
}<!DOCTYPE html>
<html id="bakugan">
<head>
<title>
Creating Search Bar using HTML
CSS and Javascript
</title>
<!-- linking the stylesheet -->
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<ul class="topnav">
<li><a href="./index.html">Home</a></li>
<li><a href="./games.html">Images</a></li>
<li><a href="#contact">Contact</a></li>
<li class="right"><a href="#about">About</a></li>
<input id="searchbar" onkeyup="filterImages()" type="text"
name="search" placeholder="Search images..">
</ul>
<!-- link javascript -->
<script src="./style.js"></script>
<!-- ordered list -->
<h1 class="pyrus">Sample Text Below Images:</h1>
<ol id='list'>
<li class="games" id="nostyle"><a target="_blank" href="img_5terre.jpg"><div class="gallery">
<img src="https://static.wikia.nocookie.net/megaman/images/d/d0/MM2AirMan.jpg/revision/latest/scale-to-width-down/250?cb=20110314220902" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">airman4</div>
</div>
</li>
<li class="games" id="nostyle"><a target="_blank" href="img_forest.jpg"><div class="gallery">
<img src="https://static.wikia.nocookie.net/megaman/images/d/d0/MM2AirMan.jpg/revision/latest/scale-to-width-down/250?cb=20110314220902" alt="Forest" width="600" height="400">
</a>
<div class="desc">airman3</div>
</div>
</li>
<li class="games" id="nostyle"><div class="gallery">
<img src="https://static.wikia.nocookie.net/megaman/images/d/d0/MM2AirMan.jpg/revision/latest/scale-to-width-down/250?cb=20110314220902" alt="Northern" width="600" height="400">
<div class="desc">airman2</div>
</div>
</li>
<li class="games" id="nostyle"><a target="_blank" href="img_mountains.jpg"><div class="gallery">
<img src="https://static.wikia.nocookie.net/megaman/images/d/d0/MM2AirMan.jpg/revision/latest/scale-to-width-down/250?cb=20110314220902" alt="Mountains" width="600" height="400">
</a>
<div class="desc">airman1</div>
</div></li>
</ol>
<h1 class="pyrus">End of Sample Text Section</h1>
</body>
</html>I'm attempting to ensure that the sample text appears neatly below the list of images without overlapping with other elements. I've tried various techniques such as positioning and margins but have not achieved the desired result. I want the <h1> elements to be positioned relative to the images on the page.