Tema: Div - Cambio de position absolute a static no respeta top y left
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 29/12/2015, 13:11
oggy_15_3
 
Fecha de Ingreso: marzo-2015
Mensajes: 183
Antigüedad: 9 años, 1 mes
Puntos: 8
Div - Cambio de position absolute a static no respeta top y left
DISCULPEN, EL TÍTULO NO TIENE NADA QUE VER CON EL CONTENIDO.


Hola a todos.
Tengo un código HTML y CSS que me permite crear un tab (pestaña o panel).
La cosa es que actualmente me funciona el cambio de pestaña por medio de un radio, pero me gustaría hacerlo por medio quizas del mismo titulo de la pestaña que esta en la etiqueta li.

Agradezco de antemano la atención.

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Documento sin título</title>
  6. <style type="text/css">
  7. *{
  8.     margin:0;   
  9.     padding:0px;
  10. }
  11. .clsDivTabs_JD{
  12.     position: absolute;
  13.     left: 90px;
  14.     top: 43px;
  15. }
  16.  
  17. .clsDivTabs_JD ul{
  18.     list-style-type:none;   
  19. }
  20. .clsDivTabs_JD ul li{
  21.     float:left;
  22.     margin:2px 2px;
  23.     border:1px solid #999;
  24.     min-width:80px;
  25.     text-align:center;
  26.     
  27. }
  28.  
  29. /*.clsDivTabs_JD ul li:active + p{
  30.     background-color:#F00;
  31. }*/
  32.  
  33. .clsDivTabs_JD ul li p{
  34.     margin:0;
  35.     text-align:left;
  36.     position:absolute;
  37.     z-index:2;
  38.     border:2px solid #CCC;
  39.     width:350px;height:200px;
  40.     left:0px;
  41. }
  42.  
  43. .clsDivTabs_JD ul li input[type=radio]{
  44.     /*visibility:hidden;*/  
  45. }
  46. .clsDivTabs_JD ul li input[type=radio]:checked + p{
  47.     background-color:#F00;
  48.     z-index:3;
  49. }
  50. .clsDivTabs_JD ul li input[type=radio]:not(:checked) + p{
  51.     z-index:2;
  52. }
  53. </style>
  54. </head>
  55.  
  56. <body>
  57. <div class="clsDivTabs_JD">
  58. <ul>
  59. <li><input type="radio" name="rbTab" />PANEL 1
  60. <p style="display:none;">Contenido Panel 1</p>
  61. </li>
  62. <li><input type="radio" name="rbTab"/>PANEL 2
  63. <p >Contenido Panel 2</p>
  64. </li>
  65. </ul>
  66. </div>
  67.  
  68. </body>
  69. </html>
Última edición por oggy_15_3; 29/12/2015 a las 13:19