Menu desplegable y slider

shakaxd · #1 (**permalink**) 09/08/2012, 14:48

Hola tengo un PROBLEMA espero me puedan ayudar mi menu desplegable
sale atras del slider y no encuentro la forma de acomodarlo :/
quisiera que me ayuden aca una imagen

http://img821.imageshack.us/img821/1855/sinttulodjrv.png

jockosv · #2 (**permalink**) 09/08/2012, 15:42

Para empezar tenes que asignar los comandos z-index en el estilo de tu pagina.
#slide {
z-index: 1;
}

#menu {
z-index: 9999;
}

donde z-index: 1 es el slide que quedará abajo y z-index:9999 es el menu por encima de cualquier div u objeto.

Aquí puedes ver el resultado final http://playasalinitas.com/demo

Saludos

shakaxd · #3 (**permalink**) 09/08/2012, 16:44

Código HTML:

<head>
<title>OverSouL</title>



<style type="text/css">

*{padding:0px;
 margin:0px}

#header{margin:auto;width:500px;font-family:Arial,Helverica,sans-serif;}

ul,ol{list-style:none;}
.nav li a{background-color:#000;color:#fff;text-decoration:none;padding:10px 15px;display:block;}
.nav li a:hover{background-color:#565151}
.nav > li{float:left;}
.nav li ul{display:none;position:absolute;min-width:140px;}
.nav li:hover>ul{display:block;}
.nav li ul li{pisition:relative;}
.nav li ul li  ul{right: -140px; top:0px;}
</style>








<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />

<script type="text/javascript">
	$(document).ready(function() {
		$('#coin-slider ').coinslider({ width: 900,height:400, navigation: true, delay: 8000 })});
</script>




</head>


<body background="I7.jpg">

<div id="header">

<ul class="nav">

<li><a href=""><b>Inicio</b></a><li>


<li><a href=""><b>Guias de cada Clase</b></a>
<ul><b>
     <li><a href=""><font color="#6b441a">Guerrero</font></a></li>
     <li><a href=""><font color="#f67eae">Paladin</font></a></li>
     <li><a href=""><font color="#eb0c36">Caballero de la muerte</font></a></li>
     <li><a href=""><font color="#0a3bb7">Chaman</font></a></li> 
   <li><a href=""><font color="#42ba39">Cazador</font></a></li>
 <li><a href=""><font color="#0cb9eb">Mago</font></a>
     <li><a href=""><font color="#8049a3">Brujo </font></a></li>
     <li><a href=""><font color="#f6fbfb">Sacerdote</font></a></li>


<li><a href=""><font color="#ebdf26">Picaro</font></a></li>
 <li><a href=""><font color="#f0870c">Druida</font></a></li>

</b>

</li>

</ul>
</li>


<li><a href=""><b>JcJ</b></a>
<ul><b>
     <li><a href="">Arenas</a></b>
<ul><b>
     <li><a href="">Guia 2c2</a></li>
     <li><a href="">Guia 3C3</a></li>
     <li><a href="">Guia 5c5</a></li>

</b>
</li>
</ul>
<b>
      <li><a href="">Torneos y eventos</a></li>
</b>
</ul>

</li>


<li><a href=""><b>Addons</b></a></li>

<li><a href=""><b>Noticias</b></a></li>
</ul>


</div>
<br>
<br>
<br>
<br>
<font face ="arial">

<center>


<br>


<div id='coin-slider'>
	
<a href="" target="_blank">
<img src='01.JPG' >
<span>
<p align="left"><b> Eventos PVP</b><br/ > Invaciones a todos los reyes de la horda<br> todo por logros por montura o simplemente por pura diversion  </p> </span>
	</a>

<a href="" target="_blank">
<img src='02.jpg' >
<span>
<p align="left"><b>Profeciones</b><br>Todas y cada una de las profeciones del juego estan a dispocion de  todos<br>con  la contribucion de lo que se necesita para crearlos.  </p></span>
</a>

<a href="" target="_blank">
<img src='03.jpg' >
<span>
<p align="left"><b>PvE </b><br> Solo se realiza PVE para ayudar a nuevos jugadores a armarse   en el sentido de conseguir una buena arma  o un buen abalorio  <br>con el fin de mejorar  mucho su daño PVP (Arenas, BG,Duelos  ) y de este modo dejar bien parada  a la hermandad   </p></span>
</a>

<a href="" target="_blank">
<img src='04.jpg' >
<span>
<p align="left"><b>Expancion Woltk</b><br> Actualmente nuestro servidor se encuentra en  la vercion 3.5.5a <br> difrutemoslo y esperemos tenerlo por un buen tiempo </p></span>
</a>






</div>








</body>

la verdad creo que tienes la respuesta pero nose como aplicarla xDD
soy nuevo en esto y la verdad no entendi x) ai te dejo como esta extructurado lo q estoy haciendo

jockosv · #4 (**permalink**) 10/08/2012, 07:54

Al estilo del header solo agregamos z-index:9999 para que siempre el menú esté por sobre todo.

#header{margin:auto;width:500px;font-family:Arial,Helverica,sans-serif; z-index:9999;}

Para el slide es algo simple, así como estás aplicando el estilo en el mismo index creamos el estilo siguiente:

Código HTML:

<style>
#ordenslide {
z-index:1;
}
</style>

luego donde esta la etiqueta del slide mandas a llamar el estilo por medio del id:ordenslide y abrimos el div antes del div del slide

Código HTML:

<div id="ordenslide"><!-- Aquí llamamos el estilo donde esta z-index -->

<div id='coin-slider'>
	
<a href="" target="_blank">
<img src='01.JPG' >
<span>
<p align="left"><b> Eventos PVP</b><br/ > Invaciones a todos los reyes de la horda<br> todo por logros por montura o simplemente por pura diversion  </p> </span>
	</a>

<a href="" target="_blank">
<img src='02.jpg' >
<span>
<p align="left"><b>Profeciones</b><br>Todas y cada una de las profeciones del juego estan a dispocion de  todos<br>con  la contribucion de lo que se necesita para crearlos.  </p></span>
</a>

<a href="" target="_blank">
<img src='03.jpg' >
<span>
<p align="left"><b>PvE </b><br> Solo se realiza PVE para ayudar a nuevos jugadores a armarse   en el sentido de conseguir una buena arma  o un buen abalorio  <br>con el fin de mejorar  mucho su daño PVP (Arenas, BG,Duelos  ) y de este modo dejar bien parada  a la hermandad   </p></span>
</a>

<a href="" target="_blank">
<img src='04.jpg' >
<span>
<p align="left"><b>Expancion Woltk</b><br> Actualmente nuestro servidor se encuentra en  la vercion 3.5.5a <br> difrutemoslo y esperemos tenerlo por un buen tiempo </p></span>
</a>




</div>

</div><!-- Aquí cerramos el estilo donde esta z-index -->

Espero sea de tu ayuda y cualquier duda estamos a la orden

Saludos

shakaxd · #5 (**permalink**) 11/08/2012, 11:27

gracias ya solucione el problema :D