Help - Search - Members - Calendar
Full Version: PROBLEM WITH DROPDOWN AND SLIDESHOW
HTMLHelp Forums > Web Authoring > Web Site Functionality
Lord Filip
Hello guys.
I am new on this forum. I actually created my profile because i am youg student of computer science and i need help with my web developiing projects.
I created navigation bar at the header of my site with dropdowns. Afte that i created a slideshow using html and css only.Problem is what dropdown stay behind slide show.
PLEASE tell me how to fix this.

THIS IS CODE FOR HTML
<html>
<head>
<title>
DANILOVGRAD
</title>
<link rel="stylesheet" type="text/css" href="danilovgra.css">
</head>
<body>
<header>
<div class="header1">
<p id="time" style="float:left;color:white;padding:10px;padding-left:40px;font-family:Bahnschrift SemiBold;">
<script> document.getElementById("time").innerHTML=Date();</script>
</p>
<p style="float:right;color:white;padding:10px;padding-right:40px;font-family:Bahnschrift SemiBold;">Kontakt mail:filipivanovic59@gmail.com</p>
</div>
<div class="header2">
<ul>
<li><a href="#"><b>VIJESTI</b></A></li>
<li class="dropdown">
<a href="java script:void(0)" class="dropbtn"><b>DOŽIVI DANILOVGRAD</b></A>
<div class="dropdown-content">
<a href="#">O gradu</a>
<a href="#">Istorija</a>
<a href="#">Vjerski turizam</a>
<a href="#">Prirodne atrakcije</a>
<a href="#">Kultura</a>
<a href="#">Obrazovanje</a>
<a href="#">Sport</a>
</div>
</li>
<li class="dropdown">
<a href="#"><b>BIZNIS</b></A></li>
<li class="dropdown">
<a href="java script:void(0)" class="dropbtn"><b>GRADSKA UPRAVA</b></A>
<div class="dropdown-content">
<a href="#">O gradu</a>
<a href="#">Istorija</a>
<a href="#">Vjerski turizam</a>
<a href="#">Prirodne atrakcije</a>
<a href="#">Kultura</a>
<a href="#">Obrazovanje</a>
<a href="#">Sport</a>
</div>
</li>
<li class="dropdown">
<a href="java script:void(0)" class="dropbtn"><b>SKUPŠTINA</b></A>
<div class="dropdown-content">
<a href="#">O gradu</a>
<a href="#">Istorija</a>
<a href="#">Vjerski turizam</a>
<a href="#">Prirodne atrakcije</a>
<a href="#">Kultura</a>
<a href="#">Obrazovanje</a>
<a href="#">Sport</a>
</div>
</li>
<li class="dropdown">
<a href="java script:void(0)" class="dropbtn"><b>SERVISI ZA GRAĐANE</b></A>
<div class="dropdown-content">
<a href="#">O gradu</a>
<a href="#">Istorija</a>
<a href="#">Vjerski turizam</a>
<a href="#">Prirodne atrakcije</a>
<a href="#">Kultura</a>
<a href="#">Obrazovanje</a>
<a href="#">Sport</a>
</div>
</li>
<li><a href="#"><b>SPI</b></A></li>
<li class="dropdown">
<a href="java script:void(0)" class="dropbtn"><b>IZBORI</b></A>
<div class="dropdown-content">
<a href="#">O gradu</a>
<a href="#">Istorija</a>
<a href="#">Vjerski turizam</a>
<a href="#">Prirodne atrakcije</a>
<a href="#">Kultura</a>
<a href="#">Obrazovanje</a>
<a href="#">Sport</a>
</div>
</li>
<li><a href="#"><b>KONTAKT</b></A></li>
</ul>
</div>
</header>
<main>
<div class="slidershow middle">
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<input type="radio" name="r" id="r4">
<input type="radio" name="r" id="r5">
<div class="slide s1">
<img src="slikaprva.jpg" style="width:100%;height:800px;" alt="">
</div>
<div class="slide">
<img src="slikadruga.jpg" style="width:100%;height:800px;" alt="">
</div>
<div class="slide">
<img src="slikatreca.jpg" style="width:100%;height:800px;" alt="">
</div>
<div class="slide">
<img src="slikacetvrta.jpg" style="width:100%;height:800px;" alt="">
</div>
<div class="slide">
<img src="slikapeta.jpg" style="width:100%;height:800px;" alt="">
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
<label for="r4" class="bar"></label>
<label for="r5" class="bar"></label>
</div>
</div>
</div>
</div>
</main>
<footer>
<p> &copyLordFilipWebDev 2020. </br>All rights reserved </p>
</footer>
</body>
</html>

AND THIS IS CODE FOR CSS

*{
margin:0;
padding: 0;
box-sizing:border-box;
}
header{
position: fixed;
width: 100%;
}
.header1{
background-color: #F68D2A;
width:100%;
height:32px;
padding: 32px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
width: 100%;
}
li{
float: left;
}
li a, .dropbtn{
display: inline-block;
color:black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn{
color: #F68D2A;
transition: 0.4s ease;
}
li.dropdown{
display: inline-block;
}
.dropdown-content{
display: none;
position: absolute;
background-color: #F68D2A;
min-width: 196px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a{
color:white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align:left;
}
.dropdown-content a:hover{background-color: white;color:#F68D2A;}
.dropdown:hover .dropdown-content{
display: block;
}
body{
font-family:Arial, Halvetica, sans-serif;
background-color:##f1f1f1;
position:relative;
padding-bottom:68px;
min-height:100vh;
}
main{
margin: 0 auto;

}

footer{
text-align:center;
background-color:#F68D2A;
color:#fff;
padding:25px;
position:absolute;
bottom:0;
width:100%;
}
.slidershow{
width:100%;
height: 620px;
overflow: hidden;
}
.middle{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.navigation{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display:flex;
}
.bar{
width:50px;
height:10px;
border: 2px solid #F68D2A;
margin:6px;
cursor: pointer;
transition: 0.4s;
border-radius: 23px;
}
.bar:hover{
background: #F68D2A;
}
input[name="r"]{
position: absolute;
visibility: hidden;
}
.slides{
width: 500%;
height: 100%;
display: flex;
}
.slide{
width: 20%;
transition: 0.6s;
}
.slide img{
width:100%;
height:100%;
}
#r1:checked ~ .s1{
margin-left: 0;
}
#r2:checked~.s1{
margin-left: -20%;
}
#r3:checked~.s1{
margin-left: -40%;
}
#r4:checked~.s1{
margin-left: -60%;
}
#r5:checked~.s1{
margin-left: -80%;
}
EddieMace
The problem here is... the slider seems to be on top of the navigation at all times. What I did to come up with a solution was to use z-index. It allows you to control elements by positioning them in the front or back.

The slider is being placed at the bottom and the dropbtn is placed to the top.

Go to your CSS and place:


.slidershow{
z-index:-1;
}

li a, .dropbtn{
z-index:10;
}

Alex Smith
Hey Lord Filip, start learning it from https://www.w3schools.com/html/. It is best school for a new student. When you will start practicing by using this website then your mistakes will be reduced automatically and your concepts will be cleared.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2021 Invision Power Services, Inc.