Bonjour à tous,
J'ai la structure HTML suivante :
Je sais qu'à présent on peut englober des éléments blocs dans un élément <a> depuis HTML5. Or le rendu dans Firefox est le suivant :
Comportement vraiment étrange... Un coup, le lien se trouve sur un noeud texte et puis il se trouve autour de deux éléments blocs... Vraiment pas cohérent tout ça ! Le but pour moi est de rendre la div.une-text cliquable dans son intégralité (et pas uniquement sur le texte), en évitant d'utiliser JavaScript de préférence (maintenant si ce n'est pas possible autrement...). J'ai pas vérifié avec Chrome ou d'autres navigateurs...
Merci d'avance pour votre partage d'expérience.
Modifié par jojaba (07 Dec 2019 - 16:55)
J'ai la structure HTML suivante :
<div id="sticky">
<article id="une" role="article">
<div class="une-illustration"></div>
<div class="une-text">
<a href="http://lien-vers-ressource.html">
<header>
<div class="entry-header">
<p class="une-date">03 septembre</p>
<p class="une-categories"><a href="cat-4">catégorie 4</a></p>
</div>
<h1>TITRE</h1>
<div class="une-blog-name">Nom du blog</div>
<div class="une-tools"><span class="read-time">lecture 4 min.</span><span class="views">140 vues</span></div>
</header>
</a>
</div>
</article>
</div><!-- End #sticky -->
Je sais qu'à présent on peut englober des éléments blocs dans un élément <a> depuis HTML5. Or le rendu dans Firefox est le suivant :
<div id="sticky">
<article id="une" role="article">
<div class="une-illustration"></div>
<div class="une-text">
<a href="http://lien-vers-ressource.html">
</a><header><a href="http://lien-vers-ressource.html">
</a><div class="entry-header"><a href="http://lien-vers-ressource.html">
<p class="une-date">03 septembre</p>
</a><p class="une-categories"><a href="http://lien-vers-ressource.html"></a><a href="cat-4">Catégorie 4</a></p>
</div>
<h1><a href="http://lien-vers-ressource.html">TITRE</a></h1>
<div class="une-blog-name">Nom du blog</div>
<div class="une-tools"><span class="read-time">lecture 4 min.</span><span class="views">140 vues</span></div>
</header>
</div>
</article>
</div>
Comportement vraiment étrange... Un coup, le lien se trouve sur un noeud texte et puis il se trouve autour de deux éléments blocs... Vraiment pas cohérent tout ça ! Le but pour moi est de rendre la div.une-text cliquable dans son intégralité (et pas uniquement sur le texte), en évitant d'utiliser JavaScript de préférence (maintenant si ce n'est pas possible autrement...). J'ai pas vérifié avec Chrome ou d'autres navigateurs...
Merci d'avance pour votre partage d'expérience.
Modifié par jojaba (07 Dec 2019 - 16:55)