soucis tuto caroufredsel...

neuillane
Javascript

bon je tente de creer un carrousel mais ça marche pas?

Voici mon index.php:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset="utf-8"/>
    <title>Titre</title>
    <link rel="stylesheet" href="style.css">
  </head>
<body>
<div id="conteneur-menu">
<center><div id="menu">
<dl>
        <dt> Accueil </dt>
        <dd>
        <ul>
        <li><a href="#">Lien 1</a></li>
        <li><a href="#">Lien 2</a></li>
        <li><a href="#">Lien 2</a></li>
        </dd>
        </dl>

        <dl>
        <dt> Forum </dt>
        </dl>
        <dl>
        <dt> Inscription </dt>
        </dl>
        </div>  
</div>
</center>
<br/>
<div class="container" style="margin-top:50px">
<div class="carrousel" id="carrousel">
    <a href="#">
        <img src="http://placehold.it/182x130">
    </a>
    <a href="#">
        <img src="http://placehold.it/182x130">
    </a>
    <a href="#">
        <img src="http://placehold.it/182x130">
    </a>    
    <a href="#">
        <img src="http://placehold.it/182x130">
    </a>
    <a href="#">
        <img src="http://placehold.it/182x130">
    </a>
    <a href="#">
        <img src="http://placehold.it/182x130">
    </a>
    <a href="#">
        <img src="http://placehold.it/182x130">
    </a>
    <a href="#">
        <img src="http://placehold.it/182x130">
    </a>
    <a href="#">
        <img src="http://placehold.it/182x130">
    </a>
    <a href="#">
        <img src="http://placehold.it/182x130">
    </a></div></div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text-javascript" src="caroufredsel.js"></script>
<script type="text-javascript">
    $('#carroussel').caroufredsel({
        width : 960,
    }); 
</script>
</html>

et la mon style.css 

#conteneur-menu{
    background-color:#00304F;
    padding::100px;
    height:30px;
    width:850px;    
    position:relative; 
}
#menu{
    position:absolute;  
}
#menu dl
{
height:30px;
width:150px;
margin:0; padding:0;
display:block;
float:left;
position:left;
cursor:pointer;
border-right:solid 1px #F5FBFA
}
#menu dt
{
display:block;
height:30px;
color:#90CFF9;
line-height:30px;
text-align:center;
border-right:solid 1px #000000; 
}
#menu dd
{
display:block;
margin:0; padding:0;
background-color:#005893;
}
#menu dd ul {
    margin:0; padding:0;
    text-align:center;
    list-style:none;
}
#menu dd ul li{
display:block;
margin:0; padding:0;
}
#menu dd ul li a{
    color:#90CFF9;
    display:block;
    text-decoration:none;
    width:150px;
    height:30px;
    line-height:30px;
    border-top:dotted 1px #000000;
    border-bottom:dotted 1px #002925;
}
#menu dd ul li a:hover{
background-color:#63BBF7;
color:#FFF;
}
#menu dl dd
{
display:none;
}
#menu dl:hover dd
{
display:block;
}
#carrousel {width:960px;}
#carrousel a{
display:block;
float:left;
width:182px;
height:130px;
margin-bottom:10px;
}

et aucun slide?
je l'ai hebergé sur free pour que vous puissiez voir le resultat => ici
je n'ai pas inseré le boodstrap de twitter mais je ne pense pas que ce soit le probleme?

quelqu'un peut m'aider?

3 réponses

Nonathy
Réponse acceptée

C'est tout bête, tu as mis la mauvaise div (#carroussel à la place de #carrousel)

$('#carroussel').caroufredsel({
    width : 960,
});

<u>Ceci à la place :</u> 

$('#carrousel').caroufredsel({
    width : 960,
});
neuillane
Auteur

j'ai donc dans ma racine: <u></u>
index.php
style.css
caroufredsel.js

neuillane
Auteur

j'ai reussi (apres une aprés-midi de recherche à faire fonctionner caroufredsel mais mon style.css ne reconnait pas le #carrousel?
Vous savez ce qui se passe?