Foros del Web » Creando para Internet » CSS »

Menú desplegable y JQuery

Estas en el tema de Menú desplegable y JQuery en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/11/2009, 12:22
El_Astur
Invitado
 
Mensajes: n/a
Puntos:
Menú desplegable y JQuery

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.
  #2 (permalink)  
Antiguo 18/11/2009, 12:33
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: Menú desplegable y JQuery

Cita:
Iniciado por El_Astur Ver Mensaje
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
__________________
Grupo Telegram Docker en Español
  #3 (permalink)  
Antiguo 18/11/2009, 17:49
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Menú desplegable y JQuery

Cita:
Iniciado por El_Astur Ver Mensaje
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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 19/11/2009, 14:49
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Menú desplegable y JQuery

Hola:

Cita:
Iniciado por kseso? Ver Mensaje
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.

  #5 (permalink)  
Antiguo 19/11/2009, 19:06
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Menú desplegable y JQuery

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:
Ver original
  1. /* line:13, hack:(show the code)*/

Código html:
Ver original
  1. <!-- line:13, hack:(show the code) -->

Código javascript:
Ver original
  1. // line:13, hack:(show the code);

Código php:
Ver original
  1. # line:13, hack:(show the code);
y por ahi sigue la lista
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.

Última edición por zerokilled; 19/11/2009 a las 19:11
  #6 (permalink)  
Antiguo 20/11/2009, 14:22
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Menú desplegable y JQuery

Hola:

Zerokilled, apúntate un tanto.

Saludos.

  #7 (permalink)  
Antiguo 23/11/2009, 12:15
El_Astur
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Menú desplegable y JQuery

Cita:
Iniciado por Carlangueitor Ver Mensaje
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>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:55.