Necesito ayuda con jCarouselLite

ofmjuanabascal · #1 (**permalink**) 25/11/2010, 15:01

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Juan Abascal - Mi página Personal</title>
<link href="styles.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery_library.js"></script>
<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="js/block.js"></script>
<script type="text/javascript" src="js/carousel.js"></script>
 
<script type="text/javascript">
    Cufon.replace('.header, h1');
    Cufon.replace('.menu, li a');
    Cufon.replace('.encabezado h2');
</script><!-- FIN CUFON -->
 
<script type="text/javascript">
    $(function(){
        $('.slides').jCarouselLite({
            auto:5000,
            speed:1000,
            visible:1,
            });
    });
</script>
 
 
</head>
<body>
 
<div class="interior">
<div class="encabezado">
    <div class="slides">
        <ul>
            <li><img src="images/enrique.jpg" alt="slide1"/></li>
            <li><img src="images/juan_abascal.jpg" alt="slide2"/></li>
        </ul>   
    </div>
    <div class="border">
    <img src="images/border.png" alt="borde" />
    </div>
    <!-- final slides -->
    <div class="encab_info"> 
        <h2> Ultimos Trabajos </h2>
        <p>Estos son mis últimos proyectos.</p>
    </div><!-- final encabezado_info -->
    <div class="clear"></div>
        
    <div class="links">
        <a href="#">Visitar proyectos</a>
    </div><!-- final links -->
</div>
</div>
<!-- final encabezado -->
</body>
</html>

Código CSS:

Ver original/* SLIDE */
 
.encab_info {float: left; margin-left:50px; margin-top:50px; display:inline;}
p .encab_info { margin: 100px; }
.links {float: left; margin-left:50px; display:block;}
/* .slide1 {float: right; display: inline; position:absolute; top:380px; left:625px;} */
.slides {border-color:white; border-width: 10px; position:absolute; top:380px; left:625px;}
/* .slide2 {float: right; display: inline; position:absolute; top:380px; left:625px; visibility: hidden;} */
.border {float: right; display: inline; position:absolute; top:368px; left:615px;}
.encabezado {padding-bottom: 200px}

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