Foros del Web » Creando para Internet » CSS »

Propiedad float:left en lista ul no funciona :S

Estas en el tema de Propiedad float:left en lista ul no funciona :S en el foro de CSS en Foros del Web. Hola compañeros, necesito que me echen una manito por favor, me he estado calentando la cabeza tratando de averiguar por qué una lista no respeta ...
  #1 (permalink)  
Antiguo 19/11/2010, 18:23
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Propiedad float:left en lista ul no funciona :S

Hola compañeros, necesito que me echen una manito por favor, me he estado calentando la cabeza tratando de averiguar por qué una lista no respeta la propiedad float:left que le añado :S

Al sacarlo del div general que contiene a todos si funciona el float, pero dentro de ese contenedor no =(

La lista contiene imágenes para hacer un 'slideShow' o un 'Carousel' con jQuery.

El código es bien extenso, pero les detallaré las partes importantes que se deben analizar:

Lo importante del HTML:

Código:
El div: <div id="_proyectContent"> y todos sus div's padres
Y el div: <div id="slide"> que es hijo del div#_proyectContent y todos los 
hijos de div#slide, que dentro de este se contiene la lista ul.overview que
presenta los problemas (que no es causado por la lista).
Reitero que el problema no es propio de la lista, si no que lo genera algún div contenedor de este, creo que es algún div padre del div#_proyectContent, creo que por ahí va la cosa.

Lo importante de los CSS:

Código:
En http://www.neoproyex.com/pruebas/quisco/base/CSS/slideShow.css:
#slide .overview li { float: left } <- esto es lo que no funciona.

En http://www.neoproyex.com/pruebas/quisco/base/CSS/baseStyle.css
#_proyectContent { display:none } <-- es la única propiedad que tiene este 
div, así que descarto que sea este el div que genera el problema, debe ser 
uno de sus padres, probablemente uno de estos:

<div id="shadow3"><!-- #shadow3 -->
<div id="contentContainer"><!-- #contentContainer -->
<div id="contentMargin"><!-- #contentMargin -->
<div id="contentLoader"><!-- #contentLoader -->

Las propiedades de estos divs se encuentran dentro de baseStyle.css
Debo aclarar que los divs id:
#_homeContent,
#_proyectContent,
#_departamentsContent,
#_ubicContent,
#_contactContent,
#_whoAreWeContent

están ocultos con la propiedad display:none porque son los contenidos de un sistema de 'tabs', entonces al hacer click a su respectivo botón, estos se muestran con jQuery.

Como no pude postear el código aquí por lo extenso, lo subí a un servidor, esta es la dir:

http://www.neoproyex.com/pruebas/quisco/
(Vean el código de fuente)

Versión descargable en RAR (libre de virus):

En http://www.neoproyex.com/pruebas/quisco.rar

Espero que me puedan ayudar, muchos saludos a todos :)

Última edición por de-troit; 19/11/2010 a las 18:35
  #2 (permalink)  
Antiguo 19/11/2010, 20:21
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: Propiedad float:left en lista ul no funciona :S

bueno, déjame ver si encuentro algo.





Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------

Última edición por pitufoweb; 19/11/2010 a las 20:28
  #3 (permalink)  
Antiguo 19/11/2010, 20:40
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: Propiedad float:left en lista ul no funciona :S

Uno de los scripts modifica el <UL> y le pone un ancho de 140px.


Te dejo el código:

Código HTML:
<div id="slide">
<a class="buttons prev disable" href="#">left</a>

<div class="viewport" style="">
<ul class="overview" style="width: 140px; left: 0px; ">
<li style=""><img src="proyect/img/1_thumbnail.png"></li>
<li><img src="proyect/img/2_thumbnail.png"></li>
<li><img src="proyect/img/3_thumbnail.png"></li>
<li><img src="proyect/img/4_thumbnail.png"></li>
<li><img src="proyect/img/5_thumbnail.png"></li>
<li><img src="proyect/img/6_thumbnail.png"></li>
<li><img src="proyect/img/7_thumbnail.png"></li>
</ul>
</div>

<a class="buttons next" href="#">right</a>
</div> 






Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #4 (permalink)  
Antiguo 19/11/2010, 21:05
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Propiedad float:left en lista ul no funciona :S

Cómo lograste saberlo? el Script del slideShow.js debe hacer eso, pero no encuentro la parte donde lo hace :S

Será eso lo que hace que los li no floten a la izquierda?

Voy a echarle un vistazo a esto.

Aunque mi teoría es que alguna propiedad de un div padre le afecta, ya que al sacar el div#slide de todos los contenedores funciona el float correctamente :S

Gracias por responder, saludos!
  #5 (permalink)  
Antiguo 19/11/2010, 21:21
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: Propiedad float:left en lista ul no funciona :S

Cita:
Iniciado por de-troit Ver Mensaje
Cómo lograste saberlo?
Con firebug.



