Foros del Web » Creando para Internet » CSS »

Problema con el float left

Estas en el tema de Problema con el float left en el foro de CSS en Foros del Web. No se exactamente como contar mi problema, así que opto por ponerles una imagen: Básicamente, todos los divs están en float left, pero lo que ...
  #1 (permalink)  
Antiguo 17/07/2011, 13:36
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 8 años, 8 meses
Puntos: 19
Problema con el float left

No se exactamente como contar mi problema, así que opto por ponerles una imagen:


Básicamente, todos los divs están en float left, pero lo que quiero es que la 3ra y 4rta capa, se situen todo lo arriba que puedan (sin coger de referencia a la capa más larga). Todas las capas están en relativo.

Es posible?
Gracias a todos =)
  #2 (permalink)  
Antiguo 17/07/2011, 13:43
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 6 años, 7 meses
Puntos: 64
Respuesta: Problema con el float left

deja el html y el css de esas partes... asi lo podemos revisar =)

por lo q veo es como q hay un contenedor de los 3 bloques de arriba y eso impide q suban las de abajo...

pero como dije antes, deja los codigos para mas seguirdad ...

saludos!
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #3 (permalink)  
Antiguo 17/07/2011, 13:54
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 8 años, 8 meses
Puntos: 19
Respuesta: Problema con el float left

No no hay un bloque. La 4rta capa coge de referencia la capa más larga (este caso la 3ra), cuando a mi me gustaría que se pusiera lo más arriba posible (debajo de la 1)

El código es este:

Código:
 
  <!-- PDF's -->
  <div id="pdf-llistat"> <div align="center"><img src="imgs/pdf/borrar-1.jpg" width="192" height="221" />    </div>
    <div id="pdf-llistat-blanc"> <div align="left" class="news-text"> <div align="justify">
    El monestir de Sant Pere de Rodes fou una abadia benedictina de l'antic comtat d'Empúries, dins els límits del bisbat de Girona, situada a l'actual terme     municipal del Port de la Selva (Alt Empordà).      
    </div>     </div>     </div>
    <div id="pdf-llistat-degradat"></div>
  </div>
Hay 3 divs.

#pdf-llistat: Lleva todos los paddings, me sirve de "contenedor" de la imagen y del texto posterior.

#pdf-llistat-blanc: Es el cuadrado blanco que contiene el texto.

#pdf-llistat-degradat: lleva el degradado de abajo

Todos ellos se repiten tantas veces como documentos hayan, y la idea es que se situaran solos en su posición.

El texto de estos divs:

Cita:
#pdf-llistat {
width:192px;
padding-left:28px;
padding-right:20px;
padding-top:15px;
padding-bottom:15px;
float:left;
}

#pdf-llistat-blanc {
width:192px;
padding-top:05px;
padding-bottom:05px;
float:left;
background-color:#FFFFFF;
}

#pdf-llistat-degradat {
width:192px;
float:left;
height:8px;
background-image:url(../imgs/degradat.gif);
float:left;
}
Gracias por la ayuda =)
  #4 (permalink)  
Antiguo 17/07/2011, 13:57
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 8 años, 8 meses
Puntos: 19
Respuesta: Problema con el float left

Pongo una segunda imagen por si es de ayuda.
Esto es lo que pasa si a la tercera capa le reduzco el texto.

  #5 (permalink)  
Antiguo 17/07/2011, 14:16
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 6 años, 7 meses
Puntos: 64
Respuesta: Problema con el float left

perdon de nuevo, una pregunta ya subiste la pagina al servidor???.. si es asi podrias darme el link?? porfas.. asi seria mas facil revisar..

si no lo tenes subido, entonces deja el codigo entero completo del html y el css

gracias =)
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #6 (permalink)  
Antiguo 17/07/2011, 14:25
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 8 años, 8 meses
Puntos: 19
Respuesta: Problema con el float left

Al contrario, gracias a ti.

La web que me da problemas la he colgado en la siguiente dirección:

http://www.terramar.org/gironactiva/a-escolar.php

Y la hoja de estilos la puedes consultar aquí:

http://www.terramar.org/gironactiva/estil/estil.css
  #7 (permalink)  
Antiguo 17/07/2011, 15:14
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 6 años, 7 meses
Puntos: 64
Respuesta: Problema con el float left

bueno chrishxc , tu error esta en q estas repitiendo las ID , y eso no se puede hacer, deberas cambiar de ID a CLASS

En el Html

tenes asi:


<div id="pdf-llistat">
<div id="pdf-llistat-blanc">
<div id="pdf-llistat-degradat">

te debe quedar asi:

<div class="pdf-llistat">
<div class="pdf-llistat-blanc">
<div class="pdf-llistat-degradat">

y en el CSS

#pdf-llistat:
#pdf-llistat-blanc
#pdf-llistat-degradat

te deben quedar asi:

.pdf-llistat:
.pdf-llistat-blanc
.pdf-llistat-degradat


Y LISTO PROBLEMA SOLUCIONADO!!!

SALUDOS =)
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>

Última edición por GAST0N; 17/07/2011 a las 15:27
  #8 (permalink)  
Antiguo 17/07/2011, 15:29
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 8 años, 8 meses
Puntos: 19
Respuesta: Problema con el float left

