[AYUDA] Un div debajo de otro

EsLoQueHiHa · 10 Dic 2013

A ver si algún diseñador o maquetador me puede echar una manita.

Estoy maquetando la nueva home de mi web y tengo las categorías separadas. Funciona todo correctamente salvo que no sé cómo hacer para que en la plantilla me monte un div debajo de otro en lugar de uno a continuación de otro.

La web de pruebas donde estoy maquetando es esta: Blog de Pruebas 666 | NUEVA PORTADA
Y cada categoría está con un div llamado boxes y numerados correlativamente. La idea es que cada div quede uno debajo de otro, me estoy volviendo loca, seguro que es súper fácil pero no lo consigo.

Emanuel Andrei · 10 Dic 2013

Entonces lo que tu quieres es las lista de peliculas en vertical en vez de horizontal? O que todo este de igual forma?

Igualmente, podrias hacer div dentro de el div base, y dandole los px necesarios al div correspondiente.

EsLoQueHiHa · 10 Dic 2013

EmiLL dijo:
Entonces lo que tu quieres es las lista de peliculas en vertical en vez de horizontal? O que todo este de igual forma?

Igualmente, podrias hacer div dentro de el div base, y dandole los px necesarios al div correspondiente.

Facundo · 10 Dic 2013

Hola, antes de ver eso, te recomiendo meter a cada uno de los item masonry-brick en un gran div contenedor. Porque ahora mismo, cada uno está suelto y es dificil trabajar con las categorías que están abajo solapadas.

A la vez, las categorías metelas en un div con el mismo ID o class, no hagas box1, box2, box3, porque cada box tiene las mismas características.

Otra cosa que no me cierra, es por que en cada item masonry-brick hay un <header>, el header tiene que estar una sola vez al inicio de la página, conteniendo el t´tiulo de la página, links a CSS, .JS, etc..

También estás mesclando boxes con item masonry-brick, deberían de ir todos los boxes (los divs de las categoías) y luego si, en un container (un div) cada item masonry-brick

Saludo!

EDITO: Acabo de ver el último mensaje. La estructura tendría que ser:

HTML:

<div id="container">        
       <div id="container_interno">       
               <div id="box_categoria">            
                            NOMBRE CATEGORIA        
              </div>       
               <div id="box_carteleras">            
                            PELI            
                            PELI            
                            PELI            
                            PELI        
              </div>    
       </div>    
      <div id="container_interno">       
               <div id="box_categoria">            
                            NOMBRE CATEGORIA        
              </div>       
               <div id="box_carteleras">            
                            PELI            
                            PELI            
                            PELI            
                            PELI        
              </div>    
       </div>
</div>

Una vez armada esa estructura, empezás a acomodar todo con css, el gran container te permite acomodar todo lo de adentro de forma relativa a el, y los "container internos" te permite acomodar el nombre de la categoría y las películas en si en forma relativa a este último.

No uses nada absoluto, si no todo relativo al div que contiene cada cosa, así nada se solapa.

Cada cartel de peli o serie, agregale el float (left) para que se acomoden una al lado de la otra, y los divs que contienen, tienen que tener un ancho, para que el margin: 0 auto; funcione.

Saludos!

Emanuel Andrei · 10 Dic 2013

Vale, es facil.

Haces un div principal que tenga la posicion que tu quieres, y despues los 4 div que vaya dentro del div principal.

Algo asi:

Insertar CODE, HTML o PHP:

<div class="el nombre de tu div principal">
       <div class="nombre especifico para que este posicionado bien en el div principal">
            <div class="lista">

		<div class="nombre del primer div">
		tu contenido
		</div>

		<div class="nombre del segundo div">
		tu contenido
		</div>

		<div class="nombre del tercer div">
		tu contenido
		</div>

                <div class="nombre del cuarto div">
		tu contenido
		</div>

	   </div>
	</div>
</div>

EsLoQueHiHa · 10 Dic 2013

Muchas gracias Emill!!

Voy a intentarlo a ver si lo consigo. Dentro de cada div va un loop con los 5 elementos. Espero no romper nada.

EmiLL dijo:
Vale, es facil.

Haces un div principal que tenga la posicion que tu quieres, y despues los 4 div que vaya dentro del div principal.

Algo asi:

Insertar CODE, HTML o PHP:

<div class="el nombre de tu div principal"> <div class="nombre especifico para que este posicionado bien en el div principal"> <div class="lista"> <div class="nombre del primer div"> tu contenido </div> <div class="nombre del segundo div"> tu contenido </div> <div class="nombre del tercer div"> tu contenido </div> <div class="nombre del cuarto div"> tu contenido </div> </div> </div> </div>

mrv89 · 10 Dic 2013

Tienes la pura escoba con position absolute y relative, jajaj, trata de ocupar menos eso..

EsLoQueHiHa · 10 Dic 2013

Hola!!

Gracias por la info!! La verdad es que estoy utilizando piezas de una plantilla que ya uso en Descargar MOLA: Series y películas en español pero estoy adaptando a este caso específico. No sé apenas nada de maquetación y voy probando hasta que doy con la tecla

Intentaré a ver si consigo hacer lo que me dices. Gracias!!

Facundo dijo:
Hola, antes de ver eso, te recomiendo meter a cada uno de los item masonry-brick en un gran div contenedor. Porque ahora mismo, cada uno está suelto y es dificil trabajar con las categorías que están abajo solapadas.

A la vez, las categorías metelas en un div con el mismo ID o class, no hagas box1, box2, box3, porque cada box tiene las mismas características.

Otra cosa que no me cierra, es por que en cada item masonry-brick hay un <header>, el header tiene que estar una sola vez al inicio de la página, conteniendo el t´tiulo de la página, links a CSS, .JS, etc..

También estás mesclando boxes con item masonry-brick, deberían de ir todos los boxes (los divs de las categoías) y luego si, en un container (un div) cada item masonry-brick

Saludo!

EDITO: Acabo de ver el último mensaje. La estructura tendría que ser:

HTML:

<div id="container"> <div id="container_interno"> <div id="box_categoria"> NOMBRE CATEGORIA </div> <div id="box_carteleras"> PELI PELI PELI PELI </div> </div> <div id="container_interno"> <div id="box_categoria"> NOMBRE CATEGORIA </div> <div id="box_carteleras"> PELI PELI PELI PELI </div> </div> </div>

Una vez armada esa estructura, empezás a acomodar todo con css, el gran container te permite acomodar todo lo de adentro de forma relativa a el, y los "container internos" te permite acomodar el nombre de la categoría y las películas en si en forma relativa a este último.

No uses nada absoluto, si no todo relativo al div que contiene cada cosa, así nada se solapa.

Cada cartel de peli o serie, agregale el float (left) para que se acomoden una al lado de la otra, y los divs que contienen, tienen que tener un ancho, para que el margin: 0 auto; funcione.

Saludos!

---------- Post agregado el 10-dic-2013 hora: 15:02 ----------

Chicos, he hecho lo que me ha dicho [MENTION=49777]EmiLL[/MENTION] y se sigue mostrando igual, cada div de categoria al lado del otro. Y lo que propone [MENTION=89]Facundo[/MENTION] no lo entiendo bien.

Sospecho que es porque los divs de seccion no están bien puestos en la CSS pero no sé qué propiedades deben tener.
¿Una ayuda antes de que lo deje por imposible?

GRACIAS!!

Emanuel Andrei · 10 Dic 2013

Nada se debe dejar por imposible.

Obviamente el div en html, no te lo va a poner bien. Haciendo como te dije yo, te lo deja mas facil de manejar a la hora de manejar el codigo html. Para que el div tome vida, tienes que jugar con el .css que da todo el posicionamiento y el aspecto a la web.

EsLoQueHiHa · 10 Dic 2013

EmiLL dijo:
Nada se debe dejar por imposible.

Obviamente el div en html, no te lo va a poner bien. Haciendo como te dije yo, te lo deja mas facil de manejar a la hora de manejar el codigo html. Para que el div tome vida, tienes que jugar con el .css que da todo el posicionamiento y el aspecto a la web.

Creo que me supera

Mis conocimientos de maquetación CSS y HTML se han visto exprimidos totalmente esta tarde

¿Si lo paso a la zona de negocios, me echarías una mano? ¿Qué me cobrarías por poner los 4 divs uno debajo del otro?
Gracias!

Emanuel Andrei · 10 Dic 2013

EsLoQueHiHa dijo:
Creo que me supera
Mis conocimientos de maquetación CSS y HTML se han visto exprimidos totalmente esta tarde

¿Si lo paso a la zona de negocios, me echarías una mano? ¿Qué me cobrarías por poner los 4 divs uno debajo del otro?
Gracias!

No hace falta.

Busca en el .css los valores del " item " y juega con eso.

krusty72 · 10 Dic 2013

Ya te dieron la estructura en html, ahora lo que debes hacer es jugar con el css.

La clave está que cada div debe tener el float:left, y un ancho (width:100%), esto hará que el siguiente div no tenga espacio para estar al lado y lo mandará abajo.

EsLoQueHiHa · 10 Dic 2013

krusty72 dijo:
Ya te dieron la estructura en html, ahora lo que debes hacer es jugar con el css.

La clave está que cada div debe tener el float:left, y un ancho (width:100%), esto hará que el siguiente div no tenga espacio para estar al lado y lo mandará abajo.

LOL

Tan sencillo y tan bloqueada estoy que llevo dos días dándole sin resultados buscando diferentes maneras.

Voy a probar, ¡muchas gracias a todos por las pistas!

nthego:

---------- Post agregado el 10-dic-2013 hora: 17:31 ----------

Actualizo: tengo bastante acotado cual es el origen del problema, y está en el div .item que hace que se solapen las cajas, pero por más que lo intento no consigo solucionarlo.

El código de la plantilla es algo como esto:

<div id="content">
<div id="boxes">
<div id="seccion1">
<div id="titulo_seccion1">
<h2 class="entry-title">Películas de Estreno en cines</h2>
</div>
<div id="contenido_seccion1">

while($peliculas->have_posts()) : $peliculas->the_post(); ?>

<div class="item">Thubnail, Título, etc.</div>

<?php endwhile; ?>



</div>
</div>



</div> 
</div> 

La lista y las secciones tienen estas propiedades:

#lista { margin:auto; width:100%; align:left;}
#seccion1 { margin:auto; width:100%; float:left; }

Y el div item n la CSS tiene estas propiedades:

.item {
background:#f8f8f5;
width: 204px;
margin:10px;
position:relative;
left:-9999px;
top:-9999px;
padding:10px;
border:3px solid #fff;
overflow:hidden;
box-shadow:0 0 2px #dbdad2 inset, 0 0 5px #cac9bd;
text-shadow:1px 1px 0px #fff;
word-wrap: break-word;
}

He probado a jugar con las propiedades left, top y position, pero no hay manera, no doy con la tecla correcta.

Así es como se ve con el div item

Y así es como se ve sin ese div, y como debería quedar de ordenadito una vez aplique los estilos.

Ya no sé qué hacer, seguro que es algo muy sencillo que tengo delante de los ojos pero no hay manera.