Cita:
Iniciado por de-troit Ver Mensaje
Será eso lo que hace que los li no floten a la izquierda?

En realidad si están flotados, pero aparecen uno sobre otro porque con ese ancho no caben dos juntos.




Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #6 (permalink)  
Antiguo 19/11/2010, 21:28
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Propiedad float:left en lista ul no funciona :S

Mmm, entonces es problema del script? Ya que busqué e incluso fuí eliminando propiedades para ir probando si desaparecía el problema pero nada :(

Instalé firebug y exactamente lo que ocurre es que el ul tiene 140px de ancho, se lo modifiqué a 500px por firebug y se ve que flota, pero el efecto de slide no anda bien :S

Voy a ver que puedo hacer al respecto, por lo menos ya tengo localizado el problema, antes ni sabía que era, es un avance, haz sido de mucha ayuda.

Tienes alguna idea de solución para esto? Cualquier cosa sirve.

Te agradezco mucho por darte el tiempo de leer y averiguar el problema. Gracias.

PDTA: No conocía Firebug, gracias.

Última edición por de-troit; 19/11/2010 a las 21:47
  #7 (permalink)  
Antiguo 19/11/2010, 21:50
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: Propiedad float:left en lista ul no funciona :S

Creo que lo ideal seria corregir el problema en el script, pero en eso no puedo ayudarte por que no manejo mucho javascript.


Pero con CSS puedes hacer esto:

En el archivo slideShow.css agrega un ancho a esta regla #slide .overview y lo pones como IMPORTANTE.

Ejemplo:
#slide .overview { list-style: none; position: absolute; padding: 0; margin: 0; left: 0; top: 0; width: 100% !important; }




Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #8 (permalink)  
Antiguo 19/11/2010, 21:59
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Propiedad float:left en lista ul no funciona :S

Aún así el Slider no anda bien, creo que no es problema del script, porque está echo para que funcione bien, es este:

http://www.baijs.nl/tinycarousel/

En todos los casos anda bien excepto cuando lo meto dentro del div#_proyectContainer, porque cuando lo dejo justo antes de cerrar el body (sin estar dentro de ningún div) anda perfectamente.

Creo que algún otro problema hace que el script trabaje mal :S. Si es así, la solución no sería modificar el script, debe haber algún problema de div's.

Voy a seguir buscando, gracias! :D
  #9 (permalink)  
Antiguo 19/11/2010, 22:14
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Propiedad float:left en lista ul no funciona :S

Estoy casi seguro que es un problema de divs, por eso el JS al acceder a los atributos, los toma defectuosos y por eso el Slide anda mal, es como si algo alterara las propiedades de la lista.
  #10 (permalink)  
Antiguo 19/11/2010, 22:23
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: Propiedad float:left en lista ul no funciona :S

ya veo.

descargare la pagina para probar.


Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #11 (permalink)  
Antiguo 19/11/2010, 22:42
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: Propiedad float:left en lista ul no funciona :S

NO PUEDE SER!!! Se me olvido una de las reglas mas básicas de CSS... Los nombres de las ID's y class tienen que comenzar con una letra.

Entonces esto no es valido:

#_homeContent,
#_proyectContent,
#_departamentsContent,
#_ubicContent,
#_contactContent,
#_whoAreWeContent



Cambia eso y solucionaras tu problema.






Saludos.
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #12 (permalink)  
Antiguo 19/11/2010, 22:49
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Propiedad float:left en lista ul no funciona :S

Ups!

Voy a ver qué pasa y te cuento. Te pasaste compañero :) muchas gracias por toda la ayuda, te mereces karma.

Estamos en contacto.
  #13 (permalink)  
Antiguo 19/11/2010, 22:58
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Propiedad float:left en lista ul no funciona :S

Arreglé lo de los id's pero tampoco solucionaba el problema :(

Pero acabo de encontrar una solución alternativa, lo que pasaba es que por alguna razón (problema de propiedades CSS de los que divs que afectaban a los hijos o algo), el JS no lograba obtener bien los atributos, así que los puse manualmente en el código, hice un par de modificaciones y gualá! hahaha funciona :D

Muchas gracias compañero! Sin ti no hubiera pillado el error (el width:140px del ul hahaha) y no hubiera podido arreglarlo.

Muchas gracias por toda la ayuda, nos estamos leyendo! :)
  #14 (permalink)  
Antiguo 19/11/2010, 23:06
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: Propiedad float:left en lista ul no funciona :S

Si funciona solo cambiando las id's. Pero quita el width:140px de <ul> que te había dicho anteriormente. Así lo usa el script.



Saludos.
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #15 (permalink)  
Antiguo 19/11/2010, 23:52
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Propiedad float:left en lista ul no funciona :S

Excelente!!

Muchas gracias! :)

Nos estamos leyendo.

Etiquetas: lista, propiedad
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 13:15.