Position div (menu and header/button) above slideshow - html

Question

I am making a website, where I want a slideshow on one on the pages. However, since the slideshow takes up the whole page, my header and menu places itself underneath it. I tried making a div with a link where you can press "go back", to return to the index page, but it is not possible to click the link, and it is only visible when the slideshow changes from one image to another. The z-index on the slideshow is 1, and I tried making it 2, and the "button" 1, and vice versa. Still, I cannot come up with a solution. I really hope someone will be able to help with this. Thanks in advance.
I'm not posting any code, but if that is preferred, just ask!
CSS
.h1 { font-family:GeosansLight, Verdana, sans-serif; color: #fff; font-size: 40pt; }
.m1 { font-family:GeosansLight, Verdana, sans-serif; color: #fff; font-size: 18pt; }
.m2 { font-family:GeosansLight, Verdana, sans-serif; color: #fff; font-size: 15pt; }
.m3 { font-family:GeosansLight, Verdana, sans-serif; color: #fff; font-size: 30pt; }
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.index-bg {
background-image: url(bild/1.png);
}
.kontakt-bg {
background-image: url(bild/2.png);
}
.porto-bg {
background-color: none;
}
#header {
height: 40px;
width: 100%;
text-align: center;
position: center;
}
#menu {
height: 20px;
width: 100%;
text-align: center;
}
ul.menli {
list-style-type: none;
}
ul.menli li {
display: inline-block;
margin: 0px 50px;
}
ul.menli li a {
text-decoration: none;
color: #fff;
}
ul.menli li a:hover {
text-decoration: underline;
}
#main-left {
height: 500px;
width: 50%;
float: left;
margin-top: 100px;
margin-left: 395px;
background-color: none;
}
ul.mainli {
list-style-type: none;
}
ul.mainli li{
margin-top: 10px;
}
ul.mainli li a {
color: #fff;
}
#main-right {
height: 500px;
width: 50%;
float: right;
margin-top: 10px;
background-color: none;
margin-top: 10px;
}
The button I added
#button {
float: right;
padding-right: 60px;
z-index: 2;
}
a {
color: pink;
}
Slideshow:
.slideshow {
list-style: none;
z-index: 1;
}
.slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation: imageAnimation 24s linear infinite 0s;
-moz-animation: imageAnimation 24s linear infinite 0s;
animation: imageAnimation 24s linear infinite 0s;
}
.no-cssanimations .slideshow li span {
opacity: 1;
}
#-webkit-keyframes
imageAnimation {
0%
{
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
12.5% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes
imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
12.5% {
opacity: 1;
-moz-animation-timing-function: ease-out;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes
imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
12.5% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes
titleAnimation {
0% {
opacity: 0;
}
12.5% {
opacity: 1;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes
titleAnimation {
0% {
opacity: 0;
}
12.5% {
opacity: 1;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes
titleAnimation {
0% {
opacity: 0;
}
12.5% {
opacity: 1;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.slideshow li:nth-child(1) span { background-image: url(bild/1.png); }
.slideshow li:nth-child(2) span {
background-image: url(bild/2.png);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
animation-delay: 6s;
}
.slideshow li:nth-child(3) span {
background-image: url(bild/3.png);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
animation-delay: 12s;
}
.slideshow li:nth-child(4) span {
background-image: url(bild/1.png);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
animation-delay: 18s;
}
HTML on the page in question
<!DOCTYPE html>
<html class="porto-bg">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
</script>
</head>
<body>
<div id="header" class="h1">
MUA: CAROLINE MIKKELSEN</div>
<div id="menu" class="m1">
<ul class="menli">
<li> forside </li>
<li> portofølje </li>
<li> samarbeidspartnere </li>
<li> kontakt </li>
</ul>
</div>
<ul class="slideshow">
<li> <span>Slide one</span> </li>
<li> <span>Slide two</span> </li>
<li> <span>Slide three</span> </li>
<li> <span>Slide four</span> </li>
</ul>
<div id="button" class="m3">
GO BACK
</div>
</body>
</html>

Answer 1

The carousel images might also been given z-index individually.
Please make your z-index = number of slides + 2 (container and one extra) and try

Answer 2

I think a correct use of positioning would solve your problem ...
whenever I have a problem of this sort I always refer to W3Schools website
as they have a very diverse set of info on everything ...
W3Schools - CSS position Property
furthermore I find it easier to wrap elements like lists in a container div
<div class="container">
<ul class="slideshow">
<li> <span>Slide one</span> </li>
<li> <span>Slide two</span> </li>
<li> <span>Slide three</span> </li>
<li> <span>Slide four</span> </li>
</ul>
</div>
just so they will be easier to manipulate on the larger scheme of things ....
I also noticed that you repeat some code that you can group to save a few lines like so :
.m1 .m2 .m3{
font-family: GeosansLight, Verdana, sans-serif;
color: #fff;
}