Effets d'espacement/retractation des liens

[Outis]

Templates modifiés : index_box - topics_list_box - viewtopic_body
CSS : modifié
forum test : phpbb2
accès invité : http://personofintetest.weshforum.com/f1-presentation


Bonjour,

J'ai récemment pu ajouter un petit effets sur mes liens, ceux-ci réduisent leur espacement à une certaine vitesse.
Je n'ai pu reproduire cet effet que pour une partie de mes liens, mais j'aurai voulu l'appliquer à tous.

Pour l'exemple de l'effet que je souhaite voir l'accueil du forum http://personofintetest.weshforum.com/forum.
La vitesse est assez lente.

Mais dès que je recopie le code pour les autres, la durée ne s'applique pas sous firefox. J'ai vidé mes caches. ^^


Voici mon CSS.

Code:

.onglet
        {
                display:inline-block;
                margin-left:3px;
                margin-right:3px;
                padding:3px;
                cursor:pointer;
  border: 2px solid darkred;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
        }
        .onglet_0
        {
                background: url('http://images2.alphacoders.com/940/thumbbig-940.jpg');
                border-bottom:1px solid black;
  border: 2px solid darkred;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
        }
        .onglet_1
        {
                background: url('http://images2.alphacoders.com/940/thumbbig-940.jpg');
                border-bottom:0px solid black;
                padding-bottom:4px;
  border: 2px solid darkred;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
        }
        .contenu_onglet
        {
                background: url('http://images2.alphacoders.com/940/thumbbig-940.jpg');
                margin-top:-1px;
                padding:5px;
                display:none;
  border: 2px solid darkred;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
        }
        ul
        {
                margin-top:0px;
                margin-bottom:0px;
                margin-left:-10px
        }
        h1
        {
                margin:0px;
                padding:0px;
        }



#accueil
{
  width: 900px;
  height: 400px;
  overflow: hidden;
  background: url(http://img11.hostingpics.net/pics/297192fondepa.png) center no-repeat;
  border: 2px solid darkred;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
}
#page1
{
  width: 40px;
  height: 400px;
  float: left;
  overflow: hidden;
  background: url(http://img15.hostingpics.net/pics/869873nombriliste.png) center no-repeat;
  background-color: #555555;
 
}

#page2
{
  width: 40px;
  height: 400px;
  float: left;
  overflow: hidden;
  background: url(http://img11.hostingpics.net/pics/521806ayayayayayayya.png) center no-repeat;
  background-color: #777777;
}

#page3
{
  width: 40px;
  height: 400px;
  float: left;
  overflow: hidden;
  background: url(http://img11.hostingpics.net/pics/250954thehellelife.png) center no-repeat;
  background-color: #9b9b9b;
}

#page4
{
  width: 40px;
  height: 400px;
  float: left;
  overflow: hidden;
  background: url(http://img11.hostingpics.net/pics/515853theeeeee.png) center no-repeat;
  background-color: #bababa;
}


.current
{
  width: 84% !important;
  height: 400px !important;
}

.contenu_page
{
  width: 100%;
  height: 400px;
 
}

.page_titre
{
  display: inline-block;
  height: 40px;
  width: 400px;
  margin-left: -180px;
  color: #ffffff;
  text-align: center;
  font-size: 24px;
  font-family: arial black;
  letter-spacing: 2px;
  text-shadow: 1px 1px 0px #5f5f5f;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.page_titre:hover
{
  cursor: pointer;

}

.contenu
{
  width: 670px;
  height: 380px;
  margin-left: -180px;
  overflow: none;
  overflow: hidden;
  padding: 6px;
}

.credit
{
  display: block;
  text-align: right;
  margin-right: 20px;
}
.credit a
{
  font-size: 10px;
  text-decoration: none !important;
}



.widget_flottant
{
width: 150px;
height: 175px;

position:fixed;
top: 60px;
right: 10px;
text-shadow:1px 1px 1px black;
background: url('http://images2.alphacoders.com/940/thumbbig-940.jpg');
border: 2px solid darkred;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
}
  .widget_flottante
{
width: 150px;
height: 160px;

position:fixed;
top: 300px;
right: 10px;
text-shadow:1px 1px 1px black;
background: url('http://images2.alphacoders.com/940/thumbbig-940.jpg');
border: 2px solid darkred;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
}

  .widget_flottante2
{
width: 150px;
height: 240px;

position:fixed;
top: 60px;
left: 10px;
text-shadow:1px 1px 1px black;
background: url('http://images2.alphacoders.com/940/thumbbig-940.jpg');
border: 2px solid darkred;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
}
 

.forumline{background-color:transparent;}


.cathead
{
  background: url('http://img15.hostingpics.net/pics/467501catgori11.png') top center no-repeat;
width: 800px;
height: 106px;
  margin: auto; /*Permet de centrer la partie du corps*/
}

.catbody
{
  background: url('http://www.pixyup.com/uploads/252043434ef77cef12e5d.png') center repeat-y;
width: 800px;
  margin: auto;

}

.catfoot
{
  background: url('http://img15.hostingpics.net/pics/200600catgori12.png') bottom center no-repeat;
width: 800px;
height: 106px;
  margin: auto;
}



.forumlink
{
 
display: block;
  color: #7DB3FF; /* Couleur de départ */
text-align: left;
transition: all 5s; /* Durée de la transition, mettez les mêmes valeurs partout, ça sera plus facile */
-moz-transition: all 5s;
-webkit-transition: all 5s;
text-shadow:1px 1px 1px black;

}

/* effet lien catégorie */
a.forumlink:hover
{
        letter-spacing : -1px;; /* Distance lors de l'espacement */
        color: #7DB3FF !important;
        text-decoration: none;
        transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 10s;  /* Temps de déplacement */
        -moz-transition: 10s; /* Temps de déplacement (pour une version en particulier */
        -o-transition: 10s; /* Temps de déplacement (pour une version en particulier */
        -htm-transition: 10s; /* Temps de déplacement (pour une version en particulier */
        -webkit-transition: 10s; /* Temps de déplacement (pour une version en particulier */
}

/*effet autres liens */
a:hover {
        letter-spacing : -1px;; /* Distance lors de l'espacement */
        color: #7DB3FF !important;
        text-decoration: none;
        transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 2s;  /* Temps de déplacement */
        -moz-transition: 2s; /* Temps de déplacement (pour une version en particulier */
        -o-transition: 2s; /* Temps de déplacement (pour une version en particulier */
        -htm-transition: 2s; /* Temps de déplacement (pour une version en particulier */
        -webkit-transition: 2s; /* Temps de déplacement (pour une version en particulier */
        }


.lastpost{
    padding: 2px;
    font-family: verdana;
    font-size: 10px;
    background: url('http://images3.alphacoders.com/555/thumbbig-5.jpg');
    color: #000000;
    border: 2px solid #000000;
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -o-border-radius: 5px;
}



.description
{
  display: block;
  width: 400px;
  margin: auto;
  height: 100px;
  overflow: hidden;
  border: 2px solid #9c9c9c;
  box-shadow: 1px 1px 1px #191817;
  -moz-box-shadow: 1px 1px 1px #191817;
  -htm-box-shadow: 1px 1px 1px #191817;
  -webkit-box-shadow: 1px 1px 1px #191817;
  -o-box-shadow: 1px 1px 1px #191817;
}
.description_contenu
{
  position: absolute;
  display: block;
  width: 391px;
  height: 91px;
  overflow: auto;
  background-color: #191817;
  font-size: 10px;
  color: #9c9c9c;
  text-align: justify;
  padding: 5px;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
  transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.description_contenu:hover
{
  opacity: 0.8;
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  filter: alpha(opacity=80);
  transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}



.avatar_mess
{
  display: block;
  width: 200px;
  height: 400px;
  margin-left: 0px;
  margin-right: 0px;
  overflow: hidden;
  background: url('http://img11.hostingpics.net/pics/484592saaf.png');
  border: 5px solid darkred;
  transform: rotate(-0deg);
  -moz-transform: rotate(-0deg);
  -o-transform: rotate(-0deg);
  -ms-transform: rotate(-0deg);
  -htm-transform: rotate(-0deg);
  -webkit-transform: rotate(-0deg);
  box-shadow: 0px 0px 6px #000000;
  -moz-box-shadow: 0px 0px 6px #000000;
  -o-box-shadow: 0px 0px 6px #000000;
  -htm-box-shadow: 0px 0px 6px #000000;
  -webkit-box-shadow: 0px 0px 6px #000000;
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.avatar_mess:hover
{
  margin-left: 0px;
  transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -htm-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.profil_mess
{
  position: absolute;
  display: block;
  width: 200px;
  height: 400px;
  margin: auto;
  padding: 5px;
  overflow: auto;
  background: white;
  color: #c5bea0;
  font-size: 11px;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.profil_mess:hover
{
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.pseudo_mess
{
  display: block;
  position: relative;
  z-index: 2;
  width: 190px;
  margin-top: -15px;
  margin-left: 10px;
  text-align: center;
  font-size: 18px;
  font-family: WillGrace;
  font-weight: bold;
  text-shadow: 1px 1px 1px black;
  background: Gainsboro;
  padding-top: 5px;
  border-left: 3px solid #371e1a;
  border-right: 3px solid #371e1a;
  border-top: 1px solid #371e1a;
  border-bottom: 1px solid #371e1a;
  box-shadow: 0px 0px 3px #000000;
  -moz-box-shadow: 0px 0px 3px #000000;
  -o-box-shadow: 0px 0px 3px #000000;
  -htm-box-shadow: 0px 0px 3px #000000;
  -webkit-box-shadow: 0px 0px 3px #000000;
}

.row3Right
{
border: none !important;
}
.thHead
{
border: none !important;
}
.thCornerL, .thCornerR, .thTop
{
border: none !important;
}
.thLeft, .thRight
{
border-left: none !important;
border-right: none !important;
}
.catLeft, .catRight
{
border: none! important;
}
.catHead
{
border: none !important;
}
.catBottom
{
border: none !important;
}

        /* icone en ligne-hors ligne */
       
        #post_onlin{
        background: url('http://i75.servimg.com/u/f75/11/95/30/70/m111.png') no-repeat;
        position: absolute;
        float: left;
        width: 19px;
        height: 127px;
        margin-left: -22px;
        margin-top: 30px;
        padding: 0;
        border: 0;
        }
       
       
        /* slide toggle profil */
       
        .slide_profile_TFA{
        position: absolute;
        float: left;
        width: 150px; /* mettre la largeur de la colonne profil */
        margin: 0;
        padding: 0;
        text-align: left;
        }
       
        .slide_profile_TFA ul{
        width: 150px; /* mettre la largeur de la colonne profil */
        margin: 0;
        padding: 0;
        list-style-type: none;
        }
       
        .slide_profile_TFA li{
        text-align: center;
        }
       
        .barre_TFA{
        background: url(http://i75.servimg.com/u/f75/11/95/30/70/i110.png) repeat-x; /* est l'image de fond de la barre d'ouverture du slide toogle */
        line-height: 30px;
        height: 30px;
        border: 1px solid #CC0000;
        cursor : pointer;
        font-family: Arial;
        font-size:13px;
        font-style: italic;
        font-weight: bold;
        vertical-align: middle;
        }
       
        .fleche_ouverture{
        background: url('http://i35.servimg.com/u/f35/11/95/30/70/233.png') no-repeat;
        width: 25px;
        height: 22px;
        border: 0;
        float: right;
        margin-top: 5px;
        margin-right: 10px;
        /margin-top: -25px; /* correction pour IE7 */
        }
       
        .contenu_TFA{ /* correspond au fond qui va contenir tous les éléments du slide toggle */
        line-height: normal;
        width: 350px;
        height: 175px;
        background-color: #928888;
        color: #000;
        border: 1px solid #CC0000;
        text-align: center;
        padding: 5px;
        -moz-border-radius: 0 10px 10px 0;
        -webkit-border-radius: 0 10px 10px 0;
        border-radius: 0 10px 10px 0;
        }
       
        .contenu_TFA a{
        line-height: normal !important;
        }
       
        /* contenu slide toogle */
       
        .mini-avatar{ /* correspond au bloc de l'avatar -gauche- */
        float: left;
        width: 20%; /* mini-avatar et bloc_profil doivent faire environ 90%, il faut aussi compter les marges, bordures */
        height: 100px;
        margin: 2px;
        padding: 3px;
        text-align: center;
        background-color: #303030;
        border: 1px solid #CD5C5C;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        }
       
        .mini-avatar img{ /* correspond au bloc de l'avatar -gauche- */
        width: 60px !important;
        margin: auto;
        }
       
        .block_profile{ /* correspond au bloc du profil -droite- */
        float: right;
        text-align: center;
        width: 70%;
        height: 100px;
        padding: 3px;
        margin: 2px;
        background-color: #303030;
        border: 1px solid #CD5C5C;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        }
       
        .autres_infos{ /* correspond au bloc de la feuille de personnage, à supprimer si non besoin */
        text-align: left;
        width: 95%;
        height: 45px; overflow-y: auto; /* hauteur 45px, si plus grand il y aura une barre de defilement */
        padding: 3px;
        margin: 2px;
        background-color: #303030;
        border: 1px solid #CD5C5C;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        }
       
       
        /* CSS du slide voir le profil (bouton voir le profil) */
       
       
        .icones{
        height: 60px; /* hauteur allouée aux icones du profil */
        }
       
        .voir_profil ul{ /* correspond au bloc contenant le slide -voir le profil- */
        width: 100%;
        text-align: center;
        margin: 0;
        padding: 0;
        border: 0 ;
        list-style-type: none;
        }
       
        .voir_profil li{ /* correspond à l'image de la barre ou bouton qui va ouvrir le slide -voir le profil- */
        font: 12px Arial #000 bold;
        background: url('http://i75.servimg.com/u/f75/11/95/30/70/v10.png') transparent no-repeat;
        width: 156px;
        height: 38px;
        border: 0;
        margin-bottom :12px;
        padding-top: 8px;
        margin-left: auto;
        margin-right: auto;
        }
       
        .voir_info{ /* correspond au texte du bouton */
        color: #000;
        font-family: Arial;
        font-weight: bold;
        font-size: 14px;
        cursor : pointer;
        }
       
        .information{ /* correspond aux informations du profil */
        text-align: left;
        margin-top: 10px;
        margin-left: 4px;
        width: 250px;
        height: 120px; overflow-y: auto; /* hauteur, au dessus de taille indiquée, apparaitra une barre de défilement */
        background-color: #454545;
        color: #000;
        border: 1px solid #000;
        padding: 6px;
        position: relative;
        }

       
        .secondarytitle {
            height: 5px;
        }

        #widget-arrows {
          height: 13px;
        }
        .widget-arrow {
          height: 13px;
          width: 16px;
          border-radius: 4px;
          float: left;
          cursor: pointer;
          background: #f5ebf7 url(http://i.imgur.com/zVQMs.png) no-repeat 0 -13px;
        }
        .widget-arrow.isright {
          float: right;
        }
        .widget-arrow.isleft.isclosed, .widget-arrow.isright.isopened {
          background-position: 0 0;
        }

        div.post_avatar img {
        border:1px solid #000000;
        background:#FFFFFF;
        padding:3px;}


/* Avatar accordéon */
        .avatar_mess
        {
          display: block;
          width: 150px;
          height: 200px;
          margin-left: -5px;
          margin-right: 5px;
          overflow: hidden;
          background: #222222;
          border: 3px solid #000000;
          transform: rotate(-5deg);
          -moz-transform: rotate(-5deg);
          -o-transform: rotate(-5deg);
          -ms-transform: rotate(-5deg);
          -htm-transform: rotate(-5deg);
          -webkit-transform: rotate(-5deg);
          box-shadow: 0px 0px 6px #000000;
          -moz-box-shadow: 0px 0px 6px #000000;
          -o-box-shadow: 0px 0px 6px #000000;
          -htm-box-shadow: 0px 0px 6px #000000;
          -webkit-box-shadow: 0px 0px 6px #000000;
              transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        .avatar_mess:hover
        {
          margin-left: 5px;
          transform: rotate(0deg);
          -moz-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          -htm-transform: rotate(0deg);
          -webkit-transform: rotate(0deg);
              transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        .profil_mess
        {
          position: absolute;
          display: block;
          width: 140px;
          height: 190px;
          margin: auto;
          padding: 5px;
          overflow: auto;
          background: #222222;
          color: #ffffff;
          font-size: 11px;
          opacity: 0;
          -moz-opacity: 0;
          -khtml-opacity: 0;
          filter: alpha(opacity=0);
              transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }

        .profil_mess:hover
        {
          opacity: 1;
          -moz-opacity: 1;
          -khtml-opacity: 1;
          filter: alpha(opacity=100);
              transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        .pseudo_mess
        {
          display: block;
          position: relative;
          z-index: 2;
          width: 140px;
          margin-top: -15px;
          margin-left: 10px;
          text-align: center;
          font-size: 18px;
          font-family: courier;
          font-weight: bold;
          text-shadow: 0px 0px 0px;
          background: ##222222;
          padding-top: 5px;
          border-left: 1px solid #000000;
          border-right: 1px solid #000000;
          border-top: 1px solid #000000;
          border-bottom: 1px solid #000000;
          box-shadow: 0px 0px 3px #000000;
          -moz-box-shadow: 0px 0px 3px #000000;
          -o-box-shadow: 0px 0px 3px #000000;
          -htm-box-shadow: 0px 0px 3px #000000;
          -webkit-box-shadow: 0px 0px 3px #000000;
        }
      .rang_groupes
        { display: block;
          position: relative;
          z-index: 2;
          width: 140px;
          margin-top: 15px;
          margin-left: 10px;
          font-size: 11px;
          font-family: courier;
          text-align: center;
          font-weight: bold;
          text-shadow: 0px 0px 0px;
          background: ##222222;
          padding-top: 5px;
          -moz-box-shadow: 0px 0px 3px #000000;
          -o-box-shadow: 0px 0px 3px #000000;
          -htm-box-shadow: 0px 0px 3px #000000;
          -webkit-box-shadow: 0px 0px 3px #000000;
         
        }
 

Merci.

[MlleAlys]

Bonjour,
Vous souhaitez appliquer exactement le même effet sur tous les liens, c'est ça ? Avec la même durée de transition ? Parce que quand je regarde votre css, je vois du 2s, du 5s et même du 10s, alors je me perds un peu dans ce que vous souhaitez avoir au final comme durée de transition ^^"

[Outis]

Oui, c'est bien ça.
J'ai tenté plusieurs durées différentes.
Il y a que cela semble bien fonctionner sur IE ou Chrome mais pas sur Firefox.
Sur Firefox, le mouvement est instantané, là je viens de remettre pourtant tout à 10s sans que ça change rien.

[MlleAlys]

ok, essayez avec ce code css :

Code:

.onglet {
    display:inline-block;
    margin-left:3px;
    margin-right:3px;
    padding:3px;
    cursor:pointer;
    border: 2px solid darkred;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border-radius: 13px;
}
.onglet_0 {
    background: url('http://images2.alphacoders.com/940/thumbbig-940.jpg');
    border-bottom:1px solid black;
    border: 2px solid darkred;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border-radius: 13px;
}
.onglet_1 {
    background: url('http://images2.alphacoders.com/940/thumbbig-940.jpg');
    border-bottom:0px solid black;
    padding-bottom:4px;
    border: 2px solid darkred;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border-radius: 13px;
}
.contenu_onglet {
    background: url('http://images2.alphacoders.com/940/thumbbig-940.jpg');
    margin-top:-1px;
    padding:5px;
    display:none;
    border: 2px solid darkred;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border-radius: 13px;
}
ul {
    margin-top:0px;
    margin-bottom:0px;
    margin-left:-10px
}
h1 {
    margin:0px;
    padding:0px;
}
#accueil {
    width: 900px;
    height: 400px;
    overflow: hidden;
    background: url(http://img11.hostingpics.net/pics/297192fondepa.png) center no-repeat;
    border: 2px solid darkred;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border-radius: 13px;
}
#page1 {
    width: 40px;
    height: 400px;
    float: left;
    overflow: hidden;
    background: url(http://img15.hostingpics.net/pics/869873nombriliste.png) center no-repeat;
    background-color: #555555;
}
#page2 {
    width: 40px;
    height: 400px;
    float: left;
    overflow: hidden;
    background: url(http://img11.hostingpics.net/pics/521806ayayayayayayya.png) center no-repeat;
    background-color: #777777;
}
#page3 {
    width: 40px;
    height: 400px;
    float: left;
    overflow: hidden;
    background: url(http://img11.hostingpics.net/pics/250954thehellelife.png) center no-repeat;
    background-color: #9b9b9b;
}
#page4 {
    width: 40px;
    height: 400px;
    float: left;
    overflow: hidden;
    background: url(http://img11.hostingpics.net/pics/515853theeeeee.png) center no-repeat;
    background-color: #bababa;
}
.current {
    width: 84% !important;
    height: 400px !important;
}
.contenu_page {
    width: 100%;
    height: 400px;
}
.page_titre {
    display: inline-block;
    height: 40px;
    width: 400px;
    margin-left: -180px;
    color: #ffffff;
    text-align: center;
    font-size: 24px;
    font-family: arial black;
    letter-spacing: 2px;
    text-shadow: 1px 1px 0px #5f5f5f;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.page_titre:hover {
    cursor: pointer;
}
.contenu {
    width: 670px;
    height: 380px;
    margin-left: -180px;
    overflow: hidden;
    padding: 6px;
}
.credit {
    display: block;
    text-align: right;
    margin-right: 20px;
}
.credit a {
    font-size: 10px;
}
.widget_flottant {
    width: 150px;
    height: 175px;
    position:fixed;
    top: 60px;
    right: 10px;
    text-shadow:1px 1px 1px black;
    background: url('http://images2.alphacoders.com/940/thumbbig-940.jpg');
    border: 2px solid darkred;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border-radius: 13px;
}
.widget_flottante {
    width: 150px;
    height: 160px;
    position:fixed;
    top: 300px;
    right: 10px;
    text-shadow:1px 1px 1px black;
    background: url('http://images2.alphacoders.com/940/thumbbig-940.jpg');
    border: 2px solid darkred;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border-radius: 13px;
}
.widget_flottante2 {
    width: 150px;
    height: 240px;
    position:fixed;
    top: 60px;
    left: 10px;
    text-shadow:1px 1px 1px black;
    background: url('http://images2.alphacoders.com/940/thumbbig-940.jpg');
    border: 2px solid darkred;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border-radius: 13px;
}
.forumline {
    background-color:transparent;
}
.cathead {
    background: url('http://img15.hostingpics.net/pics/467501catgori11.png') top center no-repeat;
    width: 800px;
    height: 106px;
    margin: auto; /*Permet de centrer la partie du corps*/
}
.catbody {
    background: url('http://www.pixyup.com/uploads/252043434ef77cef12e5d.png') center repeat-y;
    width: 800px;
    margin: auto;
}
.catfoot {
    background: url('http://img15.hostingpics.net/pics/200600catgori12.png') bottom center no-repeat;
    width: 800px;
    height: 106px;
    margin: auto;
}
.forumlink {
    display: block;
    color: #7DB3FF;
    text-align: left;
    text-shadow:1px 1px 1px black;
}
/*effet liens */
a {
    text-decoration: none !important;
    letter-spacing:0px;
}
a:hover {
    letter-spacing : -1px; /* Distance lors de l'espacement */
    -moz-transition: letter-spacing 2s ease; /* Temps de déplacement (pour une version en particulier */
    -o-transition: letter-spacing 2s ease; /* Temps de déplacement (pour une version en particulier */
    -htm-transition: letter-spacing 2s ease; /* Temps de déplacement (pour une version en particulier */
    -webkit-transition: letter-spacing 2s ease; /* Temps de déplacement (pour une version en particulier */
    transition: letter-spacing 2s ease; /* Temps de déplacement */
}
.lastpost {
    padding: 2px;
    font-family: verdana;
    font-size: 10px;
    background: url('http://images3.alphacoders.com/555/thumbbig-5.jpg');
    color: #000000;
    border: 2px solid #000000;
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
.description {
    display: block;
    width: 400px;
    margin: auto;
    height: 100px;
    overflow: hidden;
    border: 2px solid #9c9c9c;
    -moz-box-shadow: 1px 1px 1px #191817;
    -htm-box-shadow: 1px 1px 1px #191817;
    -webkit-box-shadow: 1px 1px 1px #191817;
    -o-box-shadow: 1px 1px 1px #191817;
    box-shadow: 1px 1px 1px #191817;
}
.description_contenu {
    position: absolute;
    display: block;
    width: 391px;
    height: 91px;
    overflow: auto;
    background-color: #191817;
    font-size: 10px;
    color: #9c9c9c;
    text-align: justify;
    padding: 5px;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    filter: alpha(opacity=0);
    opacity: 0;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
.description_contenu:hover {
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
.avatar_mess {
    display: block;
    width: 200px;
    height: 400px;
    margin-left: 0px;
    margin-right: 0px;
    overflow: hidden;
    background: url('http://img11.hostingpics.net/pics/484592saaf.png');
    border: 5px solid darkred;
    -moz-transform: rotate(-0deg);
    -o-transform: rotate(-0deg);
    -ms-transform: rotate(-0deg);
    -htm-transform: rotate(-0deg);
    -webkit-transform: rotate(-0deg);
    transform: rotate(-0deg);
    -moz-box-shadow: 0px 0px 6px #000000;
    -o-box-shadow: 0px 0px 6px #000000;
    -htm-box-shadow: 0px 0px 6px #000000;
    -webkit-box-shadow: 0px 0px 6px #000000;
    box-shadow: 0px 0px 6px #000000;
}
.profil_mess {
    position: absolute;
    display: block;
    width: 200px;
    height: 400px;
    margin: auto;
    padding: 5px;
    overflow: auto;
    background: white;
    color: #c5bea0;
    font-size: 11px;
    opacity: 0;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    filter: alpha(opacity=0);
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
.profil_mess:hover {
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    opacity: 1;
}
.pseudo_mess {
    display: block;
    position: relative;
    z-index: 2;
    width: 190px;
    margin-top: -15px;
    margin-left: 10px;
    text-align: center;
    font-size: 18px;
    font-family: WillGrace;
    font-weight: bold;
    background: Gainsboro;
    padding-top: 5px;
    border-left: 3px solid #371e1a;
    border-right: 3px solid #371e1a;
    border-top: 1px solid #371e1a;
    border-bottom: 1px solid #371e1a;
    -moz-box-shadow: 0px 0px 3px #000000;
    -o-box-shadow: 0px 0px 3px #000000;
    -htm-box-shadow: 0px 0px 3px #000000;
    -webkit-box-shadow: 0px 0px 3px #000000;
    box-shadow: 0px 0px 3px #000000;
}
.row3Right {
    border: none !important;
}
.thHead {
    border: none !important;
}
.thCornerL, .thCornerR, .thTop {
    border: none !important;
}
.thLeft, .thRight {
    border-left: none !important;
    border-right: none !important;
}
.catLeft, .catRight {
    border: none! important;
}
.catHead {
    border: none !important;
}
.catBottom {
    border: none !important;
}
/* icone en ligne-hors ligne */
 #post_onlin {
    background: url('http://i75.servimg.com/u/f75/11/95/30/70/m111.png') no-repeat;
    position: absolute;
    float: left;
    width: 19px;
    height: 127px;
    margin-left: -22px;
    margin-top: 30px;
    padding: 0;
    border: 0;
}


/* slide toggle profil */
 .slide_profile_TFA {
    position: absolute;
    float: left;
    width: 150px; /* mettre la largeur de la colonne profil */
    margin: 0;
    padding: 0;
    text-align: left;
}
.slide_profile_TFA ul {
    width: 150px; /* mettre la largeur de la colonne profil */
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.slide_profile_TFA li {
    text-align: center;
}
.barre_TFA {
    background: url(http://i75.servimg.com/u/f75/11/95/30/70/i110.png) repeat-x; /* est l'image de fond de la barre d'ouverture du slide toogle */
    line-height: 30px;
    height: 30px;
    border: 1px solid #CC0000;
    cursor : pointer;
    font-family: Arial;
    font-size:13px;
    font-style: italic;
    font-weight: bold;
    vertical-align: middle;
}
.fleche_ouverture {
    background: url('http://i35.servimg.com/u/f35/11/95/30/70/233.png') no-repeat;
    width: 25px;
    height: 22px;
    border: 0;
    float: right;
    margin-top: 5px;
    margin-right: 10px;
    /margin-top: -25px; /* correction pour IE7 */
}
.contenu_TFA { /* correspond au fond qui va contenir tous les éléments du slide toggle */
    line-height: normal;
    width: 350px;
    height: 175px;
    background-color: #928888;
    color: #000;
    border: 1px solid #CC0000;
    text-align: center;
    padding: 5px;
    -moz-border-radius: 0 10px 10px 0;
    -webkit-border-radius: 0 10px 10px 0;
    border-radius: 0 10px 10px 0;
}
.contenu_TFA a {
    line-height: normal !important;
}
/* contenu slide toogle */
 .mini-avatar { /* correspond au bloc de l'avatar -gauche- */
    float: left;
    width: 20%; /* mini-avatar et bloc_profil doivent faire environ 90%, il faut aussi compter les marges, bordures */
    height: 100px;
    margin: 2px;
    padding: 3px;
    text-align: center;
    background-color: #303030;
    border: 1px solid #CD5C5C;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.mini-avatar img { /* correspond au bloc de l'avatar -gauche- */
    width: 60px !important;
    margin: auto;
}
.block_profile { /* correspond au bloc du profil -droite- */
    float: right;
    text-align: center;
    width: 70%;
    height: 100px;
    padding: 3px;
    margin: 2px;
    background-color: #303030;
    border: 1px solid #CD5C5C;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.autres_infos { /* correspond au bloc de la feuille de personnage, à supprimer si non besoin */
    text-align: left;
    width: 95%;
    height: 45px;
    overflow-y: auto; /* hauteur 45px, si plus grand il y aura une barre de defilement */
    padding: 3px;
    margin: 2px;
    background-color: #303030;
    border: 1px solid #CD5C5C;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
/* CSS du slide voir le profil (bouton voir le profil) */
 .icones {
    height: 60px; /* hauteur allouée aux icones du profil */
}
.voir_profil ul { /* correspond au bloc contenant le slide -voir le profil- */
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
}
.voir_profil li { /* correspond à l'image de la barre ou bouton qui va ouvrir le slide -voir le profil- */
    font: 12px Arial #000 bold;
    background: url('http://i75.servimg.com/u/f75/11/95/30/70/v10.png') transparent no-repeat;
    width: 156px;
    height: 38px;
    border: 0;
    margin-bottom :12px;
    padding-top: 8px;
    margin-left: auto;
    margin-right: auto;
}
.voir_info { /* correspond au texte du bouton */
    color: #000;
    font-family: Arial;
    font-weight: bold;
    font-size: 14px;
    cursor : pointer;
}
.information { /* correspond aux informations du profil */
    text-align: left;
    margin-top: 10px;
    margin-left: 4px;
    width: 250px;
    height: 120px;
    overflow-y: auto; /* hauteur, au dessus de taille indiquée, apparaitra une barre de défilement */
    background-color: #454545;
    color: #000;
    border: 1px solid #000;
    padding: 6px;
    position: relative;
}
.secondarytitle {
    height: 5px;
}
#widget-arrows {
    height: 13px;
}
.widget-arrow {
    height: 13px;
    width: 16px;
    border-radius: 4px;
    float: left;
    cursor: pointer;
    background: #f5ebf7 url(http://i.imgur.com/zVQMs.png) no-repeat 0 -13px;
}
.widget-arrow.isright {
    float: right;
}
.widget-arrow.isleft.isclosed, .widget-arrow.isright.isopened {
    background-position: 0 0;
}
div.post_avatar img {
    border:1px solid #000000;
    background:#FFFFFF;
    padding:3px;
}
/* Avatar accordéon */
 .avatar_mess {
    display: block;
    width: 150px;
    height: 200px;
    margin-left: -5px;
    margin-right: 5px;
    overflow: hidden;
    background: #222222;
    border: 3px solid #000000;
    -moz-box-shadow: 0px 0px 6px #000000;
    -o-box-shadow: 0px 0px 6px #000000;
    -htm-box-shadow: 0px 0px 6px #000000;
    -webkit-box-shadow: 0px 0px 6px #000000;
    box-shadow: 0px 0px 6px #000000;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
.avatar_mess:hover {
    margin-left: 5px;
}
.profil_mess {
    position: absolute;
    display: block;
    width: 140px;
    height: 190px;
    margin: auto;
    padding: 5px;
    overflow: auto;
    background: #222222;
    color: #ffffff;
    font-size: 11px;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    filter: alpha(opacity=0);
    opacity: 0;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
.profil_mess:hover {
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    opacity: 1;
}
.pseudo_mess {
    display: block;
    position: relative;
    z-index: 2;
    width: 140px;
    margin-top: -15px;
    margin-left: 10px;
    text-align: center;
    font-size: 18px;
    font-family: courier;
    font-weight: bold;
    text-shadow: 0px 0px 0px;
    background: #222222;
    padding-top: 5px;
    border: 1px solid #000000;
    -moz-box-shadow: 0px 0px 3px #000000;
    -o-box-shadow: 0px 0px 3px #000000;
    -htm-box-shadow: 0px 0px 3px #000000;
    -webkit-box-shadow: 0px 0px 3px #000000;
    box-shadow: 0px 0px 3px #000000;
}
.rang_groupes {
    display: block;
    position: relative;
    z-index: 2;
    width: 140px;
    margin-top: 15px;
    margin-left: 10px;
    font-size: 11px;
    font-family: courier;
    text-align: center;
    font-weight: bold;
    text-shadow: 0px 0px 0px;
    background: #222222;
    padding-top: 5px;
    -moz-box-shadow: 0px 0px 3px #000000;
    -o-box-shadow: 0px 0px 3px #000000;
    -htm-box-shadow: 0px 0px 3px #000000;
    -webkit-box-shadow: 0px 0px 3px #000000;
    box-shadow: 0px 0px 3px #000000;
}

quelques remaques :
- les transform:all; n'apportent rien, la valeur "all" ne fonctionne pas avec la propriété transform ^^, donc beaucoup de lignes inutiles retirées
- lorsque vous utilisez des transitions au passage de la souris, inutile de tout remettre dans l'élément :hover, juste préciser ce qui change. Inutile également de remettre les propriétés de transitions si elle sont déjà dans l'élément sans :hover ^^
- pour toutes les propriétés qui demandent des préfixes en fonction du navigateur, il vaut mieux mettre la propriété générique, c'est à dire sans préfixe, à la fin des autres plutôt qu'au début, ça fonctionne aussi sinon, mais c'est plus rigoureux puisque c'est celle qui est sensée fonctionner de manière générale et que le navigateur commence à lire le css par le bas ^^

Pour en revenir au sujet, j'ai appliqué la transition des liens simplement sur a et a:hover, il faut voir si ça ne fonctionne pas pour certains et ajouter ce qu'il manque, mais commençons au moins par le plus simple x3
Ah et, pour Firefox, c'est parce que ce navigateur demande la valeur de départ, pour faire une transition vers -1px, il fallait lui préciser que l'espace de départ était 0px, aussi ajouté dans le code au dessus ^^


Bref, dites moi où il y a des problèmes ? ^^"

[Outis]

Merci, le code fonctionne bien cette fois.

Merci aussi pour les explications qui m'éclairent sur le fonctionnement du code.

[MlleAlys]

super ! o/
et de rien ^^
(n'oubliez pas d'éditer votre premier message pour cocher l'icone "résolu" ^^)