Tema: Necesito ayuda con jCarouselLite
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 25/11/2010, 15:01
Avatar de ofmjuanabascal
ofmjuanabascal
 
Fecha de Ingreso: noviembre-2010
Ubicación: Cantabria
Mensajes: 17
Antigüedad: 14 años, 4 meses
Puntos: 0
Necesito ayuda con jCarouselLite
Yo tengo mi codigo HTML y CSS y al añadirle el javascript del jCarouselLite el div se me cambia de posicion si me podeis ayudar... Gracias.

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
  4. <head>
  5. <title>Juan Abascal - Mi página Personal</title>
  6. <link href="styles.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="js/jquery_library.js"></script>
  8. <script type="text/javascript" src="js/cufon.js"></script>
  9. <script type="text/javascript" src="js/block.js"></script>
  10. <script type="text/javascript" src="js/carousel.js"></script>
  11.  
  12. <script type="text/javascript">
  13.     Cufon.replace('.header, h1');
  14.     Cufon.replace('.menu, li a');
  15.     Cufon.replace('.encabezado h2');
  16. </script><!-- FIN CUFON -->
  17.  
  18. <script type="text/javascript">
  19.     $(function(){
  20.         $('.slides').jCarouselLite({
  21.             auto:5000,
  22.             speed:1000,
  23.             visible:1,
  24.             });
  25.     });
  26. </script>
  27.  
  28.  
  29. </head>
  30. <body>
  31.  
  32. <div class="interior">
  33. <div class="encabezado">
  34.     <div class="slides">
  35.         <ul>
  36.             <li><img src="images/enrique.jpg" alt="slide1"/></li>
  37.             <li><img src="images/juan_abascal.jpg" alt="slide2"/></li>
  38.         </ul>   
  39.     </div>
  40.     <div class="border">
  41.     <img src="images/border.png" alt="borde" />
  42.     </div>
  43.     <!-- final slides -->
  44.     <div class="encab_info"> 
  45.         <h2> Ultimos Trabajos </h2>
  46.         <p>Estos son mis últimos proyectos.</p>
  47.     </div><!-- final encabezado_info -->
  48.     <div class="clear"></div>
  49.         
  50.     <div class="links">
  51.         <a href="#">Visitar proyectos</a>
  52.     </div><!-- final links -->
  53. </div>
  54. </div>
  55. <!-- final encabezado -->
  56. </body>
  57. </html>

Código CSS: 
Ver original
  1. /* SLIDE */
  2.  
  3. .encab_info {float: left; margin-left:50px; margin-top:50px; display:inline;}
  4. p .encab_info { margin: 100px; }
  5. .links {float: left; margin-left:50px; display:block;}
  6. /* .slide1 {float: right; display: inline; position:absolute; top:380px; left:625px;} */
  7. .slides {border-color:white; border-width: 10px; position:absolute; top:380px; left:625px;}
  8. /* .slide2 {float: right; display: inline; position:absolute; top:380px; left:625px; visibility: hidden;} */
  9. .border {float: right; display: inline; position:absolute; top:368px; left:615px;}
  10. .encabezado {padding-bottom: 200px}

Gracias de antemano. El codigo es más extenso, pero este es el necesario (creo)