How do I make my picture slideshow stay behind my header


Tags: javascript,html,css,slideshow

Problem :

I want to do an automatic picture slideshow with the dots underneath for each picture. I don't know how to use javascript at all, just html/css, so I found this code snippet online but I can't make the slideshow scroll behind my fixed header. any suggestions? also if anybody knew how to make the dots clickable to automatically change the picture that would be great too! Basically, I want my slideshow to be like the one on http://www.eatchronictacos.com, minus the image preview when hovering over a dot. Thanks guys

Here is a codepen: http://codepen.io/nrojina0/pen/jAZVJE

Here is my html (with the entirety of the slideshow code snippet):

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="CSS/style4.css">
    <title>
        Bonlee Grown Farm
    </title>

</head>

<body>

<div id="header">

    <div id="logo"> Bonlee Grown Farm </div> <div id="address"> 650 Al Davis Road <br> <p style="font-size: 0.1em"> <br> </p> Bear Creek, NC 27207 <p style="font-size: 0.1em"> <br> </p> Home: (919)837-2937 | Cell: (012)345-6789 <p style="font-size: 0.1em"> <br> </p> amyraysugg@embarqmail.com </div>

    <nav>
        <ul>
            <li> <a href="BonleeGrownFarm2.html"> Home </a> </li>
            <li> <a href="OurStory.html"> Our Story </a> </li>
            <li>
                <a href="WheretoFindUs.html"> Where to Find Us </a>
                    <ul>
                        <li> <a href="Market1.html"> Market1 </a> </li>
                        <li> <a href="Market2.html"> Market2 </a> </li>
                        <li> <a href="Market3.html"> Market3 </a> </li>
                        <li> <a href="Market4.html"> Market4 </a> </li>
                    </ul>
            </li>
            <li> <a href="FromOurFarm.html"> From Our Farm </a> </li>
            <li>
                <a href="FromOurKitchen.html"> From Our Kitchen </a>
                    <ul>
                        <li> <a href="Jams.html"> Jams </a> </li>
                        <li> <a href="Jellies.html"> Jellies </a> </li>
                        <li> <a href="Pickled.html"> All Things Pickled </a> </li>
                        <li> <a href="Relishes.html"> Relishes </a> </li>
                        <li> <a href="Mustards.html"> Mustards </a> </li>
                        <li> <a href="Miscellaneous.html"> Miscellaneous </a> </li>
                    </ul>
            </li>
            <li> <a href="CarolinaBabe.html"> Carolina Babe </a> </li>
        </ul>
    </nav>
</div>   

<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin-left: 1%;
  z-index: 2;
/*  max-height: 500px;
*/}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  margin-bottom: 3%;
  font-family: Verdana,sans-serif;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  margin-top: 3%;
  margin-left: 2.5%;
  font-family: Verdana,sans-serif;s
}

/* The dots/bullets/indicators */
.dot {
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>
<body>
<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 4</div>
  <img src="https://www.kowalskis.com/sites/kowalskis.com/files/images/signature-products/signature-jams.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 4</div>
  <img src="http://i.parkseed.com/images/xxl/51659-pk-p1.jpg" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 4</div>
  <img src="https://spoonuniversity.com/wp-content/uploads/sites/100/2016/06/produce.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">4 / 4</div>
  <img src="http://static.wixstatic.com/media/a63fc0_89452cdd3605426791e345d6b3679883.jpg_srz_126_148_85_22_0.50_1.20_0.00_jpg_srz" style="width:100%">
  <div class="text">Caption Three</div>
</div>

</div>

<div style="text-align:left; margin-top: -1%; margin-left: 32.8%">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1}
    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";
    setTimeout(showSlides, 4000); // Change image every 4 seconds
}
</script>

</body>
</html>

Here is my CSS:

   /* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
    */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,
var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,
hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* ^Reset style. DO NOT DELETE! */

/*-------------------------------------------------------------------------*/

body {
  background-color: #254117;
  color: white;
  width: 100%;
  /*max-width: 960px;*/
  margin: 0 auto;
  margin-top: 12em;
  /* ADDED TO MAKE HEADER FIXED*/
  font-family: Garamond, Times;
}
#header {
  /* ADDED TO MAKE HEADER FIXED*/
  position: fixed;
  /* ADDED TO MAKE HEADER FIXED*/
  width: 100%;
  /* ADDED TO MAKE HEADER FIXED*/
  top: 0;
  /* ADDED TO MAKE HEADER FIXED*/
  height: 15em;
  /* ADDED TO MAKE HEADER FIXED*/
  background-color: #254117;
  /* ADDED TO MAKE HEADER FIXED*/
}
/* ADDED TO MAKE HEADER FIXED*/

#logo {
  font-size: 2em;
  width: 60%;
  display: inline;
  float: left;
  text-align: center;
  font-family: cursive;
  margin-top: 0.5em;
  /*position: fixed;*/
  /*top: 0;*/
}
#address {
  width: 31%;
  display: inline;
  font-family: cursive;
  font-size: 1.5em;
  float: right;
  /*text-align: right;*/
  margin-bottom: 0.75em;
  margin-right: 1em;
  margin-top: 0.5em;
  /*position: fixed;*/
  /*top: 0;*/
}
/* ^LOGO AND ADDRESS STUFF */

/*-------------------------------------------------------------------------*/

nav {
  width: 99%;
  margin: 20px 0.5%;
  clear: both;
  /*position: fixed;*/
}
nav > ul {
  list-style: none;
  /*overflow: hidden;*/
  overflow: auto;
}
nav > ul li {
  float: left;
  width: 16.6666%;
}
/*FFEE2E*/

nav > ul li > a {
  text-align: center;
  /*text-shadow: 2px 1px 2px ;  include text shadow or no? */
  font-family: Garamond, Times;
  padding: 8px 0;
  display: block;
  /*width: 97.5%;*/
  border-top: 4px solid #FFEE2E;
  border-right: 4px solid #E5C000;
  border-bottom: 4px solid #E5C000;
  border-left: 4px solid #FFEE2E;
  background-color: #FCD717;
  font-size: 1.5em;
}
nav > ul li > a,
nav > ul li:focus > a,
nav > ul li:visited > a,
nav > ul li:hover > a,
nav > ul li:active > a {
  text-decoration: none;
  color: #0000EE;
}
nav > ul li:hover > a,
nav > ul li:active > a {
  background-color: #FFE424;
  border-top: 4px solid #E5C000;
  border-right: 4px solid #FFE424;
  border-bottom: 4px solid #FFE424;
  border-left: 4px solid #E5C000;
  border-radius: 0;
}
nav > ul li:first-child a {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
nav > ul li:last-child a {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
/* ^NAVIGATION BAR - LEVEL 1 */

/*-------------------------------------------------------------------------*/

nav li > ul li {
  display: block;
  width: 99%;
}
nav li > ul {
  display: none;
  width: inherit;
}
nav li > ul li:first-child a {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
nav li > ul li:last-child a {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
nav li > ul:last-child a {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
nav li:hover > ul {
  display: block;
}
nav li:hover > ul {
  position: absolute;
  display: block;
}

/* ^NAVIGATION BAR - LEVEL 2 */
/*-------------------------------------------------------------------------*/

table tr#firstrow td{
    background-color: #eee;
    color: #8B4513;
    font-weight: bold;
}

table{
  width: 80%;
  margin: 20px 0.5%;
  font-family: Arial;
  font-size: 1.12em;
  margin: auto;
  clear: both;
  table-layout: fixed;
}

table tr td{
  text-decoration: none;
  color: white;
}

table tbody tr:nth-child(2n) td {
  background: #CA240C;
}
table tbody tr:nth-child(2n+1) td {
  background: #FF7159;
}

table tr td{
  padding: 0.75%;
  margin: 0 auto;
}

table tr td#kitchenfirstcolumn{
  width: 30%;
}

table tr td#kitchenothercolumns{
  width: 70%;
}

table tr td#farmfirstcolumn{
  width: 18%;
}

table tr td#farmsecondcolumn{
  width: 20%;
}

table tr td#farmothercolumns{
  width: 62%;
}

/* ^SORTABLE TABLE - FROM OUR FARM AND FROM OUR KITCHEN */
/*-------------------------------------------------------------------------*/

img{
  max-width:100%;
  max-height: 100%;
  padding: 3%;
}


/* ^SORTABLE TABLE - FROM OUR FARM AND FROM OUR KITCHEN */
/*-------------------------------------------------------------------------*/

h1{
  font-size: 1.5em;
  font-family: Palatinos, cursive;
}

h2{
  font-size: 3em;
  font-family: Palatinos, cursive;
  text-align: center;
}

/*-------------------------------------------------------------------------*/


Solution :

Add z-index: 3 to #header in css and it works as expected I guess:

#header {
    position: fixed;
    width: 100%;
    top: 0;
    height: 15em;
    background-color: #254117;
    z-index: 3;
}

    CSS Howto..

    show a website loading image using only CSS (not Javascript or jQuery)

    CSS how to target 2 attributes?

    layout - show the latter coded div at top without absolute positioning

    how change css href to all .html documents with button click?

    html/css - using sprite with tag - how to remove the outline in Chrome?

    How to add text to a CSS Sprite

    How to convert simple navigation to include drop down menus? (Specific situation - have tried conversion)

    How to force an empty page in a paged HTML document?

    How to enlarge an image horizontally in css?

    How to hide specific text from content wihtout calling any CSS?

    How are the page-break properties in CSS supposed to work?

    How to fix width of column in two-column CSS lay out?

    How do I add the date a blog post was created in place of a bullet point under list-style-type?

    how to use CSS opacity to let background bleed through in IE8?

    How to disable temporary cursor with javascript?

    How to set css properties to dynamically created table?

    Using jQuery toggle to show content, but prevent closing when the user clicks on an input element

    how to make a left aligned navigation with dropdown elements

    How does one style element within a label say?

    How to fix css and jQuery slide show? [closed]

    How to display inline input in li?

    How to get position of div inside td

    How do I trigger an onclick CSS on a particular ID

    How to make circles repeat in the background of an element in full CSS?

    How to set same height each list items?

    How to hide a part of a CSS borderline nicely

    How to stop a CSS rule from applying to a specific element [duplicate]

    How to get href Text using CSS selectors

    How to place div in top right hand corner of page

    how to center a form using css?