Mon lien est invisible ...

14 juin 2019 à 22:45:06

Bonjour à tous, voici un code simple html et un css qui permet d'appliquer un effet sur le menu ; mon texte apparait invisible mais mes éléments existe bien, ke ne trouve pas mùon erreur help

HTML

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="style.css">

  </head>

  <body>

    <h1>Welcome to Testzone </h1>

    <nav class="cl-effect-14">
      <a href="https://www.google.fr/" data-hover="Seraglio"><span>Seraglio</span></a>
      <a href="https://www.google.fr/" data-hover="Sumptuous"><span>Sumptuous</span></a>
      <a href="https://www.google.fr/" data-hover="Scintilla"><span>Scintilla</span></a>
      <a href="https://www.google.fr/" data-hover="Palimpsest"><span>Palimpsest</span></a>
      <a href="https://www.google.fr/" data-hover="Assemblage"><span>Assemblage</span></a>
    </nav>

  </body>

</html>

CSS

*,
*:after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Merryweather', sans-serif;
}

nav a {
  position: relative;
  display: inline-block;
  margin: 15px 25px;
  outline: none;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  text-shadow: 0 0 1px rgba(255,255,255,0.3);
  font-size: 1.35em;
}

nav a:hover,
nav a:focus {
  outline: none;
}

.cl-effect-14 a {
  padding: 20px;
  height: 45px;
  line-height: 45px;
}

.cl-effect-14 a::before,
.cl-effect-14 a::after {
  position: absolute;
  width: 45px;
  height: 2px;
  background: #fff;
  content: "Testcontent" ;
  opacity: 0.2;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  pointer-events: none;
}

.cl-effect-14 a::before {
  top: 0;
  left: 0;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  transform-origin: 0 0;
}

.cl-effect-14 a::after {
  right: 0;
  bottom: 0;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: 100% 0;
  -moz-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

.cl-effect-14 a:hover::before,
.cl-effect-14 a:hover::after,
.cl-effect-14 a:focus::before,
.cl-effect-14 a:focus::after {
  opacity: 1;
}

.cl-effect-14 a:hover::before,
.cl-effect-14 a:focus::before {
  left: 50%;
  -webkit-transform: rotate(0deg) translateX(-50%);
  -moz-transform: rotate(0deg) translateX(-50%);
  transform: rotate(0deg) translateX(-50%);
}

.cl-effect-14 a:hover::after,
.cl-effect-14 a:focus::after {
  right: 50%;
  -webkit-transform: rotate(0deg) translateX(50%);
  -moz-transform: rotate(0deg) translateX(50%);
  transform: rotate(0deg) translateX(50%);
}

Jleon

14 juin 2019 à 23:03:41

Bonjour,

Je suis débutant et j'aimerai participer et comprendre

-Dans ta balise <nav>, j'ai très bien appris grâce au cours qu'on y insère souvent des listes a puce <ul> + <li>

Pourquoi mettre un <span> (balise universelle inline c'est bien ça ?) dans une balise <a> ?

Je ne comprends pas ce morceaux de code.

Le css lié est bien trop complexe encore pour moi, je ne peux pas t'aider sur le sujet.

AbcAbc6

14 juin 2019 à 23:04:21

Bonsoir, c'est sur qu'un texte en blanc, si ton fond est blanc, tu ne vois rien :colere:

Change de couleur tes liens ou ton fond de page et tu verras

Jleon

14 juin 2019 à 23:23:21

Re,

Je profite de mon commentaire pour avoir des réponses sur ma question.

Mais surtout pour demander si on ne peut plus éditer un message déjà poster ?(Pour éviter les fameux up des forums).

Donc je voulais edit :

Au final, je connais un peu de css et oui le texte en blanc sur blanc... :lol:

Lamecarlate

14 juin 2019 à 23:55:46

Bonjour,

normalement on peut toujours éditer, mais il y a un bug aléatoire et récurrent du forum, qui fait que les liens d'édition n'apparaissent pas toujours au survol. L'équipe de modération développe et maintient un script à installer via TamperMonkey ou GreaseMonkey, qui répare ce genre de petit bug JavaScript et ajoute quelques améliorations : https://l0lock.github.io/OCTweaksScript/ .

Pas d'aide concernant le code par MP, le forum est là pour ça :)