Menú desplegable y JQuery

[El_Astur]

Hola:

escribo este tema para ver si me podeis ayudar a resolver un problema que me ha surgido y que por más vueltas que le llevo dando no logro resolverlo.

He realizado en una web una botonera desplegable con CSS y justo debajo una animación con JQuery ( una secuencia de fotos que van pasando una tras otra ).

El problema es que la animación tapa el desplegable de la botonera y ésta, al desplegarse, no se ven los botones.

Alguien me podria decir dónde podria estar el problema?

Un saludo.

[Carlangueitor]

Iniciado por El_Astur

Alguien me podria decir dónde podría estar el problema?

Y tu podrías decirnos donde esta el código?? sera muy difícil saber cual es el problema a ciegas.

Saludos

[kseso?]

Iniciado por El_Astur

Alguien me podria decir dónde podria estar el problema?

Esta es de las fáciles
El problema está en el código que usas, exactamente en la línea 13, carácter 03

[jomaruro]

Hola:

Iniciado por kseso?

El problema está en el código que usas, exactamente en la línea 13, carácter 03

Lo que se dice en estos casos "rizar el rizo"

Saludos.

[zerokilled]

saludos gentes ,
¿sabian que encontre un hack para esa linea que JavierB descubrio? es bien sencillo y aplica para todo tipo de archivos, desde HTML hasta PHP. se trata de un comentario (segun el tipo de archivo) que tienes que poner en la linea 13.

Código css:

/* line:13, hack:(show the code)*/
 

Código html:

<!-- line:13, hack:(show the code) -->
 

Código javascript:

// line:13, hack:(show the code);
 

Código php:

# line:13, hack:(show the code);
 

y por ahi sigue la lista

[jomaruro]

Hola:

Zerokilled, apúntate un tanto.

Saludos.

[El_Astur]

Iniciado por Carlangueitor

Y tu podrías decirnos donde esta el código?? sera muy difícil saber cual es el problema a ciegas.

Saludos

Pues el código es el siguiente, porque sigo sin saber cómo lo puedo arreglar:

Botonera desplegable:

CSS:

#maxcontenedor #contenedor #direccion{
width:200px;
float:left;
margin-top:8px;
margin-left:14px;
margin-bottom:-12px;
font-family:arial,helvetica,sans-serif;
font-size:11px;
font-weight:bold;
color:#494949;
letter-spacing:2px;
}

ul#navmenu-h {
width: auto;
height : 34px;
float:right;
margin: 0;
border : 0 none;
padding : 1px;
list-style : none;
background-color : #628677;
z-index:2;
}


ul#navmenu-h li {
margin : 0px 14px;
padding : 0;
float : left;
display : inline;
list-style : none;
position : relative;
height : 31px;
}


ul#navmenu-h ul {
margin:0;
border : 0 none;
padding : 0;
width : 140px;
list-style : none;
display : none;
position : absolute;
top : 30px;
left : 0;
background-color:#000;
}


ul#navmenu-h ul:after {
clear : both;
display : block;
font : 1px/0 serif;
content : ".";
height : 0;
visibility : hidden;
}


ul#navmenu-h ul li {
width : 134px;
float : left;
display : block !important ;
display : inline;
}


ul#navmenu-h a {
border : none;
padding : 6px 6px;
float : none !important ;
float : left;
display : block;
color : #dfdfdf;
font : bold 13px/19px arial, helvetica, sans-serif;
text-decoration : none;
height :22px !important ;
height : 1%;
}


ul#navmenu-h a:hover, ul#navmenu-h li:hover a, ul#navmenu-h li.iehover a {
background-color:#83a597;
color : #fff;
}


ul#navmenu-h li:hover li a, ul#navmenu-h li.iehover li a {
float : none;
background-color:#628677;
color : #dfdfdf;
font-size:11px;
margin-left:-14px;
}


ul#navmenu-h li:hover li a:hover, ul#navmenu-h li:hover li:hover a, ul#navmenu-h li.iehover li a:hover, ul#navmenu-h li.iehover li.iehover a {
background-color:#83a597;
color : #fff;
}



ul#navmenu-h li:hover li:hover li a:hover, ul#navmenu-h li:hover li:hover li:hover a, ul#navmenu-h li.iehover li.iehover li a:hover, ul#navmenu-h li.iehover li.iehover li.iehover a {
background-color:#628677;
color : #fff;
}


ul#navmenu-h ul ul, ul#navmenu-h ul ul ul {
display : none;
position : absolute;
top : 0;
left : 128px;

}

ul#navmenu-h li:hover ul ul, ul#navmenu-h li:hover ul ul ul, ul#navmenu-h li.iehover ul ul, ul#navmenu-h li.iehover ul ul ul {
display : none;
}

ul#navmenu-h li:hover ul, ul#navmenu-h ul li:hover ul, ul#navmenu-h ul ul li:hover ul, ul#navmenu-h li.iehover ul, ul#navmenu-h ul li.iehover ul, ul#navmenu-h ul ul li.iehover ul {
display : block;
}


#maxcontenedor #contenedor .aquies{
height:21px;
padding:7px;
font-family:arial,helvetica,sans-serif;
font-weight:bold;
font-size:13px;
color:#fff;
background-color:#83a597;

}


HTML

<div id="direccion">
Calle......<br/>
Ciudad y Código postal<br/>
Tel&eacute;fono: 985 759 326<br/>
E-mail: <a href="mailto:[email protected]">[email protected]</a>
</div>

<ul id="navmenu-h">

<li class="aquies">
Portada
</li>

<li>
<a href="#">Instalaciones</a>

<ul>

<li>
<a href="#">Hall</a>
</li>

<li>
<a href="#">Consultas azul y blanca</a>
</li>

<li>
<a href="#">Quir&oacute;fano</a>
</li>

<li>
<a href="#">Radiolog&iacute;a</a>
</li>

<li>
<a href="#">Hospitalizaci&oacute;n</a>
</li>

<li>
<a href="#">Alimentaci&oacute;n</a>
</li>

</ul>

</li>

<li>
<a href="#">Servicios</a>

<ul>

<li>
<a href="#">Cirug&iacute;a</a>
</li>

<li>
<a href="#">Consulta</a>
</li>

<li>
<a href="#">Vacunaci&oacute;n</a>
</li>

<li>
<a href="#">Radiograf&iacute;as</a>
</li>

<li>
<a href="#">Limpiezas bucales</a>
</li>

<li>
<a href="#">Alimentaci&oacute;n</a>
</li>

<li>
<a href="#">Peluquer&iacute;a</a>
</li>

<li>
<a href="#">Medicina interna</a>
</li>

<li>
<a href="#">Hospitalizaci&oacute;n</a>
</li>

<li>
<a href="#">An&aacute;lisi cl&iacute;nicos</a>
</li>

<li>
<a href="#">Implant. microchips</a>
</li>

<li>
<a href="#">An&aacute;lisis de triquina</a>
</li>

<li>
<a href="#">Servicio domicilio</a>
</li>

</ul>
</li>

<li>
<a href="#">Urgencias</a>
</li>

<li>
<a href="#">Contacto</a>
</li>

</ul>


JQUERY

CSS

#maxcontenedor #contenedor #contenido #s3slider {
width: 500px; /* important to be same as image width */
height: 360px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#maxcontenedor #contenedor #contenido #s3sliderContent {
width: 500px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}

#maxcontenedor #contenedor #contenido .s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}

#maxcontenedor #contenedor #contenido .s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 374px;
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
top: 0;

/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}

.clear {
clear: both;
}


HTML

<div id="s3slider">

<ul id="s3sliderContent">

<li class="s3sliderImage">
<img src="imagenes/secuencia/imagen1.jpg" alt="exterior clinica" width="500" height="360" />
<span>EXTERIOR Cl&iacute;nica</span>
</li>

<li class="s3sliderImage">
<img src="imagenes/secuencia/imagen2.jpg" alt="hall clinica" width="500" height="360" />
<span>HALL Cl&iacute;nica</span>
</li>

<li class="s3sliderImage">
<img src="imagenes/secuencia/imagen3.jpg" alt="pasillo clinica " width="500" height="360" />
<span>PASILLO Cl&iacute;nica </span>
</li>

<li class="s3sliderImage">
<img src="imagenes/secuencia/imagen4.jpg" alt="jaulas clinica" width="500" height="360" />
<span>JAULAS Cl&iacute;nica </span>
</li>

<li class="s3sliderImage">
<img src="imagenes/secuencia/imagen5.jpg" alt="teo" width="500" height="360" />
<span>TEO</span>
</li>

<div class="clear s3sliderImage"></div>

</ul>

</div>