Partage
  • Partager sur Facebook
  • Partager sur Twitter

Léger pb d'affichage de sous menu + pb d'animation

Sujet résolu
    17 mars 2019 à 0:43:32

    Hello ! Je reviens vers vous après la grande aide de Noopy360 !

    • Premier petit problème :

    Le menu n'est pas centré. Trop haut de 2 ou 3 pixels.Voici mon code CSS :

    body{
    	/*background-image : url("myc.png");
    	background-size: 10%;
    	background-repeat: no-repeat;
    	background-position: 50px 100px; */
    	font-family : "Playfair Display SC ", Teko, Permanent Marker;
    	padding : 0px;
    	margin : 0px;
    }
    
    a{
      color:inherit; /* Permet de reprendre la couleur de sont parent (defaut:noir) */
      text-decoration:inherit; /* Permet de reprendre le soulignage de sont parent (defaut:non souligner)  */
    }
    
    nav{
      display:flex; /* Permet de modifier l'alignage par defaut des balises enfants des types block */
      justify-content:space-between; /* Permet de mettre les enfants sur chaque bout du parent */
      height:50px; /* modifie la hauteur de la div à 50px */
      line-height:40px; /* Permet de centre horizontalement */
      background:#424558; /* Couleur du font de la div */
      font-size:23px; /* Taille de la police d'écriture */
    }
    
            /* .fa-myfontawersome {
                font-size:23px !important;
               */
    
    
    .imgbanniere {
    	width : 46px;
    	padding-right : 0px;
    	position: relative;
    	bottom: 0px;
    }
    
    
    .niv{
      display:flex; /* Permet de modifier l'alignage par defaut des balises enfants des types block */
      justify-content:center; /* Avec le flex permet de coller et centre les balises enfants */
      padding:0 20% 0 0; /* Permet de decaler le menu du bord droit */
      
     }
    .texte{ /* Cible uniquement le premier ".niv0" */
    	color:white; /* change la couleur de la police en blanc */
    	padding:6px 30px; /* ajoute une marge interieur à droite et à gauche de 30px */
        cursor:default; /* Permet de modifier le pointer de la sourie */
        font-size:30px;
    }
    
    .texte span{ /* Cible uniquement la première lettre de chaque mot  */
    	font-size:1.5em; /* Modifie la taille de la police de façon relative */
    }
    
    .niv .niv0 a{
    	display:block; /* Permet de transformer une balise de type inline en block qui permet de modifier sa largeur/hauteur */
    	height:46px; /* Modifie la hauteur */
    	padding:0px 30px; /* ajoute une marge interieur à droite et à gauche de 30px */
    }
    .niv .niv0>a{
    	color:white; /* change la couleur de la police en blanc */
    	text-align:center; /* Centre le texte horizontalement */
    }
    .niv .niv0>a::first-letter{ /* Cible uniquement la première lettre de chaque mot  */
    	font-size:1.5em; /* Modifie la taille de la police de façon relative */
    }
    .niv .niv0{
    	border-top:4px solid #424558; /* Permet de garder le centrage verticalement entre avec et sans le hover sur le texte */
    }
    .niv .niv0:hover{ /* Permet de cibler tout les ".niv0" sauf le premier */
    	border-top:4px solid /* Je pre-configure le border ici (taille et style) */
    }
    .niv .niv0:nth-child(1):hover{
    	border-color:rgba(51,157,255, 1); /* je fini ici avec la couleur */
    	background:rgba(51,157,255, 0.15); /* Couleur du font de la div */
    }
    .niv .niv0:nth-child(2):hover{
    	border-color:rgba(46,204,113,1.0);
    	background:rgba(46,204,113, 0.15);
    }
    .niv .niv0:nth-child(3):hover{
    	border-color:rgba(234,97,83,1.0);
    	background:rgba(234,97,83, 0.15);
    }
    .niv .niv0:nth-child(4):hover{
    	border-color:rgba(244,208,63,1.0);
    	background: rgba( 244, 208, 63, 0.15);
    }
    
    .niv .niv0:nth-child(5):hover{
    	border-color:rgba( 92, 223, 234 ,1.0);
    	background:rgba( 92, 223, 234 , 0.15);
    }
    
    .niv .niv0:nth-child(6):hover{
    	border-color:rgba(189,195,199,1.0);
    	background:rgba(189,195,199, 0.15);
    }
    
    .niv .niv1{
    	display:none; /* Cache le sous menu sans le :hover */
    	color:#424558; /* Met le texte en noir */
    }
    
    .niv .niv1bis{
    	display:none; /* Cache le sous menu sans le :hover */
    	color:#424558; /* Met le texte en noir */
    }
    
    .niv .niv1bis2{
    	display:none; /* Cache le sous menu sans le :hover */
    	color:#424558; /* Met le texte en noir */
    }
    
    .niv .niv0:hover .niv1{
    	display:block; /* Permet d'afficher le sous menu pendant le :hover */
    	position:absolute; /* Permet de passer par dessus le reste de ton site */
    }
    
    .niv .niv0:hover .niv1bis{
    	display:block; /* Permet d'afficher le sous menu pendant le :hover */
    	position:absolute; /* Permet de passer par dessus le reste de ton site */
    }
    .niv .niv0:hover .niv1bis2{
    	display:block; /* Permet d'afficher le sous menu pendant le :hover */
    	position:absolute; /* Permet de passer par dessus le reste de ton site */
    }
    
    .niv .niv1 a{
    	background:rgba(46,204,113, 0.55);	/* Couleur du font de la div */
    }
    
    .niv .niv1bis a{
    	background:rgba(244,208,63,0.55); /* Couleur du font de la div */
    }
    
    .niv .niv1bis2 a{
    	background:rgba(234,97,83, 0.55); /* Couleur du font de la div */
    	/*width : 120px; */
    }
    
    .niv .niv1 a:hover{
    	color:white; /* change la couleur de la police en blanc */
    	background:rgba(46,204,113, 0.9); /* Couleur du font de la div */
    	transition : 0.3s;
    }
    
    .niv .niv1bis a:hover{
    	color:white; /* change la couleur de la police en blanc */
    	background:rgba(244,208,63,0.9); /* Couleur du font de la div */
    	transition : 0.3s;
    }
    
    .niv .niv1bis2 a:hover{
    	color:white; /* change la couleur de la police en blanc */
    	background:rgba(234,97,83, 0.9); /* Couleur du font de la div */
    	transition : 0.3s;
    }
    

    Voici mon code HTML :

    <nav>
      <div class="texte"><span>A</span>mbi <span>D</span>raft <span>L</span>igue</div>
      <img class="imgbanniere" src="LogoADL.png" alt="Logo de l'ADL">
      <div class="niv">
      	<div class="niv0">
      		<a href="#"> <i class="fa fa-home faa-wrench animated-hover" aria-hidden="true"> </i> HOME</a>
      	</div>
      	<div class="niv0">
    	  	<a href="Page présentation ADL0.html"> <i class="fab fa-ethereum"></i>  ADL <i class="fas fa-angle-down" style="font-size:15px;"></i> <!-- <i class="fab fa-gripfire"></i> --> </a>
    	  	<div class="niv1">
    	  		<a href="Page présentation ADL.html"> <i class="fas fa-cubes"></i> </i>Présentation de l'ADL</a>
    	  		<a href="Page statistiques.html">  <i class="far fa-chart-bar"></i> <!-- <i class="fas fa-square-root-alt"></i> --> Statistiques</a>
    			<a href="Joueurs.html"> <i class="far fa-user"></i> <!-- <i class="fas fa-square-root-alt"></i> --> Joueurs</a>
    	  	</div>
    	  </div>
    	  <div class="niv0">
    	  	<a href="Saison4.html"> <i class="fas fa-trophy"></i>  ADL S4 <i class="fas fa-angle-down faa-wrench animated-hover faa-fast" aria-hidden="true" " style="font-size:15px;"></i> </a>
    	  	<div class="niv1bis2">
    	  		<a href="ReglesS4.html"> <!-- <i class="fas fa-scroll"></i> --> <i class="fas fa-list"></i> </i>Règles</a>
    	  		<a href="TierlistS4.html">  <i class="fas fa-shopping-cart"></i> <!-- <i class="fas fa-square-root-alt"></i> --> Tierlist</a>
    			<a href="StatsS4.html"> <i class="far fa-chart-bar"></i>  <!-- <i class="fas fa-square-root-alt"></i> --> Statistiques</a>
    	  	</div>
    	  </div>
    	  <div class="niv0">
    	  	<a href="Gazette.html"> <i class="fas fa-book-reader"></i> GAZETTES <i class="fas fa-angle-down" style="font-size:15px;"></i></a>
    		<div class="niv1bis">
    	  		<a href="Gazettedambi.html"> <i class="far fa-newspaper"></i> </i>Gazette d'Ambi</a>
    	  		<a href="Fiches stratégiques.html">  <i class="fas fa-user-graduate"></i> <!-- <i class="fas fa-square-root-alt"></i> --> Fiches stratégiques</a>
    			<a href="Edition.html"> <i class="fas fa-exclamation-circle"></i> </i>Editions spéciales</a>
    	  	</div>
    	  </div>
    	  <div class="niv0">
    	  	<a href="Quizz.html"> <i class="far fa-question-circle"></i>   QUIZZ</a>
    	  </div>
    	  <div class="niv0">
    	  	<a href="Contact.html"> <i class="fas fa-envelope"></i>  CONTACT</a>
    	  </div>
      </div>
    </nav>

    Afin d'arranger ce problème j'ai donc modifié :

    .niv .niv0 a{
    	display:block; /* Permet de transformer une balise de type inline en block qui permet de modifier sa largeur/hauteur */
    	height:46px; /* Modifie la hauteur */
    	padding:0px 30px; /* ajoute une marge interieur à droite et à gauche de 30px */
    }

     en

    .niv .niv0 a{
    	display:block; /* Permet de transformer une balise de type inline en block qui permet de modifier sa largeur/hauteur */
    	height:46px; /* Modifie la hauteur */
    	padding:3px 30px; /* ajoute une marge interieur à droite et à gauche de 30px */
    }

    Mais du coup j'ai un décalage sur mes sous menu qui ne sont plus collés à mon menu... avez vous une idée ?

    • Mon deuxième problème concerne l'animation de mes icones. J'utilise Font Awesome et j'ai testé le code suivant :
    <a href="Saison4.html"> <i class="fas fa-trophy"></i>  ADL S4 <i class="fas fa-angle-down faa-wrench animated-hover faa-fast" aria-hidden="true" " style="font-size:15px;"></i> </a>

    Pour cela j'ai également rajouté les liens suivants dans mon <head> :

    <link rel="stylesheet" href="font-awesome-animation.min.css">
            <link rel="stylesheet" href="css/font-awesome-animation.css">

    Mais aucune animation à l'horizon... x) Si jamais quelqu'un s'y connait, je suis preneur ! Je fais pas mal de recherche sur le net, mais encore une fois je suis un total débutant !

    Merci à vous !

    • Partager sur Facebook
    • Partager sur Twitter
      17 mars 2019 à 10:03:40

      Bonjour,

      Pour ton problème de marge dans le menu remplace cette partie de code :

      .niv .niv0 a{
          display:block; /* Permet de transformer une balise de type inline en block qui permet de modifier sa largeur/hauteur */
          height:40px; /* Modifie la hauteur */
          padding:3px 30px; /* ajoute une marge interieur à droite et à gauche de 30px */
      }

      Pour ton animation tu veut que t'es icons de font awesome fasse quoi ? si tu veut qu'il change de couleur au survole de la sourie comme le texte, sans rien modifier chez moi ça fonctionne

      • Partager sur Facebook
      • Partager sur Twitter
        17 mars 2019 à 23:04:56

        Re,

        Pour l'animation j'ai réussi à m'en sortir avec mes recherches (je fais qu ça ahah), je suis partie sur une utilisation de la fonction "rotate", ça me plait pas mal comme ça !

        J'ai essayé de modifier comme tu me l'as demandé et ça marche parfaitement ! merci !

        Je reviendrai probablement vers vous rapidement pour des conseils !

        • Partager sur Facebook
        • Partager sur Twitter

        Léger pb d'affichage de sous menu + pb d'animation

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur
        • Markdown