The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> PROBLEM WITH DROPDOWN AND SLIDESHOW, i need help with my navigation bar dropdown and slideshow
Lord Filip
post Apr 21 2020, 09:51 AM
Post #1





Group: Members
Posts: 1
Joined: 21-April 20
Member No.: 27,293



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%;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
EddieMace
post Oct 10 2020, 11:50 AM
Post #2





Group: Members
Posts: 1
Joined: 10-October 20
Member No.: 27,587



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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th October 2020 - 01:13 AM