Bonjour,

Voilà après avoir fait la formation CSS et HTML j'ai essayé de faire un header responsive (malheuresement je range très mal mon code) qui ressemble à ça : https://www.mixofx.com/


Voici mon code html + css : https://codepen.io/akaarl_/pen/abdadvy

Si les images ne marchent pas : https://drive.google.com/drive/folders/1XUv4JOITxuV1U5LJUpgNdfLFIGxou0IA?usp=sharing

J'aimerais avoir de l'aide pour l'animation du texte (quand curseur dessus : hover animation ligne jaune de gauche à droite), m'expliquer le problème des marges entre les textes à droite et essayer de trouver le problème pourquoi le "cart" à droite ne change pas de couleur quand on passe son curseur dessus.
Merci d'avance pour toutes vos réponses, j'ai essayé de faire mon mieux mais je commence à me perdre un peu.
PS : le site est un entraînement pour moi Smiley smile /je ne souhaite que améliorer le header pour l'instant (là où je me perds).
Pour tout ce qui est JavaScript je suis pas très bien calé, je suis toujours en formation, et toujours à l'écoute de tout conseil !
Modifié par Karibouu (14 Jul 2020 - 16:18)
Modérateur
Salut,


Tu as résolu tes problèmes ? Les textes ont un joli hover, le "cart" change bien de couleur et je n'ai pas trop compris le soucis des marges.
J'ai résolu le problème pour l'animation en dessous du texte :
.menu-right li a {
  position: relative;
}
 .menu-right li a:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  height: 2px;
  background-color: yellow;
  width: 0;
  transition: width .2s ease-in-out;
}
 .menu-right li a:hover:after {
  width: 100%;
}


mais j'ai toujours le problème du changement de couleur du cart (il faudrait que le hover soit en rouge) et pour le soucis des marges, c'est juste mettre des espaces entre chaque puce : Home, Store, Contact et About.

J'ai mis mon code à jour tu peux voir ce que ça donne, si tu as besoin de plus d'explications sur mon problème n'hésite pas à me redemander Smiley lol

Voici l'image pour illustrer mes propos (screenshot pris sur " rel="nofollow noopener" >www.mixofx.com) upload/1594816728-80495-capture.jpg
Modifié par Karibouu (15 Jul 2020 - 14:45)
Re,
tu sais, on se balade de forum en forum hein... Smiley langue
Une demande à un endroit devrait suffire. Smiley cligne
Modifié par Raphi (15 Jul 2020 - 14:51)
Modérateur
Du coup....

"Tu peux utiliser un margin pour ça."
Smiley lol
Merci beaucoup @Raphi et oui désolé, je pensais que sur OpenClassroom on allait pas me répondre Smiley smile , j'ai récrée une class "puce" et ajouté une margin . Merci pour votre aide Smiley smile
Avec plaisir. Smiley cligne
Pour info, tu n'es pas obligé de rajouter une classe supplémentaire.
Cet appel fonctionnera aussi: .menu-right li voir même .menu-right > li si tu veux être sûr que ça ne cible que les li de premier niveau (on sait jamais si tu décides d'avoir des sous-menus).