Propiedad float:left en lista ul no funciona :S

[de-troit]

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 :)

[pitufoweb]

bueno, déjame ver si encuentro algo.





Saludos

[pitufoweb]

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

[de-troit]

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!

[pitufoweb]

Iniciado por de-troit

Cómo lograste saberlo?

Con firebug.

Iniciado por de-troit

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

[de-troit]

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.

[pitufoweb]

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

[de-troit]

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

[de-troit]

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.

[pitufoweb]

ya veo.

descargare la pagina para probar.


Saludos

[pitufoweb]

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.

[de-troit]

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.

[de-troit]

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! :)

[pitufoweb]

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.

[de-troit]

Excelente!!

Muchas gracias! :)

Nos estamos leyendo.