Foros del Web » Creando para Internet » CSS »

ubicar div debajo de otro

Estas en el tema de ubicar div debajo de otro en el foro de CSS en Foros del Web. Estimados, voy a tratar de explicar lo mas claro posible mi dificultad: Tengo una barra de navegacion y debajo un carousel. Por encima del carousel ...
  #1 (permalink)  
Antiguo 26/11/2015, 06:04
Avatar de chacabuco  
Fecha de Ingreso: octubre-2010
Ubicación: Buenso Aires
Mensajes: 85
Antigüedad: 8 años, 9 meses
Puntos: 0
ubicar div debajo de otro

Estimados, voy a tratar de explicar lo mas claro posible mi dificultad:
Tengo una barra de navegacion y debajo un carousel. Por encima del carousel hay un div q contiene una imagen. Hasta ahi todo bien para pantallas grandes.
Ahora cuando aplico @media screen and (min-width:768px) quiero que esa imagen que está por encima de carousel se ubique en una nueva posición que es entre la barra de navegación y el carousel.
Armé esta imagen para poder explicarlo mejor.

Los estilos de ése div son:

.bt-sorteo-home {
float: left;
position: absolute;
left: 69%;
top: 7%;
z-index: 20;
}

La pregunta es:
Cómo debo modificarlos para que en (min-width:768px) se ubique como yo pretendo?

Agradeceré cualquier tipo de ayuda.
Siempre encuentro las mejores respuestas en este foro
Saludos
Marisa.-
  #2 (permalink)  
Antiguo 26/11/2015, 12:27
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.435
Antigüedad: 11 años, 5 meses
Puntos: 1065
Respuesta: ubicar div debajo de otro

Es realmente necesario usar position:absolute?

Con el código que muestras nosotros no entendemos ni podemos ver cual es el problema que tienes.... y así como adivinos no andamos muy bien.
  #3 (permalink)  
Antiguo 27/11/2015, 06:30
Avatar de chacabuco  
Fecha de Ingreso: octubre-2010
Ubicación: Buenso Aires
Mensajes: 85
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: ubicar div debajo de otro

Hola Arturo, gracias por tu ayuda.
Estoy usando boostrap, creo que ese dato es importante.
Copio el codigo HTML (resumido)

<nav>
..............................
</nav>

<div class="bt-sorteo-home">
<a href="#"><img src="img/bt-sorteo.gif" alt="sorteo"></a>
</div>

<div class="carousel slide" id="carousel-534568">
..............................
</div>

y luego el CSS que ya había mostrado en el mensaje anterior.
En todo caso, será que puedo enviarte el link x privado?
De nuevo muchas gracias por tu ayuda.
Saludos.
  #4 (permalink)  
Antiguo 01/08/2016, 23:40
 
Fecha de Ingreso: mayo-2016
Mensajes: 7
Antigüedad: 3 años, 2 meses
Puntos: 1
Respuesta: ubicar div debajo de otro

Hola que tal mira, una de las sugerencias que te puedo dar, aprobechando que utilizas bootstrap, es utilizar su sistema de regillas, y la estructura de esto es la siguiente,

<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>

recuerda que el sistema de grillas solo genera diviciones de 12 columnas y para hacer lo que pretendes podrias hacer algo como esto

<div class="container">
<div class="row">
<div class="col-md-4 col-lg-12"></div>
<div class="col-md-4 col-lg-12"></div>
<div class="col-md-4 col-lg-12"></div>
</div>
</div>
  #5 (permalink)  
Antiguo 03/08/2016, 22:42
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 4 años, 1 mes
Puntos: 263
Respuesta: ubicar div debajo de otro

Aqui te hice una muestra, creo es lo que buscas hacer:

Código HTML:
Ver original
  1. <div class="row">
  2.     <div class="container">
  3.       <div class="col-lg-12 coll-md-12 barra">
  4.         <!--AQUI BARRA DE NAVEGACION-->
  5.       </div>
  6.      
  7.       <div class="row">
  8.         <div class="col-lg-4 col-md-12 pull-right imagen">
  9.           <!--AQUI LA IMAGEN-->
  10.         </div>
  11.       </div>
  12.      
  13.       <div class="row">
  14.           <!--AQUI EL CARROUSEL-->
  15.       </div>
  16.   </div>
  17. </div>

http://codepen.io/anon/pen/zBmxvy

al cerrar un poco la ventana se adaptan los div a su tamaño, pero la cosa va mas allá con bootstrap
__________________
[email protected]
HITCEL
  #6 (permalink)  
Antiguo 04/08/2016, 06:14
Avatar de rodrypaladin
Moderador
 
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 9 años, 4 meses
Puntos: 468
Respuesta: ubicar div debajo de otro

Si te quedas con el ejemplo de @xfxstudios creo que es más correcto al contrario, primero el container, y dentro los row. Y otro apunte: si ponemos la clase col-md-12, la clase superior col-lg-12 también será de 12 columnas. Y si ponemos col-sm-12, las clases superiores col-md-12 y col-lg-12 también serán de 12 columnas. Tampoco dejaría en el ultimo row sin meter dentro un div con indicando la cantidad de columnas

Código HTML:
Ver original
  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-12 barra"></div>
  4.         <!--AQUI BARRA DE NAVEGACION-->
  5.     </div>
  6.  
  7.     <div class="row">
  8.         <div class="col-md-12 col-lg-4 pull-right imagen">
  9.             <!-- AQUI LA IMAGEN -->
  10.         </div>
  11.        
  12.         <div class="row">
  13.             <div class="col-md-12">
  14.                 <!--AQUI EL CARROYSEL-->
  15.             </div>
  16.         </div>
  17.     </div>
  18. </div>
__________________
No te olvides de dar +1 a quien te echa un cable ;)

Etiquetas: bootstrap
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 18:18.