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%; } |
Alex Smith |
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.
|
Lo-Fi Version | Time is now: 27th April 2024 - 10:07 PM |