Foros del Web » Creando para Internet » CSS »

Menú css en tabla con scroll

 Estas en el tema de Menú css en tabla con scroll en el foro de CSS en Foros del Web. Hola, tengo el siguiente problema. Tengo en una tabla con scroll un menú con drop down, pero al mover el scroll, no se mueven los ...
  #1 (permalink)  
Antiguo 11/11/2008, 06:31
 
Fecha de Ingreso: noviembre-2008
Mensajes: 11
Antigüedad: 15 años, 5 meses
Puntos: 1
Menú css en tabla con scroll
Hola, tengo el siguiente problema. Tengo en una tabla con scroll un menú con drop down, pero al mover el scroll, no se mueven los elementos del menú, y además, se me sale por fuera de la tabla. Pongo unas imágenes, y el código, por si me pueden ayudar.
Gracias,
Lucy.

bueno, las imágenes no sé cómo subirlas. así que dejo solo el código html y el css.
  #2 (permalink)  
Antiguo 11/11/2008, 06:32
 
Fecha de Ingreso: noviembre-2008
Mensajes: 11
Antigüedad: 15 años, 5 meses
Puntos: 1
Respuesta: Menú css en tabla con scroll
Código HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tabla menú</title>
<link rel="StyleSheet" href="ataa_es_web_pub/estilos/estilos.css" type="text/css">
</head>
<script type="text/javascript" src="funciones.js"></script>
<link rel="stylesheet" media="all" type="text/css" href="ataa_es_web_pub/estilos/menu5.css" />
<body>
<div id="principal">

<div style="overflow: scroll; overflow-x: hidden; height:100px; width:100%; z-index:999999999">

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="TablaContenidoCaja">
<tr class="Pijama1" id="obj1">
<td width="20%" class="TextoTablaIzq"><span id="codReg0">XXXXXXXXX</span></td>
<td width="68%" class="TextoTablaIzq"><span id="desc0">XXXX</span></td>
<td class="TextoTablaCen">
<ul class="menu5" style=" z-index:99999999;">
<li class="news"><a class="drop" href="#nogo"><p align="right">Acciones&nbsp;
<img src="../ataa_es_web_pub/images/menuacciones.gif" /></p>
<table><tr><td>
<ul>
<li style="border-top:1px solid #98D1EA;"><a href="#" title="Modificar">Modificar</a></li>
<li><a href="#" title="Consultar">Consultar</a></li>
<li><a href="#" title="Eliminar">Eliminar</a></li>
<li><a href="#" title="Acción 4">Acci&oacute;n 4</a></li>
<li><a href="#" title="Acción 5">Acci&oacute;n 5</a></li>
</ul>
</td></tr></table></a> </li>
</ul>
</td>
</tr>
<tr class="Pijama2" id="obj1">
<td width="20%" class="TextoTablaIzq"><span id="codReg1">XXXXXXXXX</span></td>
<td width="68%" class="TextoTablaIzq">
<span id="desc1">XXXX</span> </td>
<td class="TextoTablaCen">
<ul class="menu5" style="z-index:99999998;">
<li><a class="drop" href="#nogo"><p align="right">Acciones&nbsp;
<img src="../ataa_es_web_pub/images/menuacciones.gif" /></p>
<table><tr><td>
<ul>
<li style="border-top:1px solid #98D1EA;"><a href="#" title="Modificar">Modificar</a></li>
<li><a href="#" title="Consultar">Consultar</a></li>
<li><a href="#" title="Eliminar">Eliminar</a></li>
<li><a href="#" title="Acción 4">Acci&oacute;n 4</a></li>
<li><a href="#" title="Acción 5">Acci&oacute;n 5</a></li>
</ul>
</td></tr></table></a> </li>
</ul>
</td>
</tr>
<tr class="Pijama1" id="obj1">
<td width="20%" class="TextoTablaIzq"><span id="codReg0">XXXXXXXXX</span></td>
<td width="68%" class="TextoTablaIzq"><span id="desc0">XXXX</span></td>
<td class="TextoTablaCen">
<ul class="menu5" style=" z-index:99999997;">
<li class="news"><a class="drop" href="#nogo"><p align="right">Acciones&nbsp;
<img src="../ataa_es_web_pub/images/menuacciones.gif" /></p>
<table><tr><td>
<ul>
<li style="border-top:1px solid #98D1EA;"><a href="#" title="Modificar">Modificar</a></li>
<li><a href="#" title="Consultar">Consultar</a></li>
<li><a href="#" title="Eliminar">Eliminar</a></li>
<li><a href="#" title="Acción 4">Acci&oacute;n 4</a></li>
<li><a href="#" title="Acción 5">Acci&oacute;n 5</a></li>
</ul>
</td></tr></table></a> </li>
</ul>
</td>
</tr>
<tr class="Pijama2" id="obj1">
<td width="20%" class="TextoTablaIzq"><span id="codReg1">XXXXXXXXX</span></td>
<td width="68%" class="TextoTablaIzq">
<span id="desc1">XXXX</span> </td>
<td class="TextoTablaCen">
<ul class="menu5" style="z-index:99999996;">
<li><a class="drop" href="#nogo"><p align="right">Acciones&nbsp;
<img src="../ataa_es_web_pub/images/menuacciones.gif" /></p>
<table><tr><td>
<ul>
<li style="border-top:1px solid #98D1EA;"><a href="#" title="Modificar">Modificar</a></li>
<li><a href="#" title="Consultar">Consultar</a></li>
<li><a href="#" title="Eliminar">Eliminar</a></li>
<li><a href="#" title="Acción 4">Acci&oacute;n 4</a></li>
<li><a href="#" title="Acción 5">Acci&oacute;n 5</a></li>
</ul>
</td></tr></table></a> </li>
</ul>
</td>
</tr>
<tr class="Pijama1" id="obj1">
<td width="20%" class="TextoTablaIzq"><span id="codReg0">XXXXXXXXX</span></td>
<td width="68%" class="TextoTablaIzq"><span id="desc0">XXXX</span></td>
<td class="TextoTablaCen">
<ul class="menu5" style=" z-index:99999995;">
<li class="news"><a class="drop" href="#nogo"><p align="right">Acciones&nbsp;
<img src="../ataa_es_web_pub/images/menuacciones.gif" /></p>
<table><tr><td>
<ul>
<li style="border-top:1px solid #98D1EA;"><a href="#" title="Modificar">Modificar</a></li>
<li><a href="#" title="Consultar">Consultar</a></li>
<li><a href="#" title="Eliminar">Eliminar</a></li>
<li><a href="#" title="Acción 4">Acci&oacute;n 4</a></li>
<li><a href="#" title="Acción 5">Acci&oacute;n 5</a></li>
</ul>
</td></tr></table></a> </li>
</ul>
</td>
</tr>

</table></div>
</body>
</html>
  #3 (permalink)  
Antiguo 11/11/2008, 06:33
 
Fecha de Ingreso: noviembre-2008
Mensajes: 11
Antigüedad: 15 años, 5 meses
Puntos: 1
Respuesta: Menú css en tabla con scroll
Código CSS

.menu5 {text-align:left; font-family: arial, sans-serif; position:relative; font-size:11px; vertical-align:middle;width:105px; list-style-type:none; margin:0 padding:0;float:left; height:25px;}
.menu5 ul {
padding:0; margin:0; list-style-type:none; /* for Firefox */
}
.menu5 li img {padding:4px; vertical-align: middle; border:0px; cursor:pointer; }

.menu5 li {
float:left; position:relative;
}
.menu5 li a, .menu5 li a:visited {
display:block; text-decoration:none; width:7em; color:#000; float:left; padding-right:0.2em; height:1em; line-height:1.5em; color:#02458f;
}
.menu5 p{
vertical-align:middle; padding-top:3px;
}
.menu5 li a.drop, .menu5 li a.drop:visited {
font-weight:normal;
}
.menu5 li ul {
visibility:hidden; position:absolute; left:0; height:0; overflow:hidden;
}
.menu5 table {
margin:-10px; border-collapse:collapse; font-size:1em; /* font size for IE5.5 */
}

