0
Ich habe ein Problem mit der Navigationsleiste, wo es die Diashow stört, im Moment ist es unterdiashert die Diashow. Was ist der beste Weg, um das zu beheben? Hier ist der Code unten, alle Tipps geschätzt. Papa segne. ziemlich newb zu Codierung, würden alle anderen PunkteNav-Leiste stecken unter Slideshow html
<!DOCTYPE html>
<html>
<head>
<title> Home - A.Willi A.G</title>
</head>
<h1 align="center">
<a href="index.html"><img src="logo.png" alt="A.Willi A.G" /></a>
</h1>
<body><link rel="stylesheet" href="index.css" type="text/css" /></body>
<head>
<style>
.menu_div{background-color: #333; width:100%;}
ul {
list-style-type: none;
margin: 0 auto;
display:table;
padding: 0;
overflow: hidden;
}
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: black;
}
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: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="menu_div">
<ul>
<li><a href="index.html">Home</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Bewerber</a>
<div class="dropdown-content">
<a href="#">Info</a>
<a href="#">Jobs</a>
<li class="dropdown">
<a href="#" class="dropbtn">Kunde</a>
<div class="dropdown-content">
<a href="personalverleih.html">Personalverleih</a>
<a href="toolrental.html">Werkzeuge Mieten</a>
<a href="referenzen.html">Referenzen</a>
<a href="quali.html">Qulität, Sicherheit und Weiterbildung</a>
<li><a href="kontakt.html">Kontakt</a></li>
</li>
</ul>
</div>
</body>
<style>
@keyframes fade {
0% { opacity: 0; }
11.11% { opacity: 1; }
33.33% { opacity: 1; }
44.44% { opacity: 0; }
100% { opacity: 0; }
}
.fadein { position:relative; height:332px; width:500px; outline: 1px solid blue; }
.fadein img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
.fadein img:nth-child(1) { animation-delay: 0s; }
.fadein img:nth-child(2) { animation-delay: 3s; }
.fadein img:nth-child(3) { animation-delay: 6s; }
</style>
<div class="fadein">
<img src="welder1.png">
<img src="welder2.png">
<img src="welder3.png">
</div>
</body>
</html>
Blockquote
body { font-family: verdana; background:white ; color: white; }
.nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
}
.fadein img {
height:500px;
width:381%;
}
Blockquote
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
Nichts sollte zwischen Kopf und Körper befinden. – leaf
Es sollte nur einen Kopf und einen Körper geben. – leaf
[z-index] (https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) könnte Ihnen helfen, die Navigationsleiste oben auf dem Schieberegler zu platzieren, [display] (https : //developer.mozilla.org/en-US/docs/Web/CSS/display) könnte Ihnen helfen, wie die Elemente auf der Seite angezeigt werden, [Position] (https://developer.mozilla.org/en- US/docs/Web/CSS/position) könnte bei der Positionierung der Elemente helfen –