Rappel du premier message :



Merci d'avance des 28 petits heureux que vous ferez sur mon forum !

Coucou Nihil,

Alors, j'ai bien fait toutes les modifications, et il doit y avoir un petit soucis d'affichage. Je te laisses regarder :




Trop de texte dans la barre de navigation ?

Coucou, 

Alors après rafraîchissement et suppression du cache, le "Déconnexion (nom d'utilisateur)" s'affiche bien comme il faut, mais je n'ai pas l'avatar qui s'affiche.

Oups je suis étourdie moi

Dans le template overall_header, juste en dessous de la div avec la barre de navigation il y a ceci à rajouter :

Code:

<!-- BEGIN switch_user_logged_in -->
    <div class="fa_avatar js-useravatar"></div>
<!-- END switch_user_logged_in -->

Ca donne donc comme "code total" (barre de navigation + avatar) :

Code:

<div class="generated_nav_bar">{GENERATED_NAV_BAR}</div>
<!-- BEGIN switch_user_logged_in -->
    <div class="fa_avatar js-useravatar"></div>
<!-- END switch_user_logged_in -->

Voilà, désolée pour le retard ! :)

Merci Nihil.

Alors tout fonctionne correctement, il va simplement que je modifie deux trois trucs au niveau du style :

• Rapprocher le "Bienvenue utilisateur" de l'image de l'avatar, pour le coller davantage à ce dernier
  
• Changer la couleur du cercle de l'avatar, pour y mettre la couleur de bordure du menu.
  
• Harmoniser le style entre les boutons du menu et "Bienvenue utilisateur" / Notifications
  
• Supprimer les boutons "Connexion/S'enregistrer" version barre de navigation pour les non log-in
  

Sans coder tout toi-même, peut-être pourrais-tu m'indiquer où j'agis sur ces paramètres, et quel genre de code je peux utiliser ? (As-tu des codes sympathiques pour l'animation des liens, le menu de Never Utopia, par exemple, es très réussi en la matière).


Enfin, je souhaiterais avoir ton avis sur les doublons qui existent entre le sous panneau de l'utilisateur et les boutons du menu, comme messagerie, profil, etc... Crois-tu que c'est intéressant de les conserver ?

Coucou :)

- Pour la bordure de l'avatar, le CSS est ici :

Code:

/* rond avec l.avatar */
.fa_avatar {
    background: #969DC1;
    width: 50px;
    height: 50px;
    position: fixed;
    border-radius: 50%;
    top: 7px;
    left: 135px;
    z-index: 999;
    border: 2px solid #65511A;
    box-shadow: 0 0 5px black;
    overflow: hidden;
}

Il faut changer la couleur #65511A à cette ligne là :

Code:

border: 2px solid #65511A;

- Pour l'espacement entre le "Bienvenue" et l'avatar, tu vas pouvoir changer la valeur de left ici :

Code:

/* Menu welcome */
#fa_menu {
    position: fixed;
    top: 0px;
    left: 200px;
}

- Afin de styliser les liens "Bienvenue" et "Notifications", tu peux ajouter et modifier ceci :

Code:

#fa_notifications, #fa_welcome {
    color: #dea37e!important;
    font-family: Corbel;
    font-size: 14px;
    font-variant: small-caps;
    letter-spacing: 1px;
}

- En mode déconnecté, on va retirer les liens en double de la toolbar grâce à ceci => Toolbar > Cacher les liens Connexion et S'enregistrer
Je viens d'ailleurs de m'apercevoir d'un petit bug en mode déconnecté qu'il faut que je pense à changer, le contenu est mal centré sur les "petits écrans" .

Enfin, les animations, en général je les fais moi même, je n'ai pas forcément de code "tout fait" sous la main, car la toolbar est un peu "saoulante" à modifier si on a pas l'habitude (donc même avec un code tout fait tu aurais un peu de mal ><), et ici je reprends la toolbar directement (sur Never Utopia, c'est un nouvel élément totalement codé de A à Z).

Les liens dupliqués peuvent facilement être supprimés si besoin ^^. Personnellement je dois avouer que je n'ouvre presque jamais ce menu :/
Comme c'est quelque chose qui se déclenche au clic, cela ne me dérange pas qu'il y ait des doublons, je ne passe vraiment que très rarement dessus, donc son apparence ne me dérange pas trop.
Pour te donner une idée, voici ce que pourrait voir un membre si on enlève les liens d'édition du profil & vers les MP : https://i.imgur.com/5qdgq9P.png

Voilà voilà, désolée pour cette réponse un peu rapide, je file retourner bosser pour les cours moi

Merci Nihil, je suis en train de bidouiller le code. Pourrais-tu me dire comment je peux modifier la hauteur de la barre ? J'ai essayé quelque chose, mais ça provoque de nombreux bug... 

[url=novus.web-rpg.com]HAVE A LOOK [/url]

Il faudrait "descendre" les liens de la Navbarre au même niveau que les autres.
En fait, je cherche à mettre le Bienvenue utilisateur sur deux lignes pour décharger le menu.

Egalement, je voudrais changer le style du menu des notifications. Peut-être faudrait-il que j'ouvre un nouveau topic dédié spécialement au style ?


Bon courage pour tes cours !

En fait, je n'ai pas fait le style des notifications encore, je comptais l'ajouter une fois qu'on s'était mises d'accord pour la zone Bienvenue (comme ça on peut mettre le même).

Je me suis créée un compte temporaire sur ton forum histoire de pouvoir voir la barre en tant que membre connectée ! Tu pourras ensuite le supprimer sans soucis ^^

Si je comprends bien tu veux baisser → la zone Bienvenue, la zone Notification, c'est ça ? :)

Merci Nihil de ta persévérance.

Alors en effet, je voudrais baisser la zone bienvenue et notifications, pour la mettre au même niveau que le menu, tout en permettant d'afficher le "Bienvenue Joueur X" sur deux lignes, sans déstabiliser l'affichage général.

Je souhaiterais également que les liens deviennent blanc au surlignage, dans les deux menus. 


Merci encore, j'espère que tes cours de sont bien terminés !

Coucou :)

Je ne suis pas sur mon écran habituel à cause d'un petit soucis, et ça me complique la vie pour finir ta demande :'(

Du coup je vais répondre petit à petit, pour descendre la zone notification :

Code:

/* centrer le texte Notification verticalement */
#fa_toolbar #fa_notifications {
    line-height: 40px;
}


Pour mettre sur 2 lignes le Bienvenue :

Code:

#fa_welcome {
    width: 100px;
    line-height: 1.2;
    padding-top: 5px;
}

D'accord Nihil, je t'en fais pas. Je vais implémenter progressivement tes modifications :)

J'ai ajouté les codes que tu m'as donné.

Mon code actuel est le suivant :

Code:

/* LIBRE SERVICE NEVER UTOPIA
 * Barre de navigation + toolbar
*/

/* Style général */
.generated_nav_bar {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
    top: 0;

    background-image: url(http://i35.servimg.com/u/f35/16/65/12/73/fondme11.jpg);
    border-bottom: 3px solid #28282A;
    box-shadow: 0 0 5px #000;
   
    text-align: center;
    white-space: nowrap;
    line-height: 40px;
   
    opacity: 0.85;
}

/* Liens dans la navbar */
.generated_nav_bar .mainmenu {
    color: #dea37e;
    font-family: Corbel;
    font-size: 14px;
    font-weight: lighter;
    margin: 5px;
    border: none;
    font-variant: small-caps;
    letter-spacing: 1px;
}

#fa_toolbar {
    margin-top: -30px; /* On cache la toolbar en haut */
    opacity: 0.85;
    font-variant: small-caps;
}

/* bouton pour ouvrir fermer la toolbar */
#fa_toolbar_hidden, #fa_toolbar #fa_hide, #fa_toolbar_hidden { display: none!important;}

/* rond avec l.avatar */
.fa_avatar {
    background: #969DC1;
    width: 50px;
    height: 50px;
    position: fixed;
    border-radius: 50%;
    top: 7px;
    left: 135px;
    z-index: 999;
    border: 2px solid #25262b;
    box-shadow: 0 0 5px black;
    overflow: hidden;
}

/* centrage avatatar */
.fa_avatar img {
    width: 100%;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
        transform: translateY(-50%);
}


/* placement crédits Toolbar NE PAS ENLEVER ! ! ! */
#fa_left {
    position: fixed;
    top: 2px;
    left: 7px;
}

/* Placement texte notifications */
#fa_right {
    position: fixed;
    right: 0px;
    top: 0px;
}

/* Placement popup notif */
#notif_list {
    position: fixed;
    right: 0;
    left: auto!important;
    border-right: 0!important;
}

/* Placement popup notif live */
#live_notif {
    position: fixed!important;
    top: 50px!important;
    right: 50px!important;
}

/* Menu welcome */
#fa_menu {
    position: fixed;
    top: 0px;
    left: 200px;
}

/* Adaptations pour les petits écrans */
@media screen and (max-width: 1360px) {
  .generated_nav_bar {
      padding-left: 285px;
  }
}

@media screen and (min-width: 1360px) and (max-width: 1510px) {
  .generated_nav_bar {
      padding-left: 200px;
  }
}

/* centrer le texte Notification verticalement */
#fa_toolbar #fa_notifications {
    line-height: 40px;
}
/* On enleve la partie gauche de la zone Welcome */
#fa_usermenu { display: none; }

/* Style de la zone welcome*/
#fa_menu #fa_menulist {
  padding-left: 10px;
  border: 0;
  left: 0!important;
}

#fa_welcome {
    width: 150px;
    line-height: 1.2;
    padding-top: 5px;
}

#fa_notifications, #fa_welcome {
    color: #dea37e!important;
    font-family: Corbel;
    font-size: 14px;
    font-variant: small-caps;
    letter-spacing: 1px;
}

#fa_menu #fa_menulist :link, #fa_menu #fa_menulist :visited { color: inherit!important; }

#fa_menu #fa_menulist, #fa_toolbar #fa_right.welcome #fa_menu #fa_welcome {
    background: #27313D;
    color: #E2A582;
}

#fa_right #fa_menu #fa_menulist {
    display: block;
    visibility: hidden;
    -webkit-transition: all 300ms;
    transition: all 300ms;
    opacity: 0;
    overflow: hidden;
}

#fa_right.welcome #fa_menu #fa_menulist {
    visibility: visible;  opacity: 1;
}

#fa_toolbar #fa_right #fa_menu .fa_separator {
  background: #E2A582;
}

#fa_right #fa_menu #fa_menulist li {
    -webkit-transform: translateX(-245px);
        -ms-transform: translateX(-245px);
            transform: translateX(-245px);
    -webkit-transition: all 300ms 50ms;
    transition: all 300ms 50ms;
}


#fa_right.welcome #fa_menu #fa_menulist li {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
}

/*  Animation menu Welcome */
#fa_right #fa_menu #fa_menulist li:nth-child(2) {-webkit-transition-delay: 100ms;transition-delay: 100ms;}
#fa_right #fa_menu #fa_menulist li:nth-child(3) {-webkit-transition-delay: 150ms;transition-delay: 150ms;}
#fa_right #fa_menu #fa_menulist li:nth-child(4) {-webkit-transition-delay: 200ms;transition-delay: 200ms;}
#fa_right #fa_menu #fa_menulist li:nth-child(5) {-webkit-transition-delay: 250ms;transition-delay: 250ms;}
#fa_right #fa_menu #fa_menulist li:nth-child(6) {-webkit-transition-delay: 300ms;transition-delay: 300ms;}
#fa_right #fa_menu #fa_menulist li:nth-child(7) {-webkit-transition-delay: 350ms;transition-delay: 350ms;}
#fa_right #fa_menu #fa_menulist li:nth-child(8) {-webkit-transition-delay: 400ms;transition-delay: 400ms;}
#fa_right #fa_menu #fa_menulist li:nth-child(9) {-webkit-transition-delay: 450ms;transition-delay: 450ms;}
#fa_right #fa_menu #fa_menulist li:nth-child(10) {-webkit-transition-delay: 500ms;transition-delay: 500ms;}
#fa_right #fa_menu #fa_menulist li:nth-child(11) {-webkit-transition-delay: 550ms;transition-delay: 550ms;}
#fa_welcome { -webkit-transition: all 300ms; transition: all 300ms;}

/* Boutons connexion / enregistrement de la toolbar */
#fa_right a[href$="login"],
#fa_right a[href$="register"] {
    display: none!important;
}

En tous cas mes membres nous voient faire la réfection de la barre de navigation, et même si on voit bien qu'elle est en travaux pour le moment, ils adorent !

Alors, pour la partie Bienvenue, ça sera mieux comme ça :

Code:

#fa_toolbar #fa_welcome {
    width: 150px;
    line-height: 1.2;
    padding-top: 5px;
}

Pour les liens blancs, on va ajouter juste après:

Code:

#fa_menu #fa_menulist :link, #fa_menu #fa_menulist :visited { color: inherit!important; }


Ceci :

Code:

#fa_menu #fa_menulist a:hover, #fa_notifications:hover, #fa_welcome:hover { color: #ffffff!important; }

J'ai récupéré un vieil écran en 1024 * 768, une antiquité haha, ça fait tellement bizarre et pas du tout pratique pour coder x)

Bon pas évident le vieil écran. Tu es parti en vacances au fin fond de la France ? :)


J'ai ajouté tes changements. Le texte de Bienvenue est bien circonscrit dans l'espace de la Toolbar. Le hoovering en blanc est aussi actif. 


Par contre, Bienvenue et Notifications ne sont pas centrés, et mangent donc toujours un peu sur la toolbar.

Par ailleurs, lorsqu'on a mis le Bienvenue sur deux lignes, on a réduit l'espace de son cadre. Est-ce que tu crois qu'on pourrait ajuster la taille du cadre du menu Bienvenue (celui qui apparaît au clic) sur ces mêmes dimensions ?

Allez, le combat avec le super écran est reparti

Pour aligner le Notifications, on va remplacer :

Code:

#fa_toolbar #fa_notifications {
    line-height: 40px;
}

Pour rajouter un sélecteur de plus histoire d'être sûr de dépasser le code de FA

Code:

#fa_toolbar #fa_right #fa_notifications{
    line-height: 40px;
}

Ici le 40px correspond à la hauteur de la barre :)
Pour centrer le bienvenue, je te conseille de toucher à cette partie du CSS là en jouant avec la valeur du padding-top pour avoir un rendu qui te convient (plus la valeur est haute, plus le tout descendra) :

Code:

#fa_toolbar #fa_welcome {
    width: 150px;
    line-height: 1.2;
    padding-top: 5px;
}

Pour la largeur de Menu "Bienvenue" :

Code:

/* Menu en dessous de Bienvenue */
#fa_menu #fa_menulist {
    min-width: 0;
    width: 140px;
}

Ne perdons pas espoir, nous arriverons à terminer un jour cette demande

Nihil !

Je crois que cette fois-ci c'est la bonne !

Le texte est parfaitement centré, aucun chevauchement. Ca me semble perfect.


Il ne manque plus qu'une chose, le style du menu des notifications et on est bons !


Merci beaucoup.

Top top 8D

Alors, lets go !

Code:

#fa_menu #fa_menulist, #fa_toolbar #fa_right.welcome #fa_menu #fa_welcome {
    background: #27313D;
    color: #E2A582;
}

#fa_right #fa_menu #fa_menulist {
    display: block;
    visibility: hidden;
    -webkit-transition: all 300ms;
    transition: all 300ms;
    opacity: 0;
    overflow: hidden;
}

#fa_right.welcome #fa_menu #fa_menulist {
    visibility: visible;  opacity: 1;
}

Tout ce petit code, on va le remplacer par ceci :

Code:

#fa_menu #fa_menulist,
#fa_toolbar #fa_right.welcome #fa_menu #fa_welcome,
#fa_toolbar #fa_right #notif_list {
    background: #27313D!important;
    color: #E2A582!important;
}

#fa_toolbar #fa_right #notif_list li,
#fa_toolbar #fa_right #fa_notifications + #notif_list li .contentText a {
    color: inherit!important;
}


#fa_right #fa_menu #fa_menulist,
#fa_toolbar #fa_right #fa_notifications + #notif_list
 {
    display: block;
    visibility: hidden;
    -webkit-transition: all 600ms;
    transition: all 600ms;
    opacity: 0;
    overflow: hidden;
}


#fa_right.welcome #fa_menu #fa_menulist,
#fa_toolbar #fa_right.notification #fa_notifications + #notif_list {
    visibility: visible;  opacity: 1;
}
  
#fa_toolbar #fa_right #notif_list li hr {
   border-color: #E2A582!important;
}


Normalement il ne restera plus qu'une transition à rajouter je suppose x_x

EDIT :

Plus ceci pour les liens en blancs dans les notifications (au survol) xD

Code:

#fa_toolbar #fa_right #fa_notifications + #notif_list li .contentText a:hover {
    color: white!important;
}

Parfait ! Mais comme il faut bien nous ennuyer un peu, le fond de derrière le texte "Notifications" reste blanc, alors qu'il devrait passer lui aussi au "gris". :)

Ah oui, je ne l'ai pas sur mon forum test car c'est le fond des notications non lues je crois

Du coup tu peux mettre :

Code:

#fa_toolbar #fa_right #notif_list li.unread {
    background-color: #485B71!important;
}

Et remplacer si tu veux #485B71 par le code d'une autre couleur pour mettre en avant les notifications non lues par rapport aux autres :)
Sinon tu mets 27313D qui est la couleur de fond de base ^^

C'est une bonne idée merci !

Mais en fait, je parlais plutôt du fond qui apparait derrière l'intitulé "Notifications" lorsqu'on clic dessus. Est-ce plus clair ou veux-tu que je fasse un screen que tu pourras contempler sur ton superbe écran de fortune ? :)


EDIT : Et pour terminer, quelle est la valeur que je dois changer pour déplacer le menu vers la gauche ? (Rapprocher "Acceuil" de "Bienvenue"), car je vois qu'il est mal centré, notamment pour les utilisateurs non connectés...

Joyeux Noel !

Wuuuw, bah dis donc ce LS m'aura fait toucher méchamment au code de la toolbar, ça m'a permis de voir qu'il était 150 fois plus rapide de coder soit même certains éléments que de vouloir la modifier directement haha

Dans le CSS on remplace :

Code:

#fa_menu #fa_menulist, #fa_toolbar #fa_right.welcome #fa_menu #fa_welcome, #fa_toolbar #fa_right #notif_list {
    background: #27313D!important;
    color: #E2A582!important;
}

Par ceci :

Code:

#fa_menu #fa_menulist, #fa_toolbar #fa_right.welcome #fa_menu #fa_welcome, #fa_toolbar #fa_right #notif_list, #fa_toolbar > #fa_right.notification > #fa_notifications {
    background: #27313D!important;
    color: #E2A582!important;
}

Et ensuite pour le mode déconnecté, on va modifier le template overall_header et changer ceci :


Pour remplacer par presque la même chose mais en inversé


On valide, on publie, et maintenant dans le CSS, on remplace :

Code:

/* rond avec l.avatar */
.fa_avatar {
    background: #969DC1;
    width: 50px;
    height: 50px;
    position: fixed;
    border-radius: 50%;
    top: 7px;
    left: 135px;
    z-index: 999;
    border: 2px solid #25262b;
    box-shadow: 0 0 5px black;
    overflow: hidden;
}

On va juste augmenter la valeur du z-index. Sur mon forum avec 1000 à la place de 999 ça marche bien. Si l'avatar reste caché par la barre au dessus, n'hésite à pas à augmenter et mettre 1500, juste qu'à trouver une valeur où ça fonctionne bien :)

Ensuite, on remplace ça :

Code:

/* Adaptations pour les petits écrans */
@media screen and (max-width: 1360px) {
  .generated_nav_bar {
      padding-left: 285px;
  }
}

@media screen and (min-width: 1360px) and (max-width: 1510px) {
  .generated_nav_bar {
      padding-left: 200px;
  }
}

par ceci :

Code:

/* Adaptations pour les petits écrans */
@media screen and (max-width: 1360px) {
  .fa-avatar + .generated_nav_bar {
      padding-left: 285px;
  }
}

@media screen and (min-width: 1360px) and (max-width: 1510px) {
  .fa-avatar + .generated_nav_bar {
      padding-left: 200px;
  }
}

Voilà, je crois qu'on approche de la fin ! ♥

Hehe merci Nihil, j'ai tout mis correctement.

Par contre, j'ai un petit soucis pour l'ajustement avec Z-index. 
1- Je dois bien faire la modification selon dans le CSS consacré à l'avatar (et pas aux autres ?)
2- Lorsque je met une valeur de plus de 999 (de 1000, 1500), j'ai beau sauvegarder, cela revient automatiquement à 999. Quand c'est une valeur inférieur (800) la modification fonctionne (même si ce n'est pas la valeur qu'il me faut).

Joyeux Noël petite ange du codage qui nous aide énormément !

Je suis trop bête T____T

J'ai fait une erreur ici >< :

Code:

/* Adaptations pour les petits écrans */
@media screen and (max-width: 1360px) {
  .fa-avatar + .generated_nav_bar {
      padding-left: 285px;
  }
}

@media screen and (min-width: 1360px) and (max-width: 1510px) {
  .fa-avatar + .generated_nav_bar {
      padding-left: 200px;
  }
}

C'est .fa_avatar et non par .fa-avatar xD :

Code:

/* Adaptations pour les petits écrans */
@media screen and (max-width: 1360px) {
  .fa_avatar + .generated_nav_bar {
      padding-left: 285px;
  }
}

@media screen and (min-width: 1360px) and (max-width: 1510px) {
  .fa_avatar + .generated_nav_bar {
      padding-left: 200px;
  }
}

J'avais zappé la tendance de forumactif à ne pas accepter un z-index supérieur à 999. Le pire c'est que je sais quand j'ai le problème mais je l'oublie sinon... Quelle idiote xD !

Du coup tu peux laisser 999 comme c'était, et on va jouer sur un autre z-index, celui de .generated_nav_bar

Son z-index (celui de .generated_nav_bar), tu peux le descendre à 990, ça devrait être bon xD.
L'important c'est qu'il soit en dessous du z-index de .fa_avatar

Pfuiii, elle nous donne du fil à retordre (a)... Je suis désolée, j'aurai du tester le code, j'ai un m*rder sur ce plan là xD

Bon et bien Nihil, c'est maintenant parfait !

Dernière chose (huhu), tu parlais d'un effet de transition pour l'affichage des notifications ?

J'ai essayé ça °-° :

Code:

/* Début animations notifications */

#fa_toolbar #fa_right #notif_list li {
    -webkit-tranform : translateX(100%);
    transform: translateX(100%);
    transition: all 500ms;
}

#fa_toolbar #fa_right.notification #notif_list li {
    -webkit-transform : translateX(0%);
    transform: translateX(0%);
}

#fa_toolbar #fa_right #notif_list li:nth-child(2) {-webkit-transition-delay: 100ms;transition-delay: 100ms}
#fa_toolbar #fa_right #notif_list li:nth-child(3) {-webkit-transition-delay: 100ms;transition-delay: 100ms}
#fa_toolbar #fa_right #notif_list li:nth-child(4) {-webkit-transition-delay: 100ms;transition-delay: 100ms}
#fa_toolbar #fa_right #notif_list li:nth-child(5) {-webkit-transition-delay: 100ms;transition-delay: 100ms}
#fa_toolbar #fa_right #notif_list li:nth-child(6) {-webkit-transition-delay: 100ms;transition-delay: 100ms}
#fa_toolbar #fa_right #notif_list li:nth-child(7) {-webkit-transition-delay: 100ms;transition-delay: 100ms}
#fa_toolbar #fa_right #notif_list li:nth-child(8) {-webkit-transition-delay: 100ms;transition-delay: 100ms}
#fa_toolbar #fa_right #notif_list li:nth-child(9) {-webkit-transition-delay: 100ms;transition-delay: 100ms}
#fa_toolbar #fa_right #notif_list li:nth-child(10) {-webkit-transition-delay: 100ms;transition-delay: 100ms}
#fa_toolbar #fa_right #notif_list li:nth-child(11) {-webkit-transition-delay: 100ms;transition-delay: 100ms}
#fa_toolbar #fa_right #notif_list li:nth-child(12) {-webkit-transition-delay: 100ms;transition-delay: 100ms}
#fa_toolbar #fa_right #notif_list li:nth-child(13) {-webkit-transition-delay: 100ms;transition-delay: 100ms}
#fa_toolbar #fa_right #notif_list li:nth-child(14) {-webkit-transition-delay: 100ms;transition-delay: 100ms}
#fa_toolbar #fa_right #notif_list li:nth-child(15 {-webkit-transition-delay: 100ms;transition-delay: 100ms}

/* fin animations notifications */


C'est parfait Nihil ! Magnifique ! Bravo !

Je pense qu'on peut enfin dire qu'on est bons sur cette demande de codage !!

Champagne.