Estimados,
Tengo un slide de imágenes en un DIV y una "Navigation bar" en otro DIV, el problema es que no puedo mostrar ambos DIV uno debajo del otro, sucede que la barra de navegación queda por detrás del slide. Este es el código CSS que armé:
.slide{
width: 90%;
margin: 2% auto;
}
.slide img{
width: 90%;
position: absolute;
}
.slide .img2, .slide .img3, .slide .img4, .slide .img5, .slide .img6, .slide .img7, .slide .img8 {
display: none;
}
figure{
margin: 0;
}
.banner {
width: 90%;
}
.navigation {
width: 90%;
margin: 2% auto;
}
y en HTML muestro todo de la siguiente manera:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NOMBRE DE LSITIO</title>
<link rel="stylesheet" href="style.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="functions.js"></script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<div class="banner">
<div class='slide'>
<img src='images/portada1.jpg' class='img1'>
<img src='images/portada2.jpg' class='img2'>
<img src='images/portada3.jpg' class='img3'>
<img src='images/portada4.jpg' class='img4'>
<img src='images/portada5.jpg' class='img5'>
<img src='images/portada6.jpg' class='img6'>
<img src='images/portada7.jpg' class='img7'>
<img src='images/portada8.jpg' class='img8'>
</div>
</div>
<br>
<div class="navigation">
<ul>
<li><a href="#home">Nosotros</a></li>
<li><a href="#news">Filosofia</a></li>
<li><a href="#contact">Vida Sana</a></li>
<li><a href="#news">Nuestros servicios</a></li>
<li><a href="#contact">Imagenes</a></li>
<ul style="float:right;list-style-type:none;">
<li><a class="active" href="#about">Novedades</a></li>
<li><a href="#login">Contactos</a></li>
</ul>
</ul>
</div>
</body>
</html>
Espero que puedan guiarme!