Foros del Web » Creando para Internet » CSS »

Div no se agranda

Estas en el tema de Div no se agranda en el foro de CSS en Foros del Web. Hola buenas a todos. Estoy con un sistema de pestañas pero el caso es que el div no se me agranda con el contenido si ...
  #1 (permalink)  
Antiguo 09/09/2012, 13:49
 
Fecha de Ingreso: septiembre-2011
Mensajes: 32
Antigüedad: 12 años, 7 meses
Puntos: 0
Div no se agranda

Hola buenas a todos. Estoy con un sistema de pestañas pero el caso es que el div no se me agranda con el contenido si no que me sale una pequeña parte solo. He mirado y probado cosas pero no logro hacer que me muestre todo el contenido, le he puesto height y demas (ya que no tiene para que se ajuste) pero iba por 1000% y solo mostraba unos 4 dedos. Este es el codigo:
Código:
.tabs { /* es el rectángulo contenedor */
margin: 0 auto;
min-height: 200px;
position: relative;
width: 550px;
}
.tab { /* cada una de las pestañas */
float: left;
}
.tab label { /* la parte superior con el título de la pestaña */
background-color: #456;
border-radius: 5px 5px 0 0;
box-shadow: -3px 3px 2px #678 inset;
color: #DDD;
cursor: pointer;
left: 0;
margin-right: 1px;
padding: 5px 15px;
position: relative;
text-shadow: 1px 1px #000;
}
/* el control input sólo lo necesitamos para que las pestañas permanezcan abiertas así que lo ocultamos */
.tab [type=radio] { display: none; }

/* el contenido de las pestañas */
.content {
background-color: #678;
bottom: 0;
left: 0;
overflow: hidden;
padding: 20px;
position: absolute;
right: 0;
top: 23px;
}
/* y un poco de animación */
.content > * {
opacity: 0;

-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);

-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}

/* controlamos la pestaña activa */
[type="radio"]:checked ~ label {
background-color: #678;
box-shadow: 0 3px 2px #89A inset;
color: #FFF;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content { z-index: 1; }
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
También os dejo una imagen de como me sale (es del content que es lo que me interesa):


Gracias por la ayuda
  #2 (permalink)  
Antiguo 09/09/2012, 19:01
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 3 meses
Puntos: 306
Respuesta: Div no se agranda

Te falta mostrar el html donde se aplican esos estilos, o un enlace para verla en vivo.

Saludos.

PD: tal vez tenga que ver con limpiar los float, pero estoy adivinando.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 10/09/2012, 03:18
 
Fecha de Ingreso: septiembre-2011
Mensajes: 32
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: Div no se agranda

Aqui pongo el html. Es cogido de un blog todo pero lo he estado modificando y no lo he solucionado por lo que puse el original que tampoco me iba y asin aprendo.
Código:
<div class="tabs">
   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Primera</label>
       <div class="content"> el contenido de la pestaña 1 </div>
   </div>
   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Segunda</label>
       <div class="content"> el contenido de la pestaña 2 </div>
   </div>
</div>

Etiquetas: contenido, fondo
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:56.