Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Web Site Functionality _ PROBLEM WITH DROPDOWN AND SLIDESHOW

Posted by: Lord Filip Apr 21 2020, 09:51 AM

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%;
}

Posted by: EddieMace Oct 10 2020, 11:50 AM

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;
}


Posted by: Alex Smith Jan 25 2021, 11:47 PM

Hey Lord Filip, start learning it from https://www.w3schools.com/html/default.asphttps://www.apksclub.com/netboom-mod-apk/. 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.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)