Ver Mensaje Individual
  #1 (permalink)  
Antiguo 18/01/2016, 07:33
Avatar de acousticgerman
acousticgerman
 
Fecha de Ingreso: abril-2004
Ubicación: Merlo, buenos aires
Mensajes: 364
Antigüedad: 20 años, 7 meses
Puntos: 1
De acuerdo No puedo mostrar un DIV debajo del otro

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!
__________________
"Life goes on..."