/* fist line style for IE7 and non-IE browsers and the second line for IE5.5 and IE6 */
.menu5 li:hover a,
.menu5 li a:hover {
text-decoration:none; border-left:2px solid #98D1EA; border-top:2px solid #98D1EA; border-right:2px solid #98D1EA;
}
.menu5 li:hover ul,
.menu5 li a:hover ul {
visibility:visible; height:auto; width:7em; background:#fff; border-left:2px solid #98D1EA; border-right:2px solid #98D1EA; border-bottom:1px solid #98D1EA; left:0; top:1.7em; overflow:visible;
}
.menu5 li:hover ul li a,
.menu5 li a:hover ul li a {
display:block; font-weight:normal; background:transparent; text-decoration:none; height:auto; padding:1px; width:7em; border-bottom:1px solid #98D1EA; vertical-align:middle;
}
* html .menu5 li a:hover ul li a {
width:10em; w\idth:9em; /* hack for IE5.5 */
}
.menu5 li:hover ul li a.drop,
.menu5 li a:hover ul li a.drop {
font-weight:normal;
}
.menu5 li:hover ul li ul,
.menu5 li a:hover ul li a ul {
visibility:hidden; position:absolute; top:0; height:0; overflow:hidden;
}
.menu5 li:hover ul li a:hover,
.menu5 li a:hover ul li a:hover {
text-decoration:none; color:#fff; background:#98D1EA;padding:0px; margin:0px; width:106px;
}
.menu5 li:hover ul li:hover ul,
.menu5 li a:hover ul li a:hover ul {
visibility:visible; color:#000; border:1px solid #ddd; height:auto; background:#fff;
}
.menu5 li:hover ul li:hover ul.left,
.menu5 li a:hover ul li a:hover ul.left {
left:-8.3em;
}
.menu5 li:hover ul li:hover ul li a,
.menu5 li a:hover ul li a:hover ul li a {
display:block; height:auto;
}
.menu5 li:hover ul li:hover ul li:hover a,
.menu5 li a:hover ul li a:hover ul li a:hover {
text-decoration:underline;
}
  #4 (permalink)  
Antiguo 11/11/2008, 07:26
Avatar de Aresillo
Colaborador
  
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años
Puntos: 53
Respuesta: Menú css en tabla con scroll
No entiendo...
Utilizas tablas para todo la web y para hacer el menú, te pasas al css...

Creo que deberías hacer toda la web con capas y css...
Seguro que ya no tendrías el problema que propones...

Suerte!

Aresillo!!
PD: algún día hay que empezar!
  #5 (permalink)  
Antiguo 11/11/2008, 07:53
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 15 años, 6 meses
Puntos: 40
Respuesta: Menú css en tabla con scroll
hola lucylsd

en el html tienes varios errores; tienes unas tags </a> que te sobran y al primer div le falta cerrar. por que no revisas eso para empezar y voy a revisar tu css por que solo lo veo mal en ie(para variar ).

Por otra parte estoy muy deacuerdo con Aresillo, si pudiste hacer un menu desplegable por que no lo contruyes todo con css.

Saludos..
  #6 (permalink)  
Antiguo 11/11/2008, 08:42
 
Fecha de Ingreso: noviembre-2008
Mensajes: 11
Antigüedad: 15 años, 5 meses
Puntos: 1
Respuesta: Menú css en tabla con scroll
Hola otra vez, y gracias a los dos por responder.
Lo de hacer la página con css completa, es muy buena idea, pero el problema es que trabajo para un banco, y no puedo cambiar toooda la estructura de como está hecho el sitio, por lo tanto, tengo que seguir con las tablas, y viendo si puedo hacer el menú este con css..
En cuanto a los errores, ya he quitado el div de arriba que estaba por gusto, y los </a> que me sobraban fue que tenía unas imágenes alante y al borrarlas, olvidé quitar los </a>, pero que no es este el problema. He visto que en firefox no pasa lo del scroll, pero ya saben, internet explorer manda.. al menos por ahora.
Muchas gracias nuevamente.
Lucy.
  #7 (permalink)  
Antiguo 11/11/2008, 09:03
 
Fecha de Ingreso: noviembre-2008
Mensajes: 11
Antigüedad: 15 años, 5 meses
Puntos: 1
Respuesta: Menú css en tabla con scroll
Ya sé dónde está el problema, pero no sé cómo resolverlo. Si en estas dos líneas del ccs:
.menu5 {text-align:left; font-family: arial, sans-serif; position:relative; font-size:11px; vertical-align:middle;width:105px; list-style-type:none; margin:0 padding:0;float:left; height:25px;}
.menu5 li {
float:left; position:relative;
}

