Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Duda con posicionamiento absolute en rejilla de bootstrap

Estas en el tema de Duda con posicionamiento absolute en rejilla de bootstrap en el foro de CSS en Foros del Web. Hola a todos. Seguramente esto es algo básico pero yo no soy capaz de saber el porqué. Os cuento a ver si alguno me puede ...
  #1 (permalink)  
Antiguo 28/01/2014, 08:12
 
Fecha de Ingreso: junio-2012
Ubicación: Madrid
Mensajes: 339
Antigüedad: 11 años, 9 meses
Puntos: 47
Duda con posicionamiento absolute en rejilla de bootstrap

Hola a todos. Seguramente esto es algo básico pero yo no soy capaz de saber el porqué. Os cuento a ver si alguno me puede aclarar un poco esto.

Estoy trabajando con la grid de bootstrap. El caso es tengo dos div que se activan u ocultan dependiendo de la pestaña que pulses y tengas activa.

Estos dos divs tienen a su vez otros dos div en el interior cada uno, uno de 7 columnas y otro de 5 columnas (total 12) de la rejilla de bootstrap, col-md-7 y col-md-5 respectivamente .

El método que utilizo para ocultarlos es con visiblility por lo que he de darle posición absoluta y top:0 para que estén en el mismo lugar.

El caso es que en cuanto le pongo la posición absoluta ya no me respeta el tamaño de los divs internos que tienen las clases de la rejilla .

Os copio el código simplificado para que sepáis a qué me refiero:
Código HTML:
Ver original
  1. <!--menu tabs-->
  2.   <ul class="nav nav-tabs">
  3.         <li class="active"><a href="#">Descripción</a></li>
  4.         <li ><a href="#">Más información</a></li>    
  5.       </ul>
  6.      
  7.      
  8.    <div id="cabecera_seccion">
  9.    
  10.             <!--contenedor descripcion-->        
  11.                  <div  class="visible caja_seccion">
  12.                    
  13.                     <div  class="col-md-7">
  14.                       <!--Contenido 7 columnas-->
  15.                       </div>
  16.                    
  17.                     <div class="col-md-5">
  18.                       <!--Contenido 5 columnas-->
  19.                     </div>
  20.                    
  21.                  </div>              
  22.                  
  23.                  
  24.                  <!--contenedor más informacion-->        
  25.                  <div class="oculta caja_seccion">
  26.                    
  27.                     <div  class="col-md-7">      
  28.                       <!--Contenido 7 columnas-->      
  29.                       </div>
  30.                    
  31.                     <div class="imagen_seccion col-md-5">
  32.                       <!--Contenido 5 columnas-->
  33.                       </div>
  34.                    
  35.                  </div>
  36.   </div>

Código CSS:
Ver original
  1. #cabecera_seccion{ 
  2.     position: relative;
  3. }
  4. .caja_seccion{
  5.     position: absolute;
  6.     top: 0px;  
  7. }
  8. .caja_seccion.oculta{
  9.     visibility: hidden;
  10. }
  11. .caja_seccion.visible{
  12.     visibility: visible;
  13. }

¿hay alguna razón especial por lo que al hacer position:absolute al div contenedor ya deje de respetar estos tamaños de la rejilla?

Saludos y gracias a todos
  #2 (permalink)  
Antiguo 28/01/2014, 08:27
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Duda con posicionamiento absolute en rejilla de bootstrap

No sé cómo funciona Bootstrap, pero:

Cita:
Iniciado por JustinKO Ver Mensaje
¿hay alguna razón especial por lo que al hacer position:absolute al div contenedor ya deje de respetar estos tamaños de la rejilla?
No suena raro en absoluto.

Prueba a sacar totalmente ese elemento que tienes posicionado de forma absoluta, si el tamaño de las rejillas tampoco se respeta, obviamente ese será el problema, y, entiendo, que todo dependería del contenido. Si sacas elementos del flujo natural entonces ya no forman físicamente parte del documento.
  #3 (permalink)  
Antiguo 28/01/2014, 09:58
 
Fecha de Ingreso: junio-2012
Ubicación: Madrid
Mensajes: 339
Antigüedad: 11 años, 9 meses
Puntos: 47
Respuesta: Duda con posicionamiento absolute en rejilla de bootstrap

Hola pzin, muchas gracias por tu respuesta. La verdad que no me ha quedado claro del todo lo que me explicas, de todos modos partiendo de lo que me decías he seguido trasteando y al final he dado con el porqué. Sigo sin entender la base pero si he pillado la solución.

Voy a explicarlo:

Respecto al funcionamiento de bootstrap no es más que las clases .col-md-7 y .col-md-5 tienen una flotación a la izquierda y un porcentaje dependiendo del ancho:
Código CSS:
Ver original
  1. .col-md-7, .col-md-5{
  2. float: left;
  3. }
  4. .col-md-7 {
  5.     width: 58.3333%;
  6. }
  7. .col-md-5 {
  8.     width: 41.6667%;
  9. }

Y dicho esto;
He comprobado que cuando me varía el ancho es porque varía el contenido del interior de los divs con las clases en cuestión (.col-md-7 y .col-md-5).

Al parecer cuando le doy position:absolute el ancho del contenedor deja de tener el ancho del 100% y da un ancho dependiendo de los contenidos de los divs que tiene dentro.
Entonces los divs internos son calculados a un 58.3333% y un 41.6667% del div contenedor (.caja_seccion ). Por lo que será diferente dependiendo del ancho de éste.

Resumiendo: He dado forzado ancho fijo al div contenedor .caja_seccion (with: 100%) y se ha solucionado el problema.


Repito el código para con modificaciones para que se entienda mejor.

Código HTML:
Ver original
  1. <!--menu tabs-->
  2.   <ul class="nav nav-tabs">
  3.         <li class="active"><a href="#">Descripción</a></li>
  4.         <li ><a href="#">Más información</a></li>    
  5.       </ul>
  6.      
  7.      
  8.    <div id="cabecera_seccion">
  9.    
  10.     <!--************Este es el div que me aparece más ancho-->  
  11.     <!--contenedor descripcion-->  
  12.          
  13.          <div  class="visible caja_seccion">
  14.            
  15.                   <div  class="col-md-7">
  16.                  
  17.                     CONTENIDO 7 COLUMNAS - El contenido de este div de 7 columndas es más largo.
  18.                     </div>
  19.                  
  20.                   <div class="col-md-5">
  21.                     CONTENIDO 5 COLUMNAS
  22.                   </div>
  23.            
  24.          </div>              
  25.          
  26.          
  27.           <!--************Este es el div que me aparece más estrecho-->  
  28.          <!--contenedor más informacion-->
  29.                
  30.          <div class="oculta caja_seccion">
  31.            
  32.                   <div  class="col-md-7">      
  33.                     CONTENIDO 7 COLUMNAS .  más corto  
  34.                     </div>
  35.                  
  36.                   <div class="imagen_seccion col-md-5">
  37.                     CONTENIDO 5 COLUMNAS
  38.                     </div>
  39.            
  40.          </div>
  41.   </div>

Código CSS:
Ver original
  1. .col-md-7, .col-md-5{
  2. float: left;
  3. }
  4. .col-md-7 {
  5.     width: 58.3333%;
  6. }
  7.  
  8. .col-md-7, .col-md-5{
  9.     float:left;
  10. }
  11.  
  12.  
  13.  
  14. #cabecera_seccion{  
  15.     position: relative;
  16.        width: 100%;
  17. }
  18. .caja_seccion{
  19.     position: absolute;
  20.     top: 0px;
  21.  
  22.     width: 100%; /*Este es el ancho que he tenido que forzar para que funcione*/
  23.    
  24.  
  25. }
  26.  
  27.  
  28. .caja_seccion.visible{
  29.     visibility: hidden;
  30. }
  31. .caja_seccion.oculta{
  32.     visibility: visible;
  33. }


saludos y muchas gracias ;)
  #4 (permalink)  
Antiguo 28/01/2014, 22:42
Avatar de Pelipe  
Fecha de Ingreso: abril-2011
Ubicación: Nuestra Señora de La Paz
Mensajes: 90
Antigüedad: 12 años, 11 meses
Puntos: 4
Respuesta: Duda con posicionamiento absolute en rejilla de bootstrap

No uses visivility usa display: block; o display: none;

visivility solo lo hace invisible pero ocupa campo aunque no lo veas, display elimina del DOM el objeto.
  #5 (permalink)  
Antiguo 28/01/2014, 22:51
Avatar de Pelipe  
Fecha de Ingreso: abril-2011
Ubicación: Nuestra Señora de La Paz
Mensajes: 90
Antigüedad: 12 años, 11 meses
Puntos: 4
Respuesta: Duda con posicionamiento absolute en rejilla de bootstrap

Hola mira justo ahora estoy en un proyecto con Bootstrap hace semanas y he tenido algunos sobresaltos pero es por no conocer el uso adecuado de bootstrap.

Mira flaco, no entiendo muy bien tu problema porque ciertos datos que no das tengo que adivinarlos (sisisi, ya se aveces tampoco es facil explicar un problema), he mirado un poco tu codigo, pero segun mi experiencia para lo que deseas(solo ordenar un poco las pestañas y parrafos), no es necesario meterse con los float ni position de CSS(no hay que tocar eso).

