Hola de nuevo, siento ser pesado, tengo un problema y es que tengo un menu de navegacion y cuando abro la pantalla si no esta maximizada el menu se "cuela" por detras del texto y yo lo que quiero es que desplaze a la otra capa de debajo.
Aqui esta el codigo html:
<link href="construccion.css" rel="stylesheet" type="text/css" />
<body>
<div id="barra_superior"></div>
<ul id="navi">
<li id="Inicio" class="activelink"><a href="#">Inicio</a></li>
<li id="Servicios"><a href="./servicios.html">Servicios</a></li>
<li id="Promociones"><a href="./instalaciones.html">Promociones</a></li>
<li id="Localización"><a href="./equipo_tecnico.html">Localización</a></li>
<li id="contacto"><a href="./contacto.html">Contacto</a></li>
<li id="trabajos"><a href="./trabajos.html">Nuestros trabajos</a></li>
</ul>
<div id= "contenedor">
<div class = "sombra1">
<div class = "sombra2">
<div class = "sombra3">
<div class = "caja">
El contenido va aqui asdddddasdasdasdasd hola que tal estop es sinas prepkljñpldsfkñl mncasplpñasdñlkañls</div>
</div>
</div>
</div>
<div id="pie"></div>
</div>
<!--termina el contenedor y despues cerramos las capas de sombra-->
</body>
</html>
aqui el css:
body {
background-image: url(imagenes/fondo_lascas.jpg);
background-repeat: repeat;
clear:both;
}
#barra_superior {
position:relative;
width:100%;
height:150px;
z-index:1;
background-image: url(imagenes/ladrillorojomediorelieve.jpg);
background-repeat: repeat;
visibility: visible;
}
/*#pie {
width:100%;
height:1%;
z-index:5;
left: 0px;
bottom: 1em;
clear:both;
}*/
/*menu de navegacion*/
/*cambiar px por ems o %*/
#navi {
list-style:none;
padding-top: 0px;
overflow: visible;
height: 1.8em;
clear: both;
}
#navi li {
margin:0px;
padding:0px;
float:left; /*para eliminar el comportamiento de elemento de bloque(salto de linea)*/
display:inline;
}
#navi li a {
margin-left:0.4em; /*separacion entre enlaces*/
display:block;
width:8.5em;
padding:0.4em 0;
text-decoration:none;
text-align:center;
font-size:0.875em; /*borde verde*/
background-image: url(imagenes/ladrillo_redondeado_descanso.png);
height: 1.2em;
color: #003300;
}
#navi li a:hover {
background-image: url(imagenes/ladrillo_redondeado.png); /*Luego le cambio el color al borde en el evento hover*/
color: #FFFFFF;
}
/*no funciona
.activelink{background-image: url(imagenes/ladrillo_redondeado.png); color: #FFFFFF;}
hasta aqui*/
* {
position : relative ; /*Importante*/
}
#contenedor .sombra2, #contenedor .sombra3, #contenedor .caja {
left : -2px; /*Posicionamiento de los DIVs*/
top : -2px;
}
#contenedor .sombra1 {
background-color : #CCC; /*Coloreamos el fondo*/
}
#contenedor .sombra2 {
background-color : # 999 ;
}
#contenedor .sombra3 {
background-color : # 666 ;
}
#contenedor .caja {
background-color : #FFF;
border : 1px solid #CCC; /*Le damos borde a la caja y padding*/
padding :10px;
}
#contenedor {
float:left;
width:80%;
height:100%;
z-index:2;
margin-left:10%;
padding-top: 0px;
font-size:0.8ems;
}