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

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