La solución que explicas te traerias problemas mas adelante porque estas tocando la estructura como tal de Bootstrap y esa no es una buena practica.

El CSS sería:
Código CSS:
Ver original
  1. <style>
  2.     #cabecera_seccion{
  3.         /*position: relative;*/
  4.     }
  5.     .caja_seccion{
  6.         /*position: absolute;*/
  7.         /*top: 0px;  */
  8.     }
  9.     .caja_seccion.oculta{
  10.         visibility: hidden;
  11.     }
  12.     .caja_seccion.visible{
  13.         visibility: visible;
  14.     }
  15. </style>

en HTML seria:
Código HTML:
Ver original
  1. <div class="container"><!-- "container" Espaciador con padding de 15px por lados derecho e izquierdo-->
  2.     <div class="row"><!-- "row" usar siempre que se quiera separar como bloques y se respeten las columnas-->
  3.    
  4.         <!--################> Grupo de Pestañas 1-->
  5.         <div class="well col-md-6"><!-- "well" es un clase con fondo plomo con borde redondeado ayuda ver las columnas con borde e idetificarlas, una vez que todo este bien borrar esta clase del div-->
  6.         <ul class="nav nav-tabs"><!--menu tabs-->
  7.             <li class="active"><a href="#">Descripción</a></li>
  8.             <li ><a href="#">Más información</a></li>    
  9.         </ul>
  10.                 <div id="cabecera_seccion"><!--contenedor descripcion-->
  11.                     <div class="visible caja_seccion">
  12.                         <div class="well col-md-7">Contenido 7 columnas</div>
  13.                         <div class="well col-md-5">Contenido 5 columnas</div>
  14.                     </div>              
  15.                     <div class="oculta caja_seccion"><!--contenedor más informacion-->
  16.                         <div class="well col-md-7">Contenido 7 columnas</div>
  17.                         <div class="well imagen_seccion col-md-5">Contenido 5 columnas</div>
  18.                     </div>
  19.                 </div>
  20.         </div>
  21.        
  22.         <!--################> Grupo de Pestañas 2-->
  23.         <div class="well col-md-6">
  24.         <ul class="nav nav-tabs">
  25.             <li class="active"><a href="#">Descripción</a></li>
  26.             <li ><a href="#">Más información</a></li>    
  27.         </ul>
  28.                 <div id="cabecera_seccion">
  29.                     <div class="visible caja_seccion">
  30.                         <div class="well col-md-7">Contenido 7 columnas</div>
  31.                         <div class="well col-md-5">Contenido 5 columnas</div>
  32.                     </div>              
  33.                     <div class="oculta caja_seccion">
  34.                         <div class="well col-md-7">Contenido 7 columnas</div>
  35.                         <div class="well imagen_seccion col-md-5">Contenido 5 columnas</div>
  36.                     </div>
  37.                 </div>
  38.         </div>
  39.        
  40.     </div>
  41. </div>

usa display no visibility:

Aqui hay un ejemplo a descargar acerca de tu caso:
http://ge.tt/54NwSvG1/v/0
  #6 (permalink)  
Antiguo 29/01/2014, 02:57
 
Fecha de Ingreso: junio-2012
Ubicación: Madrid
Mensajes: 339
Antigüedad: 11 años, 9 meses
Puntos: 47
Respuesta: Duda con posicionamiento absolute en rejilla de bootstrap

Hola Pelipe, muchas gracias por tus comentarios y por el archivo que has subido, lo guardaré porque me puede ser útil.

De todos modos, creo que no me expliqué bien (la verdad que fue un lío hacerlo). Lo que tú me planteas son dos bloques distintos (lo que has llamado grupo de pestañas).
En mi caso, si te fijas en el código, es solo un grupo con dos pestañas (.nav-tavs) , una pestaña "descripción" con su div de contenido (.caja-sección correspondiente) y otra pestaña "más información" con su div .caja sección correspondiente.
Luego con javaScript se le añade o se le quita la clase .oculta o .visible a cada div.caja_seccion dependiendo de la pestaña (.nav-tab) que pinches. De ahí el visibility

He usado visiblility en vez de display para que no se mueva el contenido de abajo de estos divs cuando hay menso contenido en uno que en otro.

Porque esto que te digo ¿viene ya programado en bootstrap y no tendría que haberlo hecho?

Saludos y muchas gracias de nuevo
  #7 (permalink)  
Antiguo 29/01/2014, 06:24
Avatar de Pelipe  
Fecha de Ingreso: abril-2011
Ubicación: Nuestra Señora de La Paz
Mensajes: 90
Antigüedad: 12 años, 11 meses
Puntos: 4
Respuesta: Duda con posicionamiento absolute en rejilla de bootstrap

