Bonjour/bonsoir,

Je souhaiterais faire en sorte que les carrés sur mon site soit cliquable. J'ai utiliser la balise "a" pour le premier carré (et tout fonctionne) mais pour si lorsque je l'applique aux autres carrés (qui sont actuellement en balise div) ils ne restent plus en place, bien centrés comme avant. Je pense que ça vient de ma manière de sauter des lignes (<br />) qui n'est pas adapté :/ mais je ne sais pas comment la remplacer...

Merci d'avance <3

Pour le placement de tes carrés, je te conseille d'utiliser les Flexboxes qui sont un moyen plus simple et plus robuste. Je te donne le lien vers la documentation :

https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS

Si tu as des soucis quant à la mise en application des boîtes flexibles, n'hésite pas à me demander de te donner une explication.

Tu peux faire des carrés avec des div (et avec flexbox ou non) et placer à l’intérieur un lien<a> a qui tu vas faire prendre toute la surface de ton div. Je te laisse chercher comment faire pour faire prendre plus de place au <a>. Au début met un peu de texte dedans pour t'aider et le voir apparaître.

J'ai trouvé ! Il faut mettre à la balise <a> :

display:block; width:100%; height:100%;

Mais est-ce que cette technique est la meilleure sachant que je souhaite adapter mon site aux mobiles par la suite ?

Par contre, lorsque je met une balise <p> dans ma balise <a> (elle-même dans un <div>), la partie entre mon texte et le haut du carré n'est pas cliquable :/

Je crois avoir résolu le problème en remplaçant "display:block" par "display:flex"... mais en fait non, ça ne marche pas Voilà mon code : https://codepen.io/Ekkaia/pen/BdZXPz

-
Edité par Anonyme 15 août 2017 à 14:54:59