CarouFredSel : être sur de bien positionner son carroussel ?
Bonjour,
j'ai un petit soucis avec "CarouFredSel" qui se place toujours à gauche bien qu'en CSS je fais en sorte de placer le <div> qui l'encadre au bon endroit !
Une idée pour le placer au bon endroit ?
Merci.
4 réponses
Bonjour et merci de m'avoir lu.
Super site au passage ;)
Comme je n'ai pas le code en ligne (tout est en local) je te copie colle ci dessous :
* code dans la partie head ... il s'agit du script pour lancer caroufredsel :
(Hauteur de 300 pour afficher 2 images d'une hauteur de 150 chacunes )
<script type="text/javascript">
$(document).ready(function(){
$('#carroussel').carouFredSel({
direction:"down",
width : 220,
height : 300,
items : 2,
scroll :{
fx : "uncover",
pauseOnHover : true
}
});
});
</script>Voici le code du <body>
<body>
<div id="conteneur">
<div id="entete">
<img src="images/logoentete.gif" alt="logo d'entête" />
</div>
<div id="menu">
// blablabla
<div id="flottantdroit">du texte <br />du texte</div>
</div><!-- fin menu -->
<div id="colonnedroite">
<p>Texte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte <br />Texte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte <br />Texte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte </p>
<hr/>
<p class="centrage">
<!-- slider d'image dans la colonne à droite ;) -->
<div id="carroussel">
<img src="image1" width="220" height="150" />
<img src="image2" width="220" height="150" />
<img src="image3" width="220" height="150" />
<img src="image4" width="220" height="150" />
<img src="image5" width="220" height="150" />
</div><!-- fin du slider -->
</p>
</div><!-- fin colonnedroite -->
<div id="page">
<h1>Titre 1</h1>
<hr />
<p>Texte texte texte texte texte texteTexte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte <br/>Texte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte </p>
<p>Texte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte <br />Texte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte Texte texte texte texte texte texte </p>
</div><!-- fin page -->
<!-- Pied de page -->
<div id="pied">
<div>Texte texte texte texte texte texte <br />
Texte texte texte texte texte texte <br />
<span class="gras">Texte texte texte texte texte texte </span><br />
Texte texte texte texte texte texte <br />
Texte texte texte texte texte texte <br />
Texte texte texte texte texte texte <br />
Texte texte texte texte texte texte <br />
</div>
<div>
©opyright 2012<br />
<img src="imagestest.png" width="150" height="139" /></div>
<hr />
Texte texte texte texte texte texte
</div><!-- Fin Pied de page -->
</div><!-- Fin conteneur-->
</body>
</html>* CSS : et voici les différents style utilisés :
body {
margin:0pt;
padding:0pt;
background: url(../images/background.png) #FFFFFF no-repeat center top;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align: center;
}
/* ID */
/* ########################
Corps de la page
#########################*/
#conteneur {
position:relative;
padding:0px;
width: 960px;
text-align:left;
margin: 0px auto;
}
#entete {
width:960px;
height:200px;
background-image:(../images/logo-chez-fred-entete.gif);
background-position: center;
background-repeat: no-repeat;
}
#entete img {
float:left;
}
#flottantdroit {
float:right;
}
#colonnedroite{
padding: 0px;
float:right;
min-height:100%;
width:250px;
background:#6D2459 url(../images/background-colonnedroite.png) no-repeat bottom center;
text-align:left;
color:#CCC;
/* border-left: 1px solid black; */
}
#colonnedroite p, #colonnedroite img {
padding: 5px 5px;
}
#colonnedroite hr {
height: 10px;
background: #6D2459 url(hr-2.gif) no-repeat center center;
margin: -0.5em 0;
padding: 0;
color: #F00;
border: 0px;
}
#page {
margin-right: 250px;
}
#page p {
margin-left: 20px;
}
#page hr {
height: 18px;
background: #FFFFFF url(hr-1.gif) repeat-x;
margin: 0 0;
padding: 0;
color: #F00;
border: 0px;
}
#pied {
background:#6D2459 url(../images/background-pied.png) no-repeat top center;
clear:both;
padding:0px;
text-align:center;
margin-right:0px;
color:#CCCCCC;
}
#pied div {
float: left;
width:460px;
padding: 10px 10px 0px 10px;
}
#pied div a {
text-decoration:none;
color:#CCCCCC;
}
#pied div a:hover {
text-decoration:none;
color:#CCCCCC;
font-weight:bold;
}
#pied hr {
clear:both;
}
/* ########################
CLASSE
#########################*/
.centrage {
text-align:center;
}
.floatleft {
float:left;
}
.floatright {
float:right;
}
.gras {
font-weight:bold;
}Je relance pour dire que je rencontre le même problème. Impossible de centrer les images de mon carousel lorsque l'on utilise la "direction: 'up'".
Plutôt gênant :S
Si quelqu'un à trouvé une solution ou peut nous aider, je suis preneur.
Merci d'avance :)