Foros del Web - Ver Mensaje Individual

emprear · #2 (**permalink**) 24/09/2011, 07:33

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
    
/* para el segundo ejempo */
    div.contiene_menu{
     width: 200px;
     height: 200px;
     text-align: center;
     margin-right: 3px;
     float: left;
     display: table; position: static;
     }
    div.menu {
    width: 150px; 
    height: 150px;
    background-color: red;
    display: none;
    margin: auto;
    position: relative;
    line-height: 150px;
    vertical-align: middle;
    }
    /* capa extra para centrado vertical - mismo ancho y al to que la capa contiene_menu*/
    div.centrar_v {
    display: table-cell; 
    vertical-align: middle;
    position: static;
    width: 200px; 
    height: 200px;
    }
    </style>
<script type="text/javascript">
    function mostrarMenu(indice){
    document.getElementById(indice).style.display = 'block';
    }
    function ocultarMenu(indice){
    document.getElementById(indice).style.display = 'none';
    }
    </script>
</head>
<body>
    <p> Con tablas </p>
<table border="1" cellspacing="2" cellpadding="0">
<tr>
<td width="200" height="200" align="center" valign="middle" onclick="mostrarMenu('uno');" style="background-image: url('muno.png');">
<div style="display: none; width: 100px; height: 100px; background-color: red" id="uno" onmouseout="ocultarMenu(this.id);">
menú 1
</div>
</td>
<td width="200" height="200" align="center" valign="middle" onclick="mostrarMenu('dos');" style="background-image: url('mdos.jpg');">
<div style="display: none; width: 100px; height: 100px; background-color: red" id="dos" onmouseout="ocultarMenu(this.id);">
menú 2
</div>
</td>
</tr>
</table>
<p> Con divs </p>
<div class="contiene_menu" onclick="mostrarMenu('tres');" style="background-image: url('muno.png');">
<div class="centrar_v">
<div class="menu" id="tres" onmouseout="ocultarMenu('tres');">
menú 3
</div>
</div>
</div>
<div class="contiene_menu" onclick="mostrarMenu('cuatro');" style="background-image: url('mdos.jpg');">
<div class="centrar_v">
<div class="menu" id="cuatro" onmouseout="ocultarMenu('cuatro');">
menú 4
</div>
</div>
</div>
</body>
</html>

demo
http://foros.emprear.com/css/centrad...sobreimg2.html

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

Saludos