Foros del Web » Creando para Internet » CSS »

Div - Cambio de position absolute a static no respeta top y left

Estas en el tema de Div - Cambio de position absolute a static no respeta top y left en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/12/2015, 13:11
 
Fecha de Ingreso: marzo-2015
Mensajes: 183
Antigüedad: 7 años, 10 meses
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. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin título</title>
  5. <style type="text/css">
  6. *{
  7.     margin:0;  
  8.     padding:0px;
  9. }
  10. .clsDivTabs_JD{
  11.     position: absolute;
  12.     left: 90px;
  13.     top: 43px;
  14. }
  15.  
  16. .clsDivTabs_JD ul{
  17.     list-style-type:none;  
  18. }
  19. .clsDivTabs_JD ul li{
  20.     float:left;
  21.     margin:2px 2px;
  22.     border:1px solid #999;
  23.     min-width:80px;
  24.     text-align:center;
  25.    
  26. }
  27.  
  28. /*.clsDivTabs_JD ul li:active + p{
  29.     background-color:#F00;
  30. }*/
  31.  
  32. .clsDivTabs_JD ul li p{
  33.     margin:0;
  34.     text-align:left;
  35.     position:absolute;
  36.     z-index:2;
  37.     border:2px solid #CCC;
  38.     width:350px;height:200px;
  39.     left:0px;
  40. }
  41.  
  42. .clsDivTabs_JD ul li input[type=radio]{
  43.     /*visibility:hidden;*/ 
  44. }
  45. .clsDivTabs_JD ul li input[type=radio]:checked + p{
  46.     background-color:#F00;
  47.     z-index:3;
  48. }
  49. .clsDivTabs_JD ul li input[type=radio]:not(:checked) + p{
  50.     z-index:2;
  51. }
  52. </head>
  53.  
  54. <div class="clsDivTabs_JD">
  55. <ul>
  56. <li><input type="radio" name="rbTab" />PANEL 1
  57. <p style="display:none;">Contenido Panel 1</p>
  58. </li>
  59. <li><input type="radio" name="rbTab"/>PANEL 2
  60. <p >Contenido Panel 2</p>
  61. </li>
  62. </ul>
  63. </div>
  64.  
  65. </body>
  66. </html>

Última edición por oggy_15_3; 29/12/2015 a las 13:19
  #2 (permalink)  
Antiguo 31/12/2015, 06:18
 
Fecha de Ingreso: octubre-2015
Ubicación: Valencia
Mensajes: 9
Antigüedad: 7 años, 3 meses
Puntos: 1
Respuesta: Div - Cambio de position absolute a static no respeta top y left

Una opción es agregar Label antes del input
Código HTML:
Ver original
  1. <li><label for="rbTab">panel 1</label><input type="radio" name="rbTab" id="rbTab" />
  2. <p style="display:none;">Contenido Panel 1</p>
  3. </li>
  4. <li><label for="rbTab2">panel 2</label><input type="radio" name="rbTab" id="rbTab2" />
  5. <p >Contenido Panel 2</p>

y luego podrias ocultar los input.
Saludos!

Etiquetas: background, color, float, html, left, position, static, todo, top, width
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 03:16.