Pues no sé si estoy haciendo algo mal... pero cambiándolo a class me hace exactamente lo mismo, actúa de la misma forma que lo hacía con id
  #9 (permalink)  
Antiguo 17/07/2011, 15:32
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 6 años, 7 meses
Puntos: 64
Respuesta: Problema con el float left

Cita:
Iniciado por chrishxc Ver Mensaje
Pues no sé si estoy haciendo algo mal... pero cambiándolo a class me hace exactamente lo mismo, actúa de la misma forma que lo hacía con id
entre a la pagina y no veo los cambios, los guardaste bien?? porque yo los sigo biendo con ID.. en el html y css
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #10 (permalink)  
Antiguo 17/07/2011, 15:35
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 8 años, 8 meses
Puntos: 19
Respuesta: Problema con el float left

No lo he subido, estaba mirándolo con el firebug, pero me pasa lo mismo.
Ahora está subido, con las clases y actúa igual =\
  #11 (permalink)  
Antiguo 17/07/2011, 15:44
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 6 años, 7 meses
Puntos: 64
Respuesta: Problema con el float left

Cita:
Iniciado por chrishxc Ver Mensaje
No lo he subido, estaba mirándolo con el firebug, pero me pasa lo mismo.
Ahora está subido, con las clases y actúa igual =\
aa deveras.. vi mal entonces!!... perdon... de todas formas las clases dejalas, esas si estan bien..

voy a ver q puede ser
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #12 (permalink)  
Antiguo 17/07/2011, 15:46
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 8 años, 8 meses
Puntos: 19
Respuesta: Problema con el float left

Yo llevo 2 horas probando mil combinaciones. No me creo que no se pueda hacer.
Aunque a mala hora tuve yo de hacer esto (con lo fácil que sería limitar los carácteres del div y que todos fueran idénticos).
  #13 (permalink)  
Antiguo 17/07/2011, 17:06
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 6 años, 7 meses
Puntos: 64
Respuesta: Problema con el float left

Cita:
Iniciado por chrishxc Ver Mensaje
Yo llevo 2 horas probando mil combinaciones. No me creo que no se pueda hacer.
Aunque a mala hora tuve yo de hacer esto (con lo fácil que sería limitar los carácteres del div y que todos fueran idénticos).
LA VERDAD Q YA INTENTE DEMASIADO Y NO SALE.. EL PROBLEMA ES Q AL LLAMARSE TODOS IGUALES TDOS TOMAN LAS MISMAS PROPIEDADES , POR ESO EL DIV Q TIENE MAS TEXTO SE HACE MAS LARGO Y POR ENDE AFECTA A TODOS TOMANDO COMO ULTIMA LINEA EL DE MAS CONTENIDO...

LA UNICA SALIDA Q VEO ES PONERLE DIFERENTES NOMBRES A LOS DIV Q CONTIENEN A LOS CUADROS...
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #14 (permalink)  
Antiguo 17/07/2011, 17:29
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 8 años, 8 meses
Puntos: 19
Respuesta: Problema con el float left

Yo tampoco soy capaz de encontrar la forma. Lo peor de todo es que vi una web que hacía algo igual pero no soy capaz de encontrarla tampoco.

Si la web fuera estática sería fácil, el problema es que va ligada a una base de datos, con lo que todo el proceso tiene que ser automático, y crear varios divs con varios nombres no es viable.

Una lástima, pero haré el plan B: limitación de carácteres y de dimensiones de imagen para que todo salga igual.
  #15 (permalink)  
Antiguo 17/07/2011, 17:33
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 6 años, 7 meses
Puntos: 64
Respuesta: Problema con el float left

Cita:
Iniciado por chrishxc Ver Mensaje
Yo tampoco soy capaz de encontrar la forma. Lo peor de todo es que vi una web que hacía algo igual pero no soy capaz de encontrarla tampoco.

Si la web fuera estática sería fácil, el problema es que va ligada a una base de datos, con lo que todo el proceso tiene que ser automático, y crear varios divs con varios nombres no es viable.

Una lástima, pero haré el plan B: limitación de carácteres y de dimensiones de imagen para que todo salga igual.

tendrias el link de la web q decis¨??
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #16 (permalink)  
Antiguo 17/07/2011, 18:20
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 8 años, 8 meses
Puntos: 19
Respuesta: Problema con el float left

Lo he estado buscando por el historial y no lo encuentro. Mañana miraré en el portátil, que no la viera allá. Que rabia no haberla guardado.

Al verlo me pareció a priori fácil... pero vaya nochecita me ha dado.
  #17 (permalink)  
Antiguo 17/07/2011, 18:38
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 6 años, 7 meses
Puntos: 64
Respuesta: Problema con el float left

Cita:
Iniciado por chrishxc Ver Mensaje
Lo he estado buscando por el historial y no lo encuentro. Mañana miraré en el portátil, que no la viera allá. Que rabia no haberla guardado.

Al verlo me pareció a priori fácil... pero vaya nochecita me ha dado.
seguro q hay solucion... a mi ya me dio curiosidad de saber cual es... en un rato me pongo a investigar... si encuentro la solucion , te aviso ..

saludos!!
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>

Etiquetas: float, left
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:36.