Tema: div que cubra toda la ventana
Ver Mensaje Individual
  #9 (permalink)  
Antiguo 10/06/2011, 07:56
Avatar de emprear
emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: div que cubra toda la ventana
Revisa este código, debería funcionar

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Div opaca 100% de la pantalla</title>
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9. div#opaca {
  10. position: fixed;
  11. width: 100%;
  12. height:100%;
  13. background-color: #000;
  14. color: #FFF;
  15. top:0px;
  16. left:0px;
  17. text-align: center;
  18. padding-top: 200px;
  19. z-index: 998;
  20. overflow:hidden;
  21. filter:alpha(opacity=95);
  22. -moz-opacity:0.95;
  23. -khtml-opacity:0.95;
  24. opacity: 0.95;
  25. font-size: 1.1em;
  26. }
  27.  
  28. .prueba {
  29. color: #FFF;
  30. }
  31. h1.atras {
  32. margin-left: 300px;
  33. margin-top: 300px;
  34. font-size: 4em;
  35. }
  36. div#scroll{
  37. width: 200px;
  38. height: 1000px;
  39. border: double 5px #000;
  40. }
  41.  
  42. div#popup {
  43. width: 500px;
  44. height: 300px;
  45. border: solid 2px #65B614;
  46. margin: 0 auto;
  47. z-index: 999;
  48. position: relative;
  49. }
  50. /*]]>*/
  51. </style>
  52. </head>
  53. <body>
  54. <div id="opaca"><!-- capa pantalla completa -->
  55. <div id="popup"><h1 class="prueba">Texto de Prueba<br />el popup</h1></div>
  56.     
  57. </div>
  58. <h1 class="atras">Texto tras la capa</h1>
  59. <div id="scroll">
  60. Div de 1000 px de alto para generar scroll
  61. </div>
  62. </body>
  63. </html>

Demo:
http://foros.emprear.com/css/capa_opaca.html


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