Menu

Problème avec image cliquable et "float" [Résolu]

Messages postés
165
Date d'inscription
mardi 24 avril 2012
Statut
Membre
Dernière intervention
21 mai 2019
- - Dernière réponse : YameFAZE
Messages postés
165
Date d'inscription
mardi 24 avril 2012
Statut
Membre
Dernière intervention
21 mai 2019
- 20 févr. 2019 à 23:23
Bonjour,

Dans un article j'ai une image en "float: left;", avec du texte qui épouse l'image à droite du coup, et l'image est cliquable. Mon problème c'est que l'image est partiellement cliquable. Elle est cliquable que au endroits où il y a des sauts de lignes dans le texte, entre les lignes de texte. Comme si le texte passait par dessus l'image, alors que pourtant ce n'est pas le cas... je ne sais pas si je me fais comprendre. Dès que j'enlève le "float" de l'image elle redevient cliquable sur toute sa surface. Comment régler ce problème svp ? Merci d'avance.

<!------------------------->
<!------- SITUATION ------->
<!------------------------->
<div class="article">
<h2 class="animation_texte">Une implantation géographique idéale</h2>
<a href="img/carte_parcs.jpg" target="blank"><img src="img/min/carte_parcs.jpg" alt="Carte indiquant la localisation de" class="objet_cliquable float" /></a>
<p class="animation_texte">
dans le département des Alpes-de-Haute-Provence, en région PACA. Notre implantation géographique est idéale pour les amoureux de sensations fortes. Nous sommes entourés par 2 Parcs Nationaux et 6 Parcs Naturels Régionaux.
</p>
<p class="animation_texte">
En Parcs Nationaux nous avons Les Écrins situés au Nord et Le Mercantour à l'Est. En Parcs Naturels Régionaux nous avons Le Queyras situé au Nord-Est, Les Préalpes au Sud-Est, Le Verdon au Sud, Le Lubéron au Sud-Ouest, ainsi que Le Mont Ventoux et Les Baronnies Provençales tous deux situés à l'Ouest. Des possibilités infinies et à portée de roues qui vous offrirons l'embarras du choix pour vous évader entre champs de lavande et montagnes.
</p>
<p class="animation_texte">
Évadez-vous avec. Contactez pour de plus amples renseignements.
</p>
</div>


/* Position flotante */
.float {
float: left;
}

/* Comportement des objets cliquables au passage de la souris */
.objet_cliquable:hover {
/* Animation */
animation: survol_objet_cliquable 0.3s forwards;
/* Adaptation Mozilla */
-moz-animation: survol_objet_cliquable 0.3s forwards;
/* Adaptation Safari, Chrome et Opera */
-webkit-animation: survol_objet_cliquable 0.3s forwards;
}
Afficher la suite 

1 réponse

0
Merci
Bonsoir,
" Comme si le texte passait par dessus l'image, "
alors ça doit être le cas ;)
Pour éviter cela vous pouvez rétablir le flux en supprimant le float, il sert à quoi?
Ou sinon vous pouvez attribuer une valeur z-index (au moins 2)afin d'être sûr que lorsqu'il y a superposition l'élément du dessus soit bien au dessus.
Exemple ici:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
Donc pas en positionnement flottant ou alors ça revient à définir les z-index(empilement ou 'profondeur' ) de tous les autres pour qu'il soient en dessous.

Je vous recommande aussi de ne pas mettre trop de texte animé ce qui perturbe l’œil et est rarement agréable tout court, surtout un texte c'est fait pour être lu. Ou alors plus simple vous mettez vos 3 textes dans un seul élément qui sert de container et vous animez l'élément ce qui au lieu de faire travailler le processeur pour 3 animations n'en fera qu'une.

ps: Je suis curieux de l'activité théme du site, je fais du longboard skate downhill régulièrement en descendant du col de Tende, côté frontière italienne du Mercantour.
YameFAZE
Messages postés
165
Date d'inscription
mardi 24 avril 2012
Statut
Membre
Dernière intervention
21 mai 2019
-
Merci. Je suis entrepreneur et motard, et je lance une plateforme de location de motos dans le département 04.
Commenter la réponse de MercantourEastCoast