I am in the process of creating a website that includes a filter option. My plan is to have the filters displayed on the left side and the items on the right side.
To achieve this layout, I have implemented a scrollable div for the items. However, I noticed that the borders do not align perfectly with the images as shown in the sample image below. While I haven't written the script yet, here is the code snippet I have prepared:
https://i.stack.imgur.com/YQMqe.png
<html>
<head>
<title></title>
<style>
#vezivanje {
background-color: hotpink;
height: 80px;
display: flex;
align-items: center;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
font-size: 20px;
}
img {
height: auto;
max-width: 80%;
}
#filter {
position: fixed;
width: 300px;
height: 900px;
border-right: solid;
border-color: #9f2b68;
border-right-width: 2px;
padding-left: 15px;
padding-top: 30px;
margin: 10px;
}
#container {
position: relative;
display: grid;
float: right;
overflow: scroll;
width: 1560px;
height: 850px;
margin: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1vh;
}
.item {
border-style: solid;
border-color: #9f2b68;
margin: 10px;
border-width: 2px;
}
::-webkit-scrollbar {
display: none;
}
body {
background-color: #e2e3e3;
}
</style>
</head>
<body>
<div id="sve">
<div id="vezivanje">
<span class="upustvo">
<a style="text-decoration:none"><span style="color:white;font-weight:bold">Domaci zadatak</span></a>
</span>
</div>
<div id="filter">
<div id="uzrast">
<h2>Uzrast:</h2>
<p><input type="radio">0+</p>
<p><input type="radio">3+</p>
<p><input type="radio">6+</p>
<p><input type="radio">10+</p>
</div>
<div id="cena">
<h2>Cena:</h2>
<p>0<input type="range">10.000</p>
</div>
</div>
<div id="container"></div>
</div>
<script>
//--------------------------
let container = document.querySelector("#container");
let items = [];
function itemInfo(image, age, price) {
this.image = image;
this.age = age;
this.price = price;
};
items.push(new itemInfo("https://yekupi.blob.core.windows.net/ekupirs/1200Wx1200H/EK000359292_1.image", "0+", "2000 RSD"));
items.push(new itemInfo("https://poklonizabebu.rs/wp-content/uploads/2022/02/Muzicka-igracka-kuca-Brown-2.jpg", "0+", "1500 RSD"));
items.push(new itemInfo("https://pertinitoys.com/fajlovi/product/master-wheels-trotinet-p-0282-master-wheels-web-s_5f3fb5d70b71e.jpg", "3+", "1500 RSD"));
items.push(new itemInfo("https://www.lego.com/cdn/cs/set/assets/blt70237dec0eef084a/10696.jpg?fit=bounds&format=jpg&quality=80&width=1600&height=1600&dpr=1", "3+", "5000 RSD"));
items.push(new itemInfo("https://img.goglasi.com/img/225234594", "3+", "3000 RSD"));
items.push(new itemInfo("https://www.bcgroup-online.com/upload/m/84401-lego-duplo-10915-kamion-sa-slovima-abecede.jpg", "3+", "2000 RSD"));
items.push(new itemInfo("https://www.decjisajt.rs/files/watermark/files/thumbs/files/images/product/2018/01/29/thumbs_1200/thumbs_w/drvena-muzicka-igracka-velika-gitara-91701_1200_1200px_w.jpg", "3+", "9000 RSD"));
items.forEach(i => {
container.innerHTML += "<div class = 'item'><img src = " + i.image + ">" +
"<p>" + i.age + " " + i.price + "</p>"
"</div>"
})
</script>
</body>
</html>