Mes liens html ne marchent pas

Fermé

RIVERS - Modifié par crapoulou le 2/10/2016 à 18:19
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 - 3 oct. 2016 à 14:01

Bonjour à toutes et à tous,

Je rencontre un problème plus que inhabituel sur la création d'un site web les liens html ne fonctionne pas si je met une deuxième class.

<table>
     <tr>
      <td><img id="logocomics" src="./img/bakapositif.png" /></td>
      <td><li class="menu__item menu__item--current"><a href="Home.html" rel="nofollow noopener noreferrer" target="_blank" class="menu__link"></i>Home</a></li></td>
      <td><li class="menu__item"><a href="Graphik.html" rel="nofollow noopener noreferrer" target="_blank" class="menu__link">Graphik</a></li></td>
      <td><li class="menu__item"><a href="Motion.html" rel="nofollow noopener noreferrer" target="_blank" class="menu__link">Motion</a></li></td>
      <td><li class="menu__item"><a href="Website.html" rel="nofollow noopener noreferrer" target="_blank" class="menu__link">Website</a></li></td>
      <td><li class="menu__item"><a href="Comics.html" rel="nofollow noopener noreferrer" target="_blank" class="menu__link">Comics</a></li></td>

Merci

A voir également:

Mes liens html ne marchent pas
Editeur html - Télécharger - HTML
Html download - Télécharger - HTML
Liens copiés - Forum Téléphones & tablettes Android
/Var/www/html/index.html ✓ - Forum Linux / Unix
&Nbsp html ✓ - Forum Webmastering

1 réponse

Réponse 1 / 1

garal
2 oct. 2016 à 19:50

Salut,
c'est nouveau une deuxième classe? ceci explique cela quoique ça paraisse bizarre que ça empêche le lien...
Je pencherait pour une règle CSS(donc dans une des classes) qui désactive ou change le clic/lien ou alors un conflit des deux classes.
Quel est l'intérêt d'avoir 2 attributs class? Une classe sert à appliquer des règles CSS, refaite la première classe pour intégrer les changements(de la 2nd) pour n'avoir pas plusieurs classes pour un même élément, donc un code HTML qui commence par quelque chose de faux.

RIVERS
2 oct. 2016 à 22:18

<li class="menu__item"><a href="Motion.html" rel="nofollow noopener noreferrer" target="_blank" class="menu__link">Motion</a></li>
<style>
.menu__item {
display: block;
margin: 1em 0;

}

.menu__link {
font-size: 1.05em;
font-weight: bold;
display: block;
padding: 1em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.menu__link:hover,
.menu__link:focus {
outline: none;
}

/* Valentine */
.menu--valentine .menu__item {
position: relative;
margin: 0 1em;
left: 20px;
bottom: -20px;
}

.menu--valentine .menu__link {
position: relative;
display: block;
min-width: 105px;
text-align: center;
color: #b5b5b5;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}

.menu--valentine .menu__link:hover,
.menu--valentine .menu__link:focus {
color: #929292;
}

.menu--valentine .menu__item--current .menu__link {
color: #d94f5c;
}

.menu--valentine .menu__item::before,
.menu--valentine .menu__item::after,
.menu--valentine .menu__link::before,
.menu--valentine .menu__link::after {
content: '';
position: absolute;
background: #d94f5c;
-webkit-transform-origin: 350% 350%;
transform-origin: 350% 350%;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.menu--valentine .menu__item::before,
.menu--valentine .menu__item::after {
top: 0;
width: 2px;
height: 100%;
-webkit-transform: scale3d(1, 0, 1);
transform: scale3d(1, 0, 1);
}

/* left line */
.menu--valentine .menu__item::before {
left: 0;
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}

/* right line */
.menu--valentine .menu__item::after {
right: 0;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}

.menu--valentine .menu__link::before,
.menu--valentine .menu__link::after {
left: 0;
width: 100%;
height: 2px;
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}

/* top line */
.menu--valentine .menu__link::before {
top: 0;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}

/* bottom line */
.menu--valentine .menu__link::after {
bottom: 0;
}

.menu--valentine .menu__item--current::before,
.menu--valentine .menu__item--current::after,
.menu--valentine .menu__item--current .menu__link::before,
.menu--valentine .menu__item--current .menu__link::after {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

</style>

RIVERS
2 oct. 2016 à 22:46

quand je les mélange y a plus l'effet css

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
Modifié par jordane45 le 3/10/2016 à 14:03

Bonjour,

Quel est l'intérêt d'avoir 2 attributs class? Une classe sert à appliquer des règles CSS, refaite la première classe pour intégrer les changements(de la 2nd)

Hein ??
Si au contraire... il est très intéressant de pouvoir mettre plusieurs class et ainsi pouvoir "cumuler" les styles sans avoir à recréer une énième class qui regroupe tout...
Sans parler du fait qu'on peut également utiliser des class fictives pour les utiliser comme selecteur Javascript....

Sinon... pour ce qui est du problème ... ne serait-ce pas la balise </i> placée en plein milieu qui poserait problème ?

<td>
     <li class="menu__item menu__item--current">
      <a href="Home.html" rel="nofollow noopener noreferrer" target="_blank" class="menu__link">
      </i>Home</a>
     </li>
   </td>

NB: A l'avenir.. pour poster du code sur le forum ... merci d'utiliser LES BALISES DE CODE.

Ou.. un code Javascript qui agirait sur cette seconde class ?

Discussions similaires

&nbsp ; Quelle Fonction ?

Espace en HTML

la balise <br> ou <br />

Image cliquable dans html

Discussions similaires

Newsletters