Situation/ Issue The picture slide animation box on my website is positioned just below the fixed header. The problem arises when I try to change the image using the left and right arrows. During the transition, a part of the hidden image becomes visible and overlaps with the fixed header temporarily before going behind it again.
How can I prevent this overlapping behavior and ensure that the picture box always stays behind the header?
The picture slide animation feature on the site is adapted from the following source:
The structure of my header.php file is as follows:
<header>
<img src="img/logo.png" width="400" height="120" alt="site logo"/>
<ol >
<li class="menu"> <a href="index.php">Home</a> </li>
<li class="menu"> <a href='about.php'>About This site </a> </li>
<li class="menu"> <a href='learn.php'> Learn</a> </li>
<li class="menu"> <a href='sponser.php'> Sponsor Me </a></li>
</ol>
</header>
CSS for header
*{ padding:0; text-decoration: none; } header{ background-color: white; color: white; position:fixed; top:0; border-bottom:1px solid #1e204c; display: block; width:100%; } ol { display:inline-block; } a:link{ color:black; } .menu{ display:inline-block; font-size:16px; font-family: 'Roboto', sans-serif; padding:0px 40px 0px 40px; position:relative; bottom:30px; left:700px }
If you prefer not to visit the link provided, here are my customized HTML markup and script:
HTML
Enter code here
<?php include 'header.php'; ?> <!--photos--> <div class='main'>
1 / 3</div>--> caption2 / 3</div>--> caption
3 / 3</div>--> caption
❮ ❯
<div style="text-align:center"> <!-- span is an inline version of a div--> <span class="bulletIndicators" onclick="currentSlide(1)"></span> <span class="bulletIndicators" onclick="currentSlide(1)"></span> <span class="bulletIndicators" onclick="currentSlide(1)"></span>CSS for image slides
.mySlides { height:400px; width: 100%; overflow:hidden;
} /* Next & previous buttons */ .previus, .next { cursor:pointer; position: absolute; top: 300px; padding: 16px; color: white; font-weight: bold; font-size: 18px; overflow:hidden;
/* allows for a change in property within a given timescale Ease specifies a type of transition which starts and ends slow but speeds up somewhere in the middle of the timescale. */ transition: 0.6s ease; border-radius: 0 3px 3px 0; }
/* Position the "next button" to the right */ .next { right: 2px; border-radius: 3px 0 0 3px; }
.previus{ left: 2px; border-radius: 3px 0 0 3px; }
/* On hover, add a black background color with a little bit see-through */ .previus:hover, .next:hover { background-color: rgba(0,0,0,0.8); }
/* The dots/bullets/indicators */ .bulletIndicators { cursor:pointer; height: 13px; width: 13px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;
} /* :active MUST come after :hover (if present) in the CSS definition in order to be effective! */ .active, .bulletIndicators:hover { background-color: #717171; }
/* Fading animation using webkit Webkit is a block element with a set of rule sets called Keyframes which can be used to style it in a given set time */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; overflow:hidden;
}
@-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } /* fading alpha level- remember if the box display was set to none then the you should see the background colout briefly */ @keyframes fade { from {opacity: .4} to {opacity: 1} }
Java-Script
var slideIndex = 1; showSlides(slideIndex);
function plusSlides(n) { showSlides(slideIndex += n); }
function currentSlide(n) { showSlides(slideIndex = n); }
function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("bulletIndicators"); if (n > slides.length) {slideIndex = 1;} if (n < 1) {slideIndex = slides.length;} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; }