quito el position, ya sale bien la parte del scroll, lo que entonces el menú me sale en otro lado de la ventana.. : (
  #8 (permalink)  
Antiguo 11/11/2008, 09:39
 
Fecha de Ingreso: noviembre-2008
Mensajes: 11
Antigüedad: 15 años, 5 meses
Puntos: 1
Respuesta: Menú css en tabla con scroll
Y finalmente ya he encontrado la solución, en vez de quitarle las position como dije anteriormente, se lo he agregado al div del scrol.
Gracias.
  #9 (permalink)  
Antiguo 12/11/2008, 04:58
 
Fecha de Ingreso: noviembre-2008
Mensajes: 11
Antigüedad: 15 años, 5 meses
Puntos: 1
Respuesta: Menú css en tabla con scroll
Hola chicos, he vuelto. Ayer resolví los problemas que les comenté, pero ahora tengo otro.
Lo que pasa es que ahora si le paso por encima a algún menú desplegable, y tengo scroll, pues el menú se me pone como por debajo de la tabla, y no me deja ver las opciones del menú que queden abajo. les paso el código, un poco mejorado.
Gracias.
Lucy.

.menu5 {text-align:left; font-family: arial, sans-serif; position:relative; font-size:11px; vertical-align:middle;width:120px; list-style-type:none; margin:0; padding:0;float:left; height:25px;}
.menu5 ul {
padding:0; margin:0; list-style-type:none; /* for Firefox */
}
.menu5 li {
float:left; position:relative;
}
.menu5 li a, .menu5 li a:visited {
display:block; text-decoration:none; float:left; color:#02458f;
}

.menu5 li ul {
visibility:hidden; position:absolute; left:0; height:0; overflow:hidden;
}
.menu5 table {
margin:-10px; border-collapse:collapse; font-size:1em; /* font size for IE5.5 */
}

/* fist line style for IE7 and non-IE browsers and the second line for IE5.5 and IE6 */
.menu5 li:hover a,
.menu5 li a:hover {
text-decoration:none; margin-left:15px;
}
.menu5 li:hover ul,
.menu5 li a:hover ul {
visibility:visible; background:#fff; border-left:2px solid #98D1EA; border-right:2px solid #98D1EA; border-bottom:1px solid #98D1EA; left:0; top:1.7em; overflow:visible; border-top:1px solid #98D1EA;
}
.menu5 li:hover ul li a,
.menu5 li a:hover ul li a {
display:block; font-weight:normal; background:transparent; text-decoration:none; height:auto; border-bottom:1px solid #98D1EA; vertical-align:middle;
}
* html .menu5 li a:hover ul li a {
width:10em; w\idth:9em; /* hack for IE5.5 */
}
.menu5 li:hover ul li a:hover,
.menu5 li a:hover ul li a:hover {
text-decoration:none; color:#fff; background:#98D1EA;padding:0px; margin:0px; border-top:0px; border-right:0px; border-left:0px; border-bottom:1px solid #98D1EA;
}
.scroll{
overflow: scroll; overflow-x: hidden; height:100px; width:100%; position:relative; z-index:1;
}
#imgModificar{
background-image:url(ataa_es_web_pub/images/editar.gif); background-repeat:no-repeat; background-position: 5px; height:21px; padding-left:25px; padding-top:4px; width:80px;
}
#imgConsultar{
background-image:url(ataa_es_web_pub/images/consultar.gif); background-repeat:no-repeat; background-position: 5px; height:21px; padding-left:25px; padding-top:4px;width:80px;
}
#imgEliminar{
background-image:url(ataa_es_web_pub/images/eliminar.gif); background-repeat:no-repeat; background-position: 5px; height:21px; padding-left:25px; padding-top:4px;width:80px;
}
#imgAcciones{
background-image:url(ataa_es_web_pub/images/menuacciones.gif); background-repeat:no-repeat; background-position: 59px 7px; vertical-align:middle; padding-bottom:7px; width:72px; height:11px; padding-left:3px; padding-top:3px; margin-left:15px;
}
#imgAcciones:hover{
background-image:url(ataa_es_web_pub/images/menuacciones.gif); background-repeat:no-repeat; background-position: 59px 7px; vertical-align:middle; padding-bottom:7px; width:72px; height:11px; padding-left:3px; padding-top:3px; margin-left:15px; border-top:2px solid #98D1EA; border-left:2px solid #98D1EA; border-right:2px solid #98D1EA; border-bottom: 1px solid #fff;
}
  #10 (permalink)  
Antiguo 12/11/2008, 04:59
 
Fecha de Ingreso: noviembre-2008
Mensajes: 11
Antigüedad: 15 años, 5 meses
Puntos: 1
Respuesta: Menú css en tabla con scroll
Código html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tabla menú</title>
</head>
<link rel="stylesheet" media="all" type="text/css" href="menu5.css" />
<body>

<div class="scroll">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="TablaContenidoCaja">
<tr class="Pijama1" id="obj1">
<td width="20%" class="TextoTablaIzq"><span id="codReg0">XXXXXXXXX</span></td>
<td width="68%" class="TextoTablaIzq"><span id="desc0">XXXX</span></td>
<td class="TextoTablaCen">
<ul class="menu5" style=" z-index:99999999;">
<li>
<a href="#" id="imgAcciones">Acciones&nbsp;
<table><tr><td>
<ul>
<li><a href="#" title="Modificar" id="imgModificar">Modificar</a></li>
<li><a href="#" title="Consultar" id="imgConsultar">Consultar</a></li>
<li><a href="#" title="Eliminar" id="imgEliminar">Eliminar</a></li>
</ul>
</td></tr></table></a>
</li>
</ul>
</td>
</tr>
<tr class="Pijama2" id="obj1">
<td width="20%" class="TextoTablaIzq"><span id="codReg1">XXXXXXXXX</span></td>
<td width="68%" class="TextoTablaIzq"><span id="desc1">XXXX</span></td>
<td class="TextoTablaCen">
<ul class="menu5" style=" z-index:99999998;">
<li>
<a href="#" id="imgAcciones">Acciones&nbsp;
<table><tr><td>
<ul>
<li><a href="#" title="Modificar" id="imgModificar">Modificar</a></li>
<li><a href="#" title="Consultar" id="imgConsultar">Consultar</a></li>
<li><a href="#" title="Eliminar" id="imgEliminar">Eliminar</a></li>
</ul>
</td></tr></table></a>
</li>
</ul>
</td>
</tr>
<tr class="Pijama1" id="obj1">
<td width="20%" class="TextoTablaIzq"><span id="codReg0">XXXXXXXXX</span></td>
<td width="68%" class="TextoTablaIzq"><span id="desc0">XXXX</span></td>
<td class="TextoTablaCen">
<ul class="menu5" style=" z-index:99999997;">
<li>
<a href="#" id="imgAcciones">Acciones&nbsp;
<table><tr><td>
<ul>
<li><a href="#" title="Modificar" id="imgModificar">Modificar</a></li>
<li><a href="#" title="Consultar" id="imgConsultar">Consultar</a></li>
<li><a href="#" title="Eliminar" id="imgEliminar">Eliminar</a></li>
</ul>
</td></tr></table></a>
</li>
</ul>
</td>
</tr>
<tr class="Pijama2" id="obj1">
<td width="20%" class="TextoTablaIzq"><span id="codReg1">XXXXXXXXX</span></td>
<td width="68%" class="TextoTablaIzq">
<span id="desc1">XXXX</span> </td>
<td class="TextoTablaCen">
<ul class="menu5" style=" z-index:99999996;">
<li>
<a href="#" id="imgAcciones">Acciones&nbsp;
<table><tr><td>
<ul>
<li><a href="#" title="Modificar" id="imgModificar">Modificar</a></li>
<li><a href="#" title="Consultar" id="imgConsultar">Consultar</a></li>
<li><a href="#" title="Eliminar" id="imgEliminar">Eliminar</a></li>
</ul>
</td></tr></table></a>
</li>
</ul>
</td>
</tr>
</table></div>
</body>
</html>
  #11 (permalink)  
Antiguo 12/11/2008, 05:55
Avatar de Aresillo
Colaborador
  
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años
Puntos: 53
Respuesta: Menú css en tabla con scroll
Mira... siento decírtelo así pero lo que estás haciendo es una chapuza....perdón por la franqueza pero realmente no puedes hacerlo así...

Todo este código que pones, es sólo para el menú! osea que cuando pongas toda la web....
Esto se puede hacer con capas en un momento (gracias a mikmoro) y sin andar trasteando con las tablas... que lo único que te estás haciendo es estropear el código y conseguir que tarde la página en descargarse una burrada...

O cambias de modo o esto que nos pides se convierte en absurdo por la poca funcionalidad...

Si necesitas ayuda para pasarte a las capas o divs... sólo tienes que decirlo..

Un saludo.

Aresillo!!
  #12 (permalink)  
Antiguo 12/11/2008, 06:21
 
Fecha de Ingreso: noviembre-2008
Mensajes: 11
Antigüedad: 15 años, 5 meses
Puntos: 1
Respuesta: Menú css en tabla con scroll
Como ya expliqué, no puedo cambiar la estructura de las pantallas.
Gracias de todas formas.
  #13 (permalink)  
Antiguo 12/11/2008, 06:30
Avatar de Aresillo
Colaborador
  
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años
Puntos: 53
Respuesta: Menú css en tabla con scroll
Perdón...
Que no me acordaba...
Veré que puedo hacer...

Aresillo!!
  #14 (permalink)  
Antiguo 13/11/2008, 05:33
 
Fecha de Ingreso: noviembre-2008
Mensajes: 11
Antigüedad: 15 años, 5 meses
Puntos: 1
Respuesta: Menú css en tabla con scroll
Ok, gracias, estaré mirando por si respondes..
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 00:19.