PROBLEM WITH DROPDOWN AND SLIDESHOW, i need help with my navigation bar dropdown and slideshow |
PROBLEM WITH DROPDOWN AND SLIDESHOW, i need help with my navigation bar dropdown and slideshow |
Lord Filip |
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> ©LordFilipWebDev 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 |
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; } |
Alex Smith |
Jan 25 2021, 11:47 PM
Post
#3
|
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.
|
Lo-Fi Version | Time is now: 18th April 2024 - 09:52 PM |