The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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
 
 Reply to this topicStart new topic
Replies
Alex Smith
post Jan 25 2021, 11:47 PM
Post #2





Group: Members
Posts: 1
Joined: 25-January 21
Member No.: 27,747
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
Lord Filip   PROBLEM WITH DROPDOWN AND SLIDESHOW   Apr 21 2020, 09:51 AM
EddieMace   The problem here is... the slider seems to be on t...   Oct 10 2020, 11:50 AM
Alex Smith   Hey Lord Filip, start learning it from https://www...   Jan 25 2021, 11:47 PM

« Next Oldest · Web Site Functionality · Next Newest »
 

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

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 12:39 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC