Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 2 sur 2
  1. #1
    Invité de passage
    Inscrit en
    avril 2012
    Messages
    52
    Détails du profil
    Informations forums :
    Inscription : avril 2012
    Messages : 52
    Points : 1
    Points
    1

    Par défaut Positionnement CSS Slider

    Bonjour à tous,

    Voilà, grâce à un tutoriel, j'ai réalisé un slider qui fonctionne très bien.
    Cependant je n'arrive pas à le positionner comme je le voudrais.

    En effet j'aimerais avoir un positionnement de ce type :



    J'ai le code CSS de mon slider et la structure HTML.

    CSS :

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .jThumbnailScroller{position:relative; width:670px; height:80px; margin:160px auto 0 auto; border:5px solid #eee; background:#535355; padding:0; overflow:hidden; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
    .jThumbnailScroller .jTscrollerContainer{position:absolute;}
    .jThumbnailScroller .jTscroller{position:relative; height:100%; margin:0; left:0; top:0; display:inline-block; *display:inline;}
    .jThumbnailScroller .jTscrollerNextButton,.jThumbnailScroller .jTscrollerPrevButton{position:absolute; display:block; width:40px; height:40px; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; opacity:0.7;}
    .jThumbnailScroller .jTscrollerNextButton{background:#000 url(../images/nextArrow.png) center center;}
    .jThumbnailScroller .jTscrollerPrevButton{background:#000 url(../images/prevArrow.png) center center;}
    .jThumbnailScroller .jTscrollerNextButton:hover,.jThumbnailScroller .jTscrollerPrevButton:hover{background-color:#e42832; opacity:1;}
    .jThumbnailScroller .jTscroller a{display:block; float:left; border:5px solid #ddd; margin:6px 10px 6px 0; background:#fff; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
    .jThumbnailScroller .jTscroller a:hover{border-color:#fff;}
    .jThumbnailScroller .jTscroller a:first-child{margin-left:10px;}
    .jThumbnailScroller .jTscroller a img{border:none;}
    .jThumbnailScroller#tS2{margin:30px auto;}
    .jThumbnailScroller#tS2 .jTscroller a{opacity:0.7;}
    .jThumbnailScroller#tS2 .jTscroller a:hover{opacity:1;}
    .jThumbnailScroller#tS2 .jTscrollerNextButton{margin:-20px 10px 0 10px; right:0; top:50%;}
    .jThumbnailScroller#tS2 .jTscrollerPrevButton{margin:-20px 10px 0 10px; left:0; top:50%;}

    HTML :

    Code html :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     
    <div id="tS2" class="jThumbnailScroller">
    	<div class="jTscrollerContainer">
    		<div class="jTscroller">
    			<a href="#"><img src="http://www.opticien-regards.fr/images/Common/dg.png" /></a>
    			<a href="#"><img src="http://www.opticien-regards.fr/images/Common/dg.png" /></a>
    		<a href="#"><img src="http://www.opticien-regards.fr/images/Common/dg.png" /></a>
    		<a href="#"><img src="http://www.opticien-regards.fr/images/Common/dg.png" /></a>
    		<a href="#"><img src="http://www.opticien-regards.fr/images/Common/dg.png" /></a>
    		<a href="#"><img src="http://www.opticien-regards.fr/images/Common/dg.png" /></a>
    		</div>
    	</div>
    	<a href="#" class="jTscrollerPrevButton"></a>
    	<a href="#" class="jTscrollerNextButton"></a>
    </div>

    Comment je dois m'y prendre ?
    J'ai essayé de mettre un float:left mais le slider ne marche plus après (le système de flèche non cliquable...).

  2. #2
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    6 986
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 6 986
    Points : 12 566
    Points
    12 566

    Par défaut

    Bonjour,
    il te manque un conteneur pour recevoir l'image que tu souhaites afficher dans la DIV id="tS2".

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •