Cubrir celda con una div

segre · #1 (**permalink**) 13/03/2012, 07:47

Hola. Estoy tratando de hacer que un texto dentro de una celda sea cubierto por una div que contiene un formulario. Tengo la idea del proceso pero me cuesta llevarlo a codigo, tal vez haya que hacerlo en javascript, cuando se presione el boton "formulario" del menu que cree una div sobre la celda que contiene el texto.
Se como hacerlo abriendo otra pagina pero me gustaria que se cargue solo una pagina y que aparezca el formulario cuando se lo pida. Desde ya gracias por cualquier ayuda.

emprear · #2 (**permalink**) 13/03/2012, 11:41

Podes hacer algo asi, la idea es que tengas el div con el formulario dentro de la celda, pero que en el css le pongas la propiedad display:none; para mantenerlo oculto por defecto, luego con javascript, le cambias la propiedad desde el menu.

Analizá este ejemplo

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Mostrar ocultar capas cambiando valor del texto</title>
<meta name="description" content="Mostrar ocultar capas cambiando valor del texto" />
<style type="text/css">
/*<![CDATA[*/
#oculta1,#oculta2 {
display: none;
width: 180px;
font-family: arial, serif;
padding: 15px 5px;
border: dotted 1px #554F9D;
background-color:#A3AD76;
font-size: 10pt;
margin-top: 3px;
margin-bottom:20px;
}
p{
font-weight: bold;
font-size: 11pt;
width: 180px;
cursor: pointer;
font-family: arial, serif;
padding: 5px;
border: dotted 1px #554F9D;
margin-bottom: 2px;
margin-top: 3px;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
/* Configurar */
var tn = "Ocultar"; // Texto para cuando la capa esté visible
var tb = "Mostrar"; // Texto para cuando la capa esté oculta
/* No Editar */
var tags_span = new Array();
function cTxt(laclase,eltexto,propiedad) {
var tags_span=document.getElementsByTagName('span');
for (i=0; i<tags_span.length; i++) {
if (tags_span[i].className==laclase) {
var texto = eltexto;
tags_span[i].innerHTML= texto;
}
}
document.getElementById(laclase).style.display = propiedad;
}
 
function m_o(cdv) {
var e = document.getElementById(cdv);
e.style.display =(e.style.display=="block")?cTxt(cdv,tb,'none'):cTxt(cdv,tn,'block');
}
//]]>
</script>
</head>
<body>
<p><span class="oculta1" onclick="m_o('oculta1');">Mostrar</span></p>
<div id="oculta1">
Christus eum filiam sum cum suam non coepit, mytilenam cuius ampullam ungues dotis quare quae vero non coepit
</div>
<p><span class="oculta2" onclick="m_o('oculta2');">Mostrar</span></p>
<div id="oculta2">
Lorem ipsum dolor sit amet, jesu Dionysiadem tuos ratio indue villicus potest in fuerat
</div>
</body>
</html>

Saludos

segre · #3 (**permalink**) 19/03/2012, 13:44

El codigo esta muy bueno, trate de implementarlo pero lo que hace es desplazar el texto que tiene la celda hacia abajo. Lo que yo queria hacer es que la div cubra el texto como si fuera una capa de un programa de graficos, lo que no se es si eso se puede hacer.
Igualmente gracias por el codigo.

emprear · #4 (**permalink**) 19/03/2012, 15:16

Podés intentar con esto

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Mostrar ocultar capas cambiando valor del texto</title>
<meta name="description" content="Mostrar ocultar capas cambiando valor del texto" />
<style type="text/css">
/*<![CDATA[*/
 
p{
font-weight: bold;
font-size: 11pt;
width: 180px;
cursor: pointer;
font-family: arial, serif;
padding: 5px;
border: dotted 1px #554F9D;
margin-bottom: 2px;
margin-top: 3px;
}
 
div.celda{
width: 300px;
height: 300px;
position: relative;
background-color: lime;
}
 
#oc{
width: 100%;
height: 100%;
background-color: green;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
z-index: 999;
}
 
 
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
/* Configurar */
var tn = "Ocultar"; // Texto para cuando la capa esté visible
var tb = "Mostrar"; // Texto para cuando la capa esté oculta
/* No Editar */
var tags_span = new Array();
function cTxt(laclase,eltexto,propiedad) {
var tags_span=document.getElementsByTagName('span');
for (i=0; i<tags_span.length; i++) {
if (tags_span[i].className==laclase) {
var texto = eltexto;
tags_span[i].innerHTML= texto;
}
}
document.getElementById(laclase).style.visibility = propiedad;
}
 
function m_ov(cdv) {
var e = document.getElementById(cdv);
e.style.visibility =(e.style.visibility=="visible")?cTxt(cdv,tb,'hidden'):cTxt(cdv,tn,'visible');
}
 
//]]>
</script>
</head>
<body>
 
<p><span class="oc" onclick="m_ov('oc');">Mostrar</span></p>
<table border="1" cellspacing="2" cellpadding="2">
<tr>
<td>
<div class="celda">
Contenido celda
<div id="oc">
Contenido div
</div>
</div>  
</td>
<td>texto_celda 2</td>
</tr>
</table>
</body>
</html>

Son similares. pero tenes que reservar el alto para la capa, habría que ver toda la tabla, probalo

Saludos