Ayuda!! Alinear divs, saltos de linea horizontalmente con un float

psicopatia · #1 (**permalink**) 20/04/2010, 16:51

Hola a todos, a ver si me podeis echar una mano, o las dos al cuello...

No tengo mucha idea de capas, pero lo intento no es facil. Tengo un problemilla q seguro es sencillo d solucionar:

Quiero conseguir esto:

Sin embargo lo q consiguo es esto otro

Me gustaria q la repeticion de divs manteniese las lineas horizontales y que el div con float right se ajustase el alto a las lineas o algo.

Aqui muestro mi css:

#contenedor {
width: 980;
height:auto;
}

#banner {
float:right;
width:300px;
height:250px;
z-index:1;
margin: 5px;
}

#videos {
float:left;
width:160px;
height:120px;
z-index:1;
margin: 5px;
}

Y como lo pongo:

<div id="contenedor">
<div id="banner">300x250</div>
<div id="videos"></div>
<div id="videos"></div>
<div id="videos"></div>
<div id="videos"></div>
<div id="videos"></div>
<div id="videos"></div>
<div id="videos"></div>
<div id="videos"></div>
<div id="videos"></div>
<div id="videos"></div>
<div id="videos"></div>
<div id="videos"></div>
<div id="videos"></div>
<div id="videos"></div>
<div id="videos"></div>
<div id="videos"></div>.....
</div>

Aqui muestro una pagina q realiza lo que quiero:

http://www.pornhub.com/video?o=mr&page=2

Agradeceria una pequeña ayuda.
Muchisimas gracias

sebaweb · #2 (**permalink**) 20/04/2010, 16:55

mm yo no soy de usar tablas, pero en este caso te recomendaria usarlas porque son muchos bloques.

psicopatia · #3 (**permalink**) 20/04/2010, 16:57

Yo tb soi d tablas pero no puedo conseguir ningun tipo de celda en forma de "L"
por eso divs.

La repeticion de los videos la ago automatica por eso no importa.

jomaruro · #4 (**permalink**) 21/04/2010, 15:26

Hola:

El problema que tienes es que el elemento flotado a la derecha tiene un height inferior a lo que ocupan las dos primeras filas de los flotados a la izquierda, por lo que el primer elemento de la tercera fila "tropieza" con la esquina inferior de la segunda fila.

Cita:

Iniciado por psicopatia

#banner {
float:right;
width:300px;
height:250px;
z-index:1;
margin: 5px;
}

#videos {
float:left;
width:160px;
height:120px;
z-index:1;
margin: 5px;
}

Debes modificar los height hasta que coincidan y no "tropiecen".

Otra cosa, los div's flotados a la izquierda ya que se repiten no pueden ir definidos como id, deben ir como class.

Saludos.

psicopatia · #5 (**permalink**) 21/04/2010, 15:49

Hola:

Ya habia probado eso de los tamaños, y eso me obliga a utilizar un tamaño demasiado pequeño para las imagenes de los videos. Que no me importaria ajustarme pero ya empezamos con capadas al diseño y deformidades.

Aun asi utilizando este css que tendria q encajar perfecto, las imagenes no siguen por debajo del float right.

#banner {
float:right;
width:300px;
height:250px;
z-index:1;
margin: 10px;
}

.videos {
float:left;
width:140px;
height:115px;
z-index:1;
margin: 10px;
}

Lo mas parecido a la perfeccion que e encontrado es situar la altura d id="banner" a 248px y las imagenes a 114px y bno q mas puedo decir. Por q a 248 y no 250? Por q no acen lo q quiero....

#banner {
float:right;
width:300px;
height:248px;
z-index:1;
margin: 10px;
}

.videos {
float:left;
width:140px;
height:114px;
z-index:1;
margin: 10px;
}

Pense q esto de las capas era algo mas intuitivo y facil, Ahora le dare vueltas a todo a ver si consigo algo q me guste.

Aun asi muchas gracias por la ayuda, eso d la class me lo imaginaba pero solo era un ej basico d colocacion.

PSd: en la pagina de ej que puse me doi cuenta q tampoco lo tienen clavado.

jomaruro · #6 (**permalink**) 22/04/2010, 13:43

Hola:

Tienes razón le paso lo contrario, la imagen de la derecha es mayor que las de la izquierda. Mira el código fuente de la página de ejemplo para ver como lo hacen, quizá te de una idea.

Saludos.

LuisdaviD · #7 (**permalink**) 22/04/2010, 17:26

Hola, yo probe así y me resultó bien en el firefox:

cambie el width: 850px del contenedor para alinearlo con el resto de las cajas

y el width:330px del banner para ajustarlo al tamaño de las cajas que están debajo.

Código HTML:

<html>
<head>
<style type="text/css">
#contenedor {
width: 850px;
height:auto;
}

#banner {
float:right;
width:330px;
height:250px;
z-index:1px;
margin: 5px;
background-color:red;
}

.videos {
float:left;
width:160px;
height:120px;
z-index:1px;
margin: 5px;
background-color:blue;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="banner">300x250</div>
<div class="videos"></div>
<div class="videos"></div>
<div class="videos"></div>
<div class="videos"></div>
<div class="videos"></div>
<div class="videos"></div>
<div class="videos"></div>
<div class="videos"></div>
<div class="videos"></div>
<div class="videos"></div>
<div class="videos"></div>
<div class="videos"></div>
<div class="videos"></div>
<div class="videos"></div>
<div class="videos"></div>
<div class="videos"></div>
</div>
</body>
</html>

psicopatia · #8 (**permalink**) 24/04/2010, 15:07

Bno conseguido!!

Tras darle vueltas y vueltas creo q empiezo a entender a los divs.

La perfeccion existe tanto para explorer como para fox, tocando un poco el diseño
he conseguido q encage.

Despues de multiples rayadas y tirar de calculadora resolvi de la forma facil, aqui esta:

#contenedor {
width:960;
height:auto;
z-index:1;
margin:0px;
}

#apDiv1 {
float:right;
width:310px;
height:260px;
z-index:1;
margin:5px;
background-color:#808080;

}
.video {
background-color:#c0c0c0;
float:left;
width:310px;
height:125px;
z-index:1;
margin:5px;
}

Bno en fin solo añadir q un px es un px en to los laos y q los bordes nunca ayudan XDDD

He ampliado la anchura a 310px para poder meter los detalles de información de los videos, pero tb se puede cuadrar sin ellos.

Actualizare el comentario para q se vea el resultado poniendo un link.

Muchas gracias a todos por la ayuda.