Introduction
I am learning a bit of HTML + CSS as part of my course. I was assigned to do a website with free choice of content. My choice was to do a weapons shop (i am not a dealer!).
Problem
I made a lot of progress lately learning the basics and doing tests(be gentle, it is my first website) but I came across this issue here.
In this first picture I have managed to align, at least, the first row of containers when I show them all. But as more were added...
This happens when I try to show them all. There is this "ghost space" (I named it myself, sure there is another way)
But behold! There is more. If I sort them, this "ghost space" is gone... why?
Above you will see the result from sorting only for rifles, also the simple menu I made (work in progress)
Notes
- I am not russian.
- This is part of learning/homework
- I want to improve
- I accept solutions and ideas to add to my website from which I can learn and add it easily.
Code
Below I posted the code. There is the main html file and the .css are separated files so I do not get confused when this gets bigger and I know what do they alter.
main.html
<!DOCTYPE html>
<html>
<head>
<title>Mi pagina web</title>
<link href="css/rush_b_style.css" rel="stylesheet" type="text/css">
<link href="css/item_show_text.css" rel="stylesheet" type="text/css">
<link href="css/filter.css" rel="stylesheet" type="text/css">
<script type = "text/javascript" src = "Scripts/filterJS.js" ></script>
</head>
<body>
<div>
<div class="main_title_container">
<div class="title">
<h1 style="color:yellow">Сука Блять</h1>
</div>
</div>
</div>
<div class="left_menu">
</br>
</br>
</br>
</br>
</br>
<div class="web_icon"></div>
</br>
</br>
</br>
<h2 id="menu_title" style="color:white" align="center">меню</h2>
</br>
<ul class="vertical_menu">
<li><a href="">инициирование</a></li>
<li><a href="">новости</a></li>
<li><a href="">контакт</a></li>
<li><a href="">Около</a></li>
</ul>
</div>
<div class="main_text">
<h2 align="center">Welcome to the Soviet Weapons Market</h2>
</br>
<p class="intro-text">Weapons from all around the Soviet Block end up in our warehouses. From the notorious ak-47,
some WW2 relics such as the PSSH-41 and TT-30, to something even heavier. Everything clean and loaded,
ready to use at any moment. It should not be thought that Soviet equipment suffers any harmful effects because of its simplicity of design. Quite the reverse.
In its time, the T-34 was not only the simplest but also the most powerful tank in the world. The Soviet forces during World War II had some of the most reliable, robust, and in some cases revolutionary military hardware available. Here is every weapon deployed by the Red Army in that conflict, divided by type:
tanks and armored fighting vehicles, artillery, small arms, aircraft, and naval weapons.</p>
<div class="options">
<div id="btnContainer" class="btnOpts">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('rifles')">Rifles</button>
<button class="btn" onclick="filterSelection('pistols')">Pistols</button>
<button class="btn" onclick="filterSelection('submp')">Submachineguns</button>
</div>
<div class="product-container filterDiv rifles">
<div class="item-title">AK-47</div>
<div>
<img class="item-image" src="imagenes/ak-47.jpg">
</div>
<div class="prod-desc">
<p>7,62-мм автомат Калашникова (АК)
1951 — 1974 год (СССР)
цена: $350</p>
</div>
</div>
<div class="product-container filterDiv pistols">
<div class="item-title" >TT30</div>
<div>
<img class="item-image" src="imagenes/TT30.jpg">
</div>
<div class="prod-desc">
<p>7,62-мм самозарядный пистолет Токарева образца 1930 года
СССР с 1930 по 1952 год
цена: $500</p>
</div>
</div>
<div class="product-container filterDiv submp">
<div class="item-title">PPSH-41</div>
<div>
<img class="item-image" src="imagenes/PSSH-41.jpg">
</div>
<div class="prod-desc">
<p>7,62-мм пистолет-пулемёт образца 1941 года системы Шпагина (ППШ)
1941—1947 (СССР)
цена: $1,100</p>
</div>
</div>
<div class="product-container filterDiv rifles">
<div class="item-title">Mosin-Nagant</div>
<div>
<img class="item-image" src="imagenes/nagant.jpg">
</div>
<div class="prod-desc">
<p> 7,62-мм винтовка системы Мосина обр. 1891 г. (1891/30 гг.)
1891–1965 (СССР)
цена: $400</p>
</div>
</div>
<div class="product-container filterDiv rifles">
<div class="item-title">SKS</div>
<div>
<img class="item-image" src="imagenes/SKS.jpg">
</div>
<div class="prod-desc">
<p>7,62-мм самозарядный карабин Симонова
1949 — 1958 год (СССР)
цена: $300</p>
</div>
</div>
<div class="product-container filterDiv rifles">
<div class="item-title">SVD-Dragunov</div>
<div>
<img class="item-image" src="imagenes/Dragunov.jpg">
</div>
<div class="prod-desc">
<p>7,62-мм снайперская винтовка Драгунова
1963 год — настоящее время
цена: $1700</p>
</div>
</div>
<div class="product-container filterDiv rifles">
<div class="item-title">AK-74</div>
<div>
<img class="item-image" src="imagenes/ak-74.jpg">
</div>
<div class="prod-desc">
<p>5,45-мм автомат Калашникова образца 1974 года
1974 — 1991
цена: $500</p>
</div>
</div>
<div class="product-container filterDiv pistols">
<div class="item-title">MP-443 "Грач"</div>
<div>
<img class="item-image" src="imagenes/grach.jpg">
</div>
<div class="prod-desc">
<p>9×19 мм Парабеллум Пистолет Ярыгина
2003 — настоящее время
цена: $120</p>
</div>
</div>
<div class="product-container filterDiv rifles">
<div class="item-title">AK-74</div>
<div>
<img class="item-image" src="imagenes/ak-74.jpg">
</div>
<div class="prod-desc">
<p>5,45-мм автомат Калашникова образца 1974 года
1974 — 1991
цена: $500</p>
</div>
</div>
<div class="product-container filterDiv rifles">
<div class="item-title">AK-74</div>
<div>
<img class="item-image" src="imagenes/ak-74.jpg">
</div>
<div class="prod-desc">
<p>5,45-мм автомат Калашникова образца 1974 года
1974 — 1991
цена: $500</p>
</div>
</div>
<div class="product-container filterDiv rifles">
<div class="item-title">AK-74</div>
<div>
<img class="item-image" src="imagenes/ak-74.jpg">
</div>
<div class="prod-desc">
<p>5,45-мм автомат Калашникова образца 1974 года
1974 — 1991
цена: $500</p>
</div>
</div>
</div>
</body>
</html>
main_css.css
* {
margin: 0;
padding: 0;
}
body {
background-color: green !important;
}
.main_title_container {
position:absolute;
background-color: Tomato;
width:100%;
height: 15%;
top:0;
bottom:0;
right:0;
left:0;
}
.title {
position: relative;
width: 45%;
height: 60%;
top: 1%;
left:49%;
font-size: 35px;
}
.web_icon {
position: relative;
background-color: black;
background-image: url(https://i.postimg.cc/3x2ghrWh/soviet-flag.png);
width: 127px;
height: 75px;
transform: scale(2.5);
top: 0;
bottom: 0;
right: 0;
left: 125px;
}
.left_menu {
position: absolute;
background-color: black;
margin-top: 0;
width: 380px;
height: 100%;
position: fixed;
overflow: auto;
}
.vertical_menu {
list-style-type: none;
margin: 0;
padding: 0;
background-color: white;
}
.main_text {
position:relative;
top: 150px;
margin-left:20%;
padding:1px 16px;
height:100%;
background-color: white;
}
.intro-text {
text-align: justify;
text-indent: 50px;
font-family: Arial, Helvetica, sans-serif;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background: #555;
color: red;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.btn {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
width: 250px;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 1px;
padding-right: 1px;
}
item_show.css
* {
margin: 0;
padding: 0;
}
.product-container {
position:relative;
/*background-color: red;*/
float:left;
width:250px;
height:100px;
margin-bottom: 50px;
margin-right: 1px;
margin: 5px;
padding: 5px;
}
.item-title {
text-align: center;
border: 2px solid black;
border-radius: 5px;
width:100%;
background-color: red;
}
.item-image {
transform:scale(1);
width:250px;
height:100px;
border: 2px solid black;
border-radius: 5px;
margin: 1px;
padding: 1px;
}
.prod-desc {
border: 2px solid black;
border-radius: 5px;
height: auto;
background-color: orange;
font-family: Arial;
line-height: 30px;
margin-bottom: 20px;
}
filter.css
* {
margin: 0;
padding: 0;
}
.container {
overflow: hidden;
}
.filterDiv {
float: left;
color: #ffffff;
width: 250px;
height: auto;
line-height: 100px;
text-align: center;
margin: 2px;
display: none; /* Hidden by default */
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: #f1f1f1;
cursor: pointer;
}
/* Add a light grey background on mouse-over */
.btn:hover {
background-color: #ddd;
}
/* Add a dark background to the active button */
.btn.active {
background-color: #666;
color: white;
}
.item-image {
transform:scale(1);
width:250px;
height:100px;
border: 2px solid black;
border-radius: 5px;
margin: 1px;
padding: 1px;
}
Not sure if the JavaScript has something to do with it. But I will post it just to be sure.
.js
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
// Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
// Show filtered elements
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// Hide elements that are not selected
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
Thanks for the interest in this question.
EDIT:
Implementing some of the commentaries ideas I got this (from now on I will post on Fiddle, I do not want to bombard my question with any more lines of code)