JustinKO no hay problema con que sean dos grupos de pestaña es solo ejemplo solo le quitas la col-md-6 a col-md12.

¿esto ya viene programado en Bootstrap3? Porsupuesto que si. No necesitas tus clases ocultar, ni visible, ni visibility, ni display, ni un linea de javascript o jquery.

ejemplo HTML5 no necesita clases nuevas:

Código HTML:
Ver original
  1. <div class="container">
  2. <div class="row">
  3.  
  4. <div class="well col-md-12">
  5.     <ul class="nav nav-tabs">
  6.         <li class="active"><a href="#inicio" data-toggle="tab">Inicio</a></li>
  7.         <li><a href="#usuario" data-toggle="tab">Usuario</a></li>
  8.         <li><a href="#forosdelweb" data-toggle="tab">ForosDelWeb</a></li>
  9.     </ul>
  10.     <div class="tab-content">
  11.         <div id="inicio" class="tab-pane active"><p>Pestaña de Inicio.</p></div>
  12.         <div id="usuario" class="tab-pane"><p>Usuario JustinKO trabajando con Bootstrap3.</p></div>
  13.         <div id="forosdelweb" class="tab-pane"><p>Contenido de ForosDelWeb.com comunidad de desarrolladores Web.</p></div>
  14.     </div>
  15.     </div>
  16.  
  17. </div>
  18. </div>

pero es mejor que descargues este nuevo ejemplo que he preparado (suponiedo que hayas visto el otro enlace que te deje):
http://ge.tt/1LlhywG1/v/0

Última edición por Pelipe; 29/01/2014 a las 06:39 Razón: Correcion de CSS a MHTL
  #8 (permalink)  
Antiguo 29/01/2014, 07:32
 
Fecha de Ingreso: junio-2012
Ubicación: Madrid
Mensajes: 339
Antigüedad: 11 años, 9 meses
Puntos: 47
Respuesta: Duda con posicionamiento absolute en rejilla de bootstrap

Bien!!!!! funciona!!!! qué limpio el código y todo se queda ahora!!!



Por cierto ¿dónde te has documentado para esto?, porque en su día estuve leyendo la documentación de bootstrap y no vi nada al respecto (la verdad que mi inglés es muy limitado y es posible que se me pasara)

Cita:
pero es mejor que descargues este nuevo ejemplo que he preparado (suponiedo que hayas visto el otro enlace que te deje):
Por supuesto que lo vi y lo estuve estudiando aunque no me di cuenta de esto que me has dicho ahora


De verdad muchísimas gracias.
  #9 (permalink)  
Antiguo 29/01/2014, 10:30
Avatar de Pelipe  
Fecha de Ingreso: abril-2011
Ubicación: Nuestra Señora de La Paz
Mensajes: 90
Antigüedad: 12 años, 11 meses
Puntos: 4
Respuesta: Duda con posicionamiento absolute en rejilla de bootstrap

Cita:
Iniciado por JustinKO Ver Mensaje
Bien!!!!! funciona!!!! qué limpio el código y todo se queda ahora!!!
Me alegro que te haya servido.

Cita:
Por cierto ¿dónde te has documentado para esto?, porque en su día estuve leyendo la documentación de bootstrap y no vi nada al respecto (la verdad que mi inglés es muy limitado y es posible que se me pasara)
En este enlace esta la traduccion de Bootstrap3 en Idioma Español(yo empece con Bootstrap3 no conozco versiones anteriores):
http://www.oneskyapp.com/docs/bootstrap/es
Aunque no esta el ejemplo del meollo del problema, ese no mas se descubre cuando convives con bootstrap semanas y muchos quebraderos de cabeza(es que no todo esta documentado)

A mi encanta Bootstrap tiene muchas funciones y la web adaptable con esta libreria se facilita.

Ahora si es justo que lleve el titulo de: [SOLUCIONADO].

Saludos(hala Madrid).
  #10 (permalink)  
Antiguo 29/01/2014, 12:34
 
Fecha de Ingreso: junio-2012
Ubicación: Madrid
Mensajes: 339
Antigüedad: 11 años, 9 meses
Puntos: 47
Respuesta: Duda con posicionamiento absolute en rejilla de bootstrap

La verdad que sí, es el primer trabajo que hago con ello y me parece que está muy bien, te facilita una barbaridad el trabajo, sobre todo con el tema responsive.

un saludo y gracias de nuevo. (aúpa Atleti!!)
  #11 (permalink)  
Antiguo 29/01/2014, 14:09
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Duda con posicionamiento absolute en rejilla de bootstrap

De aquí a final de año todo Boobstrap.

(vivarbeti!)

Etiquetas: bootstrap, contenido, divs, posicionamiento, rejilla, tamaño
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 11:16.