Foros del Web » Creando para Internet » HTML »

Cubrir celda con una div

Estas en el tema de Cubrir celda con una div en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/03/2012, 07:47
 
Fecha de Ingreso: marzo-2012
Mensajes: 20
Antigüedad: 9 años, 3 meses
Puntos: 0
Cubrir celda con una div

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.
  #2 (permalink)  
Antiguo 13/03/2012, 11:41
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 14 años
Puntos: 1567
Respuesta: Cubrir celda con una div

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
  1. <!DOCTYPE html>
  2. <html lang="es-ar">
  3. <meta charset="utf-8" />
  4. <title>Mostrar ocultar capas cambiando valor del texto</title>
  5. <meta name="description" content="Mostrar ocultar capas cambiando valor del texto" />
  6. <style type="text/css">
  7. /*<![CDATA[*/
  8. #oculta1,#oculta2 {
  9. display: none;
  10. width: 180px;
  11. font-family: arial, serif;
  12. padding: 15px 5px;
  13. border: dotted 1px #554F9D;
  14. background-color:#A3AD76;
  15. font-size: 10pt;
  16. margin-top: 3px;
  17. margin-bottom:20px;
  18. }
  19. p{
  20. font-weight: bold;
  21. font-size: 11pt;
  22. width: 180px;
  23. cursor: pointer;
  24. font-family: arial, serif;
  25. padding: 5px;
  26. border: dotted 1px #554F9D;
  27. margin-bottom: 2px;
  28. margin-top: 3px;
  29. }
  30. /*]]>*/
  31. <script type="text/javascript">
  32. //<![CDATA[
  33. /* Configurar */
  34. var tn = "Ocultar"; // Texto para cuando la capa esté visible
  35. var tb = "Mostrar"; // Texto para cuando la capa esté oculta
  36. /* No Editar */
  37. var tags_span = new Array();
  38. function cTxt(laclase,eltexto,propiedad) {
  39. var tags_span=document.getElementsByTagName('span');
  40. for (i=0; i<tags_span.length; i++) {
  41. if (tags_span[i].className==laclase) {
  42. var texto = eltexto;
  43. tags_span[i].innerHTML= texto;
  44. }
  45. }
  46. document.getElementById(laclase).style.display = propiedad;
  47. }
  48.  
  49. function m_o(cdv) {
  50. var e = document.getElementById(cdv);
  51. e.style.display =(e.style.display=="block")?cTxt(cdv,tb,'none'):cTxt(cdv,tn,'block');
  52. }
  53. //]]>
  54. </head>
  55. <p><span class="oculta1" onclick="m_o('oculta1');">Mostrar</span></p>
  56. <div id="oculta1">
  57. Christus eum filiam sum cum suam non coepit, mytilenam cuius ampullam ungues dotis quare quae vero non coepit
  58. </div>
  59. <p><span class="oculta2" onclick="m_o('oculta2');">Mostrar</span></p>
  60. <div id="oculta2">
  61. Lorem ipsum dolor sit amet, jesu Dionysiadem tuos ratio indue villicus potest in fuerat
  62. </div>
  63. </body>
  64. </html>

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 19/03/2012, 13:44
 
Fecha de Ingreso: marzo-2012
Mensajes: 20
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Cubrir celda con una div

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.
  #4 (permalink)  
Antiguo 19/03/2012, 15:16
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 14 años
Puntos: 1567
Respuesta: Cubrir celda con una div

Podés intentar con esto

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es-ar">
  3. <meta charset="utf-8" />
  4. <title>Mostrar ocultar capas cambiando valor del texto</title>
  5. <meta name="description" content="Mostrar ocultar capas cambiando valor del texto" />
  6. <style type="text/css">
  7. /*<![CDATA[*/
  8.  
  9. p{
  10. font-weight: bold;
  11. font-size: 11pt;
  12. width: 180px;
  13. cursor: pointer;
  14. font-family: arial, serif;
  15. padding: 5px;
  16. border: dotted 1px #554F9D;
  17. margin-bottom: 2px;
  18. margin-top: 3px;
  19. }
  20.  
  21. div.celda{
  22. width: 300px;
  23. height: 300px;
  24. position: relative;
  25. background-color: lime;
  26. }
  27.  
  28. #oc{
  29. width: 100%;
  30. height: 100%;
  31. background-color: green;
  32. position: absolute;
  33. top: 0;
  34. left: 0;
  35. visibility: hidden;
  36. z-index: 999;
  37. }
  38.  
  39.  
  40. /*]]>*/
  41. <script type="text/javascript">
  42. //<![CDATA[
  43. /* Configurar */
  44. var tn = "Ocultar"; // Texto para cuando la capa esté visible
  45. var tb = "Mostrar"; // Texto para cuando la capa esté oculta
  46. /* No Editar */
  47. var tags_span = new Array();
  48. function cTxt(laclase,eltexto,propiedad) {
  49. var tags_span=document.getElementsByTagName('span');
  50. for (i=0; i<tags_span.length; i++) {
  51. if (tags_span[i].className==laclase) {
  52. var texto = eltexto;
  53. tags_span[i].innerHTML= texto;
  54. }
  55. }
  56. document.getElementById(laclase).style.visibility = propiedad;
  57. }
  58.  
  59. function m_ov(cdv) {
  60. var e = document.getElementById(cdv);
  61. e.style.visibility =(e.style.visibility=="visible")?cTxt(cdv,tb,'hidden'):cTxt(cdv,tn,'visible');
  62. }
  63.  
  64. //]]>
  65. </head>
  66.  
  67. <p><span class="oc" onclick="m_ov('oc');">Mostrar</span></p>
  68. <table border="1" cellspacing="2" cellpadding="2">
  69. <tr>
  70. <td>
  71. <div class="celda">
  72. Contenido celda
  73. <div id="oc">
  74. Contenido div
  75. </div>
  76. </div> 
  77. </td>
  78. <td>texto_celda 2</td>
  79. </tr>
  80. </body>
  81. </html>

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

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: celda, cubrir, botones, formulario
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




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