Tema: Qué os parece mi primera "caja de pandora"
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 31/10/2010, 17:32
Avatar de Paramericano
Paramericano
 
Fecha de Ingreso: agosto-2010
Mensajes: 137
Antigüedad: 14 años, 4 meses
Puntos: 8
Qué os parece mi primera "caja de pandora"
Aquí va mi primera obra de arte, simplemente es copiar y pegar a un archivo html vacío.
Ahora mismo la llamo "caja que muestra diferentes temas" y es puro CSS.

Qué os parece?


Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Cuadro CSS</title>
  6. <style type="text/css">
  7. .caja {
  8.    width:200px;
  9.    position:relative;
  10.    }
  11. .pestanya{
  12.     z-index:24; background-color:#ccc;
  13.     color:#000;
  14.     text-decoration:none;
  15.     padding: 10px 5px;
  16.     }
  17. .pestanya:hover{z-index:25; background-color:#E9E9E9}
  18.  
  19. .pestanya .content1, .pestanya .content2, .pestanya .content3, .pestanya .content4, .pestanya .content5 {display: none}
  20.  
  21. .inicio, .pestanya:hover .content1, .pestanya:hover .content2, .pestanya:hover .content3, .pestanya:hover .content4, .pestanya:hover .content5{ 
  22.     display:inline;
  23.     position:absolute;
  24.     left:100%;
  25.     top:0%;
  26.     background-color:#E9E9E9;
  27.     font-weight:bold;
  28.     font-size:2em;
  29.     text-align: center;
  30.     width:350px;
  31.     height:100%;
  32.     }
  33. </style>
  34. </head>
  35. <body bgcolor="orange">
  36. <div class="caja">
  37. <div class="pestanya">Inicio<div class="inicio">Contenido 0</div></div>
  38. <div class="pestanya">Caja I<div class="content1">Contenido I</div></div>
  39. <div class="pestanya">Caja II<div class="content2">Contenido II</div></div>
  40. <div class="pestanya">Caja III<div class="content3">Contenido III</div></div>
  41. <div class="pestanya">Caja IV<div class="content4">Contenido IV</div></div>
  42. <div class="pestanya">Caja V<div class="content5">Contenido V</div></div>
  43. </div>
  44. </body>
  45. </html>
Última edición por Paramericano; 31/10/2010 a las 17:37