Menu gaat niet over slideshow heen

Status
Niet open voor verdere reacties.
T

Tessa123212

Gebruiker
Lid geworden
10 mei 2016
Berichten
5
Hallo,

Ik heb een slideshow gemaakt met foto's en gegevens over de makers van de site. Er staat een menubalk bovenaan, maar deze menubalk heeft opeens andere kleuren dan bij alle andere delen van de site. Sommige stukjes zijn zwart en andere stukjes zijn grijs. Hoe krijg ik de hele balk weer zwart? Ook komt er uit het kopje informatie een dropdown. Deze moet over de slideshow heen, zodat het duidelijk te zien is. Maar op dit moment gebeurt dit niet. Hoe moet ik dit oplossen?
Code: 
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  margin-top: 20px;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 0;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: white;
  rgba(0,0,0,0.8)
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1s;
  animation-name: fade;
  animation-duration: 1s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .slprev, .slnext,.text {font-size: 11px}
}
html {
	background-color:   #81DAF5;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #0080FF;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 7px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}


</style>
<body>
<header>
<ul>
  <li><a class="active" href="Unesco.html">Home</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">Informatie</a>
    <div class="dropdown-content">
<a href="115.000.html">115.000 v.C</a>
      <a href="200.html">200</a>
      <a href="plaatje3.html">1652</a>
      <a href="plaatje4.html">1713</a>
      <a href="plaatje5.html">1779</a>
      <a href="plaatje6.html">1795</a>
      <a href="plaatje7.html">1803</a>
      <a href="1835.html">1835</a>
      <a href="1849.html">1849</a>
      <a href="1852.html">1852</a>
      <a href="1855.html">1855</a>
      <a href="1858.html">1858</a>
      <a href="1859.html">1859</a>
      <a href="1880.html">1880</a>
      <a href="1912.html">1912</a>
      <a href="1930.html">1930</a>
      <a href="1948.html">1948</a>
      <a href="1964.html">1964</a>
      <a href="1983.html">1983</a>
      <a href="1997.html">1997</a>
      <a href="2013.html">2013</a>
    </div>
  </li>
   <li><a class="active" href="#home">Over de makers</a></li>
   <li><a class="active" href="#home">Contact</a></li>
</ul>
</header> 
<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="Appeltaart.jpg" style="width:100%">
  <div class="text"><b>Niels Tittse</b> <br>Hallo, Ik ben de designer van deze site. Ik bepaal welk knopje welke kleur heeft en welk plaatje bij welke tekst komt te staan. Zonder mij is deze site wit met zwarte lijntjes. Deze site is mijn leven. Dit alles had ik nooit gekund zonder mijn leidinggevende Tessa en informateur Rik.</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="Appeltaart.jpg" style="width:100%">
  <div class="text"><b> Tessa Janssen</b> <br> Hoi, ik ben de maker van deze site. Ik zorg ervoor dat alle knoppen werken en dat jij de goede informatie op je scherm krijgt! Ik heb van deze site mijn levenswerk gemaakt. Dit alles had ik nooit gekund zonder mijn informateur Rik en designer Niels.</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="Appeltaart.jpg" style="width:100%">
  <div class="text"><b> Rik Pansier</b><br> Joehoe, ik ben de informateur van deze site. Ik zorg ervoor dat alle informatie klopt en jij altijd op de hoogte bent van de leukste nieuwtjes uit Zuid-Afrika. Een dag zonder deze site is een dag niet geleefd. Dit alles had ik nooit gekund zonder mijn designer Niels en leidinggevende Tessa.</div>
</div>

<a class="prev" onclick="plusSlides(-1)"><</a>
<a class="next" onclick="plusSlides(1)">></a>

</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length} ;
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>

</body>
</html>
 
Omschrijf even hoe je dat hebt gedaan, voor toekomstige oplossing-zoekenden. (Is dat een woord? ;))
 
je dient te kijken naar
Code: 
 class="active"
verwijder die eens

Tja ik kan je zeggen krachtige css geschreven

hints
  • bekijk een href="./bestand... href="/bestand... src="./bestand... src="/bestand...
  • style in extern bestand <link href="f" rel="stylesheet" type="text/css" />
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan