Tema: Sobreposición de <div>s
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 24/09/2011, 15:19
Avatar de joss23
joss23
 
Fecha de Ingreso: noviembre-2009
Mensajes: 16
Antigüedad: 15 años, 11 meses
Puntos: 0
Respuesta: Sobreposición de <div>s
Cita:
Iniciado por emprear Ver Mensaje
En realidad no estás usando divs, estas usando una tabla, no sé de donde vienen tus datos, pero si estás extrayendo dichos valores de una base de datos, sería aceptable

Más allá de eso, estas complicándote con el sistema

te dejo dos variantes, si lo hacés con una tabla se te simplifica el centrado vertical del menu

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>titulo</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. <style type="text/css">
  8.     
  9. /* para el segundo ejempo */
  10.     div.contiene_menu{
  11.      width: 200px;
  12.      height: 200px;
  13.      text-align: center;
  14.      margin-right: 3px;
  15.      float: left;
  16.      display: table; position: static;
  17.      }
  18.     div.menu {
  19.     width: 150px; 
  20.     height: 150px;
  21.     background-color: red;
  22.     display: none;
  23.     margin: auto;
  24.     position: relative;
  25.     line-height: 150px;
  26.     vertical-align: middle;
  27.     }
  28.     /* capa extra para centrado vertical - mismo ancho y al to que la capa contiene_menu*/
  29.     div.centrar_v {
  30.     display: table-cell; 
  31.     vertical-align: middle;
  32.     position: static;
  33.     width: 200px; 
  34.     height: 200px;
  35.     }
  36.     </style>
  37. <script type="text/javascript">
  38.     function mostrarMenu(indice){
  39.     document.getElementById(indice).style.display = 'block';
  40.     }
  41.     function ocultarMenu(indice){
  42.     document.getElementById(indice).style.display = 'none';
  43.     }
  44.     </script>
  45. </head>
  46. <body>
  47.     <p> Con tablas </p>
  48. <table border="1" cellspacing="2" cellpadding="0">
  49. <tr>
  50. <td width="200" height="200" align="center" valign="middle" onclick="mostrarMenu('uno');" style="background-image: url('muno.png');">
  51. <div style="display: none; width: 100px; height: 100px; background-color: red" id="uno" onmouseout="ocultarMenu(this.id);">
  52. menú 1
  53. </div>
  54. </td>
  55. <td width="200" height="200" align="center" valign="middle" onclick="mostrarMenu('dos');" style="background-image: url('mdos.jpg');">
  56. <div style="display: none; width: 100px; height: 100px; background-color: red" id="dos" onmouseout="ocultarMenu(this.id);">
  57. menú 2
  58. </div>
  59. </td>
  60. </tr>
  61. </table>
  62. <p> Con divs </p>
  63. <div class="contiene_menu" onclick="mostrarMenu('tres');" style="background-image: url('muno.png');">
  64. <div class="centrar_v">
  65. <div class="menu" id="tres" onmouseout="ocultarMenu('tres');">
  66. menú 3
  67. </div>
  68. </div>
  69. </div>
  70. <div class="contiene_menu" onclick="mostrarMenu('cuatro');" style="background-image: url('mdos.jpg');">
  71. <div class="centrar_v">
  72. <div class="menu" id="cuatro" onmouseout="ocultarMenu('cuatro');">
  73. menú 4
  74. </div>
  75. </div>
  76. </div>
  77. </body>
  78. </html>

demo
[url]http://foros.emprear.com/css/centrado-vertical/menusobreimg2.html[/url]

hay un pequeño detalle que corregir, pero te lo dejo a vos...

Saludos
Hola emprear!

Gracias por tu ayuda, tengo un problema y es que las imagenes de la cuadrícula en realidad tienen que cambiarse por otras al pasar el ratón por encima, y luego aparecer el menú encima si se hace clic. Es posible ese cambio onmouseover estando la imagen como fondo de una celda?