Foros del Web » Creando para Internet » HTML »

Sobreposición de <div>s

 Estas en el tema de Sobreposición de <div>s en el foro de HTML en Foros del Web. Buenos días! Estoy creando una página web que va a consistir en una cuadrícula con una imágen en cada celda, y al hacer clic en ...
  #1 (permalink)  
Antiguo 24/09/2011, 05:24
Avatar de joss23  
Fecha de Ingreso: noviembre-2009
Mensajes: 16
Antigüedad: 14 años, 5 meses
Puntos: 0
Exclamación Sobreposición de <div>s
Buenos días!

Estoy creando una página web que va a consistir en una cuadrícula con una imágen en cada celda, y al hacer clic en cada imagen debe aparecer encima de ella un pequeño menú de dos botones.

Estoy intentando hacerlo mediante divs, tengo un div para la imagen y otro para el cuadro con los botones, y quiero que uno se sobreponga al otro. He probado con z-index pero sólo funciona si los dos div estan en posición absoluta, con lo cual no se ven dentro de la cuadrícula, sino en la esquina superior izquierda de la página.

Aquí está el código completo de la página:

Código HTML:
<html>

<head>

<script language="JavaScript" fptype="dynamicanimation">
<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</script>

<script language="JavaScript1.2" fptype="dynamicanimation" src="animate.js"></script>

<script language="JavaScript">

var totalLayersInLoop=1;

var layerNumShowing=1;



function init(){

      	  if (navigator.appName == "Netscape") {

		    layerStyleRef="layer.";

 			layerRef="document.layers";

			styleSwitch="";

			}else{

 			layerStyleRef="layer.style.";

			layerRef="document.all";

 			styleSwitch=".style";

			} 	}



function showLayerNumber(number){

 		var layerNumToShow=number;

		hideLayer(eval('"layer' + layerNumShowing+'"'));

 		showLayer(eval('"layer' + layerNumToShow+'"'));

 		layerNumShowing=layerNumToShow;	 	}

		

function showLayer(layerName){

 		eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"'); 	} 	



function hideLayer(layerName){

 		eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"'); 	} 



function dyninit(){

dynAnimation();

init();

}

</script>

<style type="text/css">

.estilo {
border-color: #FF0000;
border-width: 1px;
border-style: solid;
}


 #capa {POSITION: relative; Z-INDEX: 2; VISIBILITY: visible; LEFT: 0px; TOP: 0px;}
 
 #capa2 {POSITION: relative; Z-INDEX: 3; VISIBILITY: visible; LEFT: 0px; TOP: 0px;}

</style>

</head>


<body onload="dyninit()">

<table border="0" width="100%" height="100%">
  <tr>
    <td width="14%" height="30%" class="estilo" align="center" valign="middle">
      
      <div id="capa" width="100%" height="100%">
      <a onmouseover="document['fpAnimswapImgFP1'].imgRolln=document['fpAnimswapImgFP1'].src;document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].lowsrc;" onmouseout="document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].imgRolln" onclick="javascript:showLayer(capa2)" href="javascript:void(0)">
      <img border="0" src="imagen.gif" width="170" height="170" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="imagen2.jpg"></a>
      </div>
      
      <div id="capa2" width="100%" height="100%">
      <table bgcolor="#FF0000" height="100%" width="100%">
      <tr>
      <td height="100%" width="100%" valign="middle" align="center">(Botones)</td>
      </tr>
      </table> 
      </div>
 	
    </td>
    <td width="14%" height="30%" class="estilo" align="center" valign="middle">&nbsp;</td>
    <td width="14%" height="30%" class="estilo" align="center" valign="middle">&nbsp;</td>
    <td width="14%" height="30%" class="estilo" align="center" valign="middle">&nbsp;</td>
    <td width="14%" height="30%" class="estilo" align="center" valign="middle">&nbsp;</td>
    <td width="14%" height="30%" class="estilo" align="center" valign="middle">&nbsp;</td>
    <td width="14%" height="30%" class="estilo" align="center" valign="middle">&nbsp;</td>
  </tr>
  <tr>
    <td width="14%" height="30%" class="estilo" align="center" valign="middle">&nbsp;</td>
    <td width="14%" height="30%" class="estilo" align="center" valign="middle">&nbsp;</td>
    <td width="14%" height="30%" class="estilo" align="center" valign="middle">&nbsp;</td>
    <td width="14%" height="30%" class="estilo" align="center" valign="middle">&nbsp;</td>
    <td width="14%" height="30%" class="estilo" align="center" valign="middle">&nbsp;</td>
    <td width="14%" height="30%" class="estilo" align="center" valign="middle">&nbsp;</td>
    <td width="14%" height="30%" class="estilo" align="center" valign="middle">&nbsp;</td>
  </tr>
</table>

</body>

</html>

Como podría hacer para que se sobrepusieran las dos capas dentro de una celda?

Muchas gracias!
  #2 (permalink)  
Antiguo 24/09/2011, 07:33
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Sobreposición de <div>s
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
http://foros.emprear.com/css/centrad...sobreimg2.html

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

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 24/09/2011, 15:19
Avatar de joss23  
Fecha de Ingreso: noviembre-2009
Mensajes: 16
Antigüedad: 14 años, 5 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?
  #4 (permalink)  
Antiguo 24/09/2011, 15:57
Avatar de emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Sobreposición de <div>s
Si, por supuesto, y si es con mouseover, ni siquiera usas javascript, con la pseudo classe hover.

Código CSS: 
Ver original
  1. div {
  2. background-image: url(logo.jpg);
  3. }
  4.  
  5. div:hover {
  6. background-image: url(logo2.jpg);
  7. }
Si usas javascript, la propiedad se invoca con
Código Javascript: 
Ver original
  1. object.style.backgroundImage="url(xxx.gif)"

Yo use js, porque el evento era onclick, analizá lo que puse
Código Javascript: 
Ver original
  1. <script type="text/javascript">
  2.     function mostrarMenu(indice){
  3.     document.getElementById(indice).style.display = 'block';
  4.     }
  5.     function ocultarMenu(indice){
  6.     document.getElementById(indice).style.display = 'none';
  7.     }
  8.     </script>

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 24/09/2011, 16:53
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 3 meses
Puntos: 306
Respuesta: Sobreposición de <div>s
Hola, solo una aclaración sobre z-index:
La propiedad que controla la posición tridimensional de una caja se denomina z-index y sólo tiene efecto sobre los elementos posicionados, es decir, aquellos sobre los que se ha establecido la propiedad position o la propiedad float.

www.librosweb.es

Digo, para que no quede como que solo funciona para position:absolute.

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Etiquetas: css, botones
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 14:16.