28172 sujets

CSS et mise en forme, CSS3

Bonjour !
J'espère trouver un eu d'aide sur ce forum parce que je suis bloqué sur mon caroussel , je n'arrive pas à obtenir le résultat escompter ...

Voici le résultat que j'aimerais obtenir ( fait sur photoshop ) :
http://img809.imageshack.us/i/carrousel.jpg/

En clair comme sur ce site là :
http://www.games-workshop.com/gws/home.jsp

Mais voila ce que j'obtiens :
http://img222.imageshack.us/i/carrouselbad.jpg/

En clair je n'arrive pas à faire en sorte que les images est un rollover correct ( rectangle beige doit se transformer en rectangle blanc avec la flèche) ,de plus je n'arrive pas à supprimer les numéros qui apparaisse pour y mettre du texte ou à défauts une image comprenant du texte ...

Voici mon code javascript ( même si je ne pense pas qu'il serve ):


var carrousel = {

   nbSlide : 0,
   nbCurrent : 1,
   elemCurrent : null,
   elem : null,
   timer : null,

   init : function(elem){
      this.nbSlide = elem.find(".slide").length;
	  
	  //Créer la pagination
	  elem.append('<div class="navigation"></div>');
	  for(var i=1;i<=this.nbSlide;i++){
	    elem.find(".navigation").append("<span>"+i+"</span>")
	  }
	  elem.find(".navigation span").click(function(){carrousel.gotoSlide($(this).text());})
	  
	  //Initialisation du carrousel
	  this.elem=elem;
	  elem.find(".slide").hide();
	  elem.find(".slide:first").show();
	  this.elemCurrent = elem.find(".slide:first");
	  this.elem.find(".navigation span:first").addClass("active");
	  
	  //On créer le timer
	  carrousel.play();
	  //Stop quand on passe dessus
	  elem.mouseover(carrousel.stop);
	  elem.mouseout(carrousel.play);
   },
   
   gotoSlide : function(num){
      if(num==this.nbCurrent){ return false; }
	  
	  /*Animation en fadeIn/fadeOut
      this.elemCurrent.fadeOut();
	  this.elem.find("#slide"+num).fadeIn();
	  */
	  
	  /*Animation en slide
	  var sens = 1;
	  if(num<this.nbCurrent){ sens = -1;}
	  var cssDeb = {"left" : sens*this.elem.width() };
	  var cssFin = {"left" : -sens*this.elem.width() };
	  this.elem.find("#slide"+num).show().css(cssDeb);
	  this.elem.find("#slide"+num).animate({"top":0,"left":0,},500)
	  this.elemCurrent.animate(cssFin,500);
	  */
	  
	  this.elemCurrent.fadeOut();
      this.elem.find("#slide"+num).show();
      this.elem.find("#slide"+num).hide().fadeIn();
	  
	  var titleHeight = this.elemCurrent.find(".title").height();
	  
      this.elemCurrent.find(".title").animate({"bottom":-titleHeight},500);
      this.elem.find("#slide"+num+" .title").css("bottom",-titleHeight).animate({"bottom": 0},500);
	  
	  
	  
	  this.elem.find(".navigation span").removeClass("active");
	  this.elem.find(".navigation span:eq("+(num-1)+")").addClass("active");
	  this.nbCurrent = num;
	  this.elemCurrent = this.elem.find("#slide"+num);
   },
   
   next : function(){
      var num = Number(this.nbCurrent)+1;
	  if(num >this.nbSlide){
	      num =1;
	  }
	  this.gotoSlide(num);  
   },
   prev : function(){
      var num = this.nbCurrent-1;
	  if(num< 1){
	      num = this.nbSlide;
	  }
	  this.gotoSlide(num);  
   },
   stop : function(){
      window.clearInterval(carrousel.timer);
   },
   play : function(){
      window.clearInterval(carrousel.timer);
      carrousel.timer = window.setInterval("carrousel.next()",4000);
   }
     
}

$(function(){
  carrousel.init($("#carrousel"));
});


et mon css pour le carrousel:


#carrousel{
border:solid 2px #CDC3A2;
width:975px;
height:331px;
margin:44px 0 0 10px;
position:relative;
overflow:hidden;
}

.slide{
position:absolute;
top:0;
left:0;
width:975px;
height:331px;
}

.title{
position:absolute;
height:35px;
bottom:0;
left:0;
width:975px;
padding-left:15px;
line-height:35px;
background:url(theme/barre_carrousel.png);
color:#000000;
font-size:18px;
}

.navigation{
position:absolute;
top:-1px;
}

.navigation span{
position:relative;
background:url(theme/case_carrousel_double.png) no-repeat;
padding:45px 160px;
cursor:pointer;
height:168px;
width:337px;
display:block;

}

.navigation span:hover,.navigation span.active{
background:url(theme/case_carrousel_double.png) no-repeat;
background-position:bottom-left;
}



}


Merci d'avance , j'espère sincèrement trouvé de l'aide ça fait un moment que je cherche sans succès ...
Cordialement.