Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Ayuda!! Alinear divs, saltos de linea horizontalmente con un float en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/04/2010, 17:51
 
Fecha de Ingreso: abril-2010
Mensajes: 26
Antigüedad: 7 años, 7 meses
Puntos: 0
Ayuda!! Alinear divs, saltos de linea horizontalmente con un float

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

Última edición por psicopatia; 21/04/2010 a las 08:20
  #2 (permalink)  
Antiguo 20/04/2010, 17:55
Avatar de sebaweb  
Fecha de Ingreso: abril-2009
Mensajes: 95
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: Alinear div con un float

mm yo no soy de usar tablas, pero en este caso te recomendaria usarlas porque son muchos bloques.
  #3 (permalink)  
Antiguo 20/04/2010, 17:57
 
Fecha de Ingreso: abril-2010
Mensajes: 26
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Alinear div con un float

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.
  #4 (permalink)  
Antiguo 21/04/2010, 16:26
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Ayuda!! Alinear divs, saltos de linea horizontalmente con un float

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 Ver Mensaje

#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.

  #5 (permalink)  
Antiguo 21/04/2010, 16:49
 
Fecha de Ingreso: abril-2010
Mensajes: 26
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Ayuda!! Alinear divs, saltos de linea horizontalmente con un float

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.

Última edición por psicopatia; 22/04/2010 a las 08:27
  #6 (permalink)  
Antiguo 22/04/2010, 14:43
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Ayuda!! Alinear divs, saltos de linea horizontalmente con un float

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.

  #7 (permalink)  
Antiguo 22/04/2010, 18:26
Avatar de LuisdaviD  
Fecha de Ingreso: octubre-2006
Mensajes: 74
Antigüedad: 11 años, 1 mes
Puntos: 2
Respuesta: Ayuda!! Alinear divs, saltos de linea horizontalmente con un float

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> 
  #8 (permalink)  
Antiguo 24/04/2010, 16:07
 
Fecha de Ingreso: abril-2010
Mensajes: 26
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Ayuda!! Alinear divs, saltos de linea horizontalmente con un float

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.

Última edición por psicopatia; 24/04/2010 a las 16:15

Etiquetas: alinear, float, horizontalmente, linea, saltos
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 20:18.