Я надеюсь, что кто-то может помочь.
Я играю на благотворительном сайте, который меня попросили сделать, но изображение продолжает прыгать, когда я прокручиваю страницу.
Как вы можете видеть здесь
Кто-нибудь знает, почему это происходит?
Игнорировать остальную часть сайта, так как я все еще работаю над решением других проблем.
Я очень новичок в кодировании
HTML (я только добавил несколько фотографий, их так много):
<!-- NAVIGATION -->
<table class="topnav" id="navigation" cellspacing="2">
<tr>
<td><a href="news.html"> Newsletters </a></td>
<td><a href="events.html"> Fundraisers </a></td>
<td><a href="index.html"> About us </a></td>
<td><a href="widows.html"> The widows </a></td>
<td><a href="helping.html"> What we do </a></td>
<td><a href="donate.html"> Donate </a></td>
<td><a href="contact.html"> Contact us </a></td>
<td><a href="gallery.html"> Gallery </a></td>
</tr>
</table>
<!-- GALLERY -->
<div id="myBtnContainer" class="btndiv">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('widows')"> Photos of Widows</button>
<button class="btn" onclick="filterSelection('videos')"> Videos of Widows </button>
<button class="btn" onclick="filterSelection('events')"> Charity events</button>
</div>
<!-- Portfolio Gallery Grid -->
<div class="row">
<div class="column widows" class="onecol">
<div class="content">
<img src="gallery/images/widows/16.png" alt="widows">
</div>
</div>
</div>
<div class="row">
<div class="column widows">
<div class="content">
<img src="gallery/images/widows/20.png" alt="widows" style="width:100%">
</div>
</div>
<div class="column widows">
<div class="content">
<img src="gallery/images/widows/3.png" alt="widows" style="width:100%">
</div>
</div>
<div class="column widows">
<div class="content">
<img src="gallery/images/widows/4.png" alt="widows" style="width: 100%;">
</div>
</div>
</div>
CSS:
/* NAVIGATION BAR */
.topnav {
background-color: #ff9f80;
overflow: auto;
width: 100%;
font-family: Perpetua, sans-serif;
font-size: 120%;
padding-left: 10%;
padding-right: 10%;
}
/* NAVIGATION LINKS */
.topnav a {
color: #8b0000;
display: block;
float: left;
padding: 5% 4%;
text-align: center;
text-decoration: none;
}
/* STICKY NAVIGATION BAR */
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
/* CHANGE COLOR WHEN HOVERING OVER NAVIGATION BAR */
.topnav a:hover {
background-color: #ffc6b3;
color: #8b0000;
}
/* FONT FOR NAVIGATION LINKS */
nav {
font-family: Perpetua, sans-serif;
}
/* GALLERY */
.btndiv {
text-align: center;
}
* {
box-sizing: border-box;
}
/* CENTER WEBSITE */
.main {
max-width: 1000px;
margin: auto;
}
.row {
margin: 8px -16px;
}
/* PADDING BETWEEN COLUMNS */
.row,
.row > .column {
padding: 8px;
}
/* THREE EQUAL COLUMS NEXT TO EACH OTHER */
.column {
float: left;
width: 33.33%;
display: none; /* Hide columns by default */
}
/* CLEAR FLOATS AFTER ROWS */
.row:after {
content: "";
display: table;
clear: both;
}
/* CONTENT */
.content {
background-color: white;
padding: 10px;
}
/* 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: #ff9f80;
cursor: pointer;
border-radius: 15px 50px;
font-size: 100%;
color: #8b0000;
}
/* Add a grey background color on mouse-over */
.btn:hover {
background-color: #ffc6b3;
}
/* Add a dark background color to the active button */
.btn.active {
background-color: #b32d00;
color: white;
}
/* IMAGE RESIZING */
.onecol {
position: fixed;
width: 150%;
margin-left: auto;
margin-right: auto;
display: block;
column-span: all;
}
JavaScript:
filterSelection("all") // Execute the function and show all columns
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
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 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";
});
}