Sujet Précédent Sujet Suivant

Problème "Padding" HTML-CSS

Résolu/Fermé
JeuneZouave Messages postés 17 Date d'inscription vendredi 28 février 2020 Statut Membre Dernière intervention 23 octobre 2021 - 28 févr. 2020 à 11:10
 Haround - 29 févr. 2020 à 19:19
Bonjour tout le monde,

En vue d'un projet scolaire, je suis en train de préparer un site. Jusque là, tout va bien. Sauf que j'ai un problème avec les liens que j'ai mis sur les image. Je voudrais que seulement le clique dans la zone orange fait la redirection vers une autre page sauf que les zones rouges (Où j'ai mis "padding-left" et "padding-buttom") servent aussi à la redirection. Je voudrais, si possible, que la redirection soit exclusivement réservé à la zone orange tout en conservant les paddings.

Merci d'avance de vos réponses.






Configuration: Windows 10/ Chrome 80.0.3987.122

5 réponses

Réponse 1 / 5
jordane45 Messages postés 38454 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 mars 2025 4 740
28 févr. 2020 à 13:22
Bonjour

Sans voir ton code il sera impossible de t'aider
0
JeuneZouave Messages postés 17 Date d'inscription vendredi 28 février 2020 Statut Membre Dernière intervention 23 octobre 2021
28 févr. 2020 à 18:59
Pour le html : 
    <br /><br />
    <div class="corps">
        <br /><br /><br />
        <a href="/redirect/1.html"><img id="g" src="img/1.png" onmouseover="this.src='img/affAnime/2.png';" onmouseout="this.src='img/affAnime/1.png'"/></a> 
    </div>


Pour le CSS : 
#g{
    padding-left: 75px;
    padding-bottom: 60px;
}
0
Réponse 2 / 5
Haround
28 févr. 2020 à 20:17
Bonsoir,
le padding c'est la marge interne de l'élément, ici l'image.
Le clic passe par un lien donc concerne tout ce qui est contenu dans le lien: ici une image et ses marges.
Pour délimiter une zone je pense le plus simple est de passer par les area map comme ceci:
(c'est assez simple avec un rectangle en plus)

https://www.w3schools.com/TAGS/tag_area.asp

Sinon une autre solution serait de mettre des éléments invisibles(comme un div) en superposition(donc hors du lien avec la balise "a" ), 4 un par 'bord' où on doit empêcher le clic mais ça me paraît nettement plus compliqué pour le même résultat.
0
Haround
28 févr. 2020 à 20:23
éventuellement il y a ça aussi si on veut utiliser le CSS, ça consiste juste à masquer une partie de l'image donc je ne sais pas si ça peut correspondre ou alors il faut aussi adapter les marges.

https://www.w3schools.com/cssref/pr_pos_clip.asp
Bien sûr en utilisant clip il faut rajouter le lien comme c'est fait dans le code que vous nous montrez.
0
Réponse 3 / 5
JeuneZouave Messages postés 17 Date d'inscription vendredi 28 février 2020 Statut Membre Dernière intervention 23 octobre 2021
28 févr. 2020 à 20:24
Merci de votre réponse, je teste dans les plus brefs délais et je vous dis ça a fonctionné.
0
Réponse 4 / 5
jordane45 Messages postés 38454 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 mars 2025 4 740
Modifié le 28 févr. 2020 à 20:49
Bonjour,

Tu peux aussi déplacer ton id "g" ailleurs.
Dans la div corps ou en ajouter une autre
par exemple 
<div class="corps">
        <br /><br /><br />
       <div id="g">
        <a href="/redirect/1.html">
             <img  src="img/1.png" onmouseover="this.src='img/affAnime/2.png';"
                onmouseout="this.src='img/affAnime/1.png'"/>
        </a> 
      </div>
    </div>


je te conseille également d'éviter de mettre du code JS directement dans les attributs..
Utilises plutôt des fonctions.
par exemple 
 <div class="corps">
        <br /><br /><br />
        <div id="g">
   <a href="/redirect/1.html">
    <img  src="img/1.png" 
       onmouseover="changeImg(this,'2.png');"
       onmouseout="changeImg(this,'1.png');"/>
   </a> 
  </div>
    </div>

   <script type="text/javascript">
 function changeImg(elm,imgName){
  elm.src='img/affAnime/'+ imgName;
 }
   </script>


0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
JeuneZouave Messages postés 17 Date d'inscription vendredi 28 février 2020 Statut Membre Dernière intervention 23 octobre 2021
28 févr. 2020 à 21:02
Problème résolu !

"Sinon une autre solution serait de mettre des éléments invisibles" -Haround

Solution : J'ai fais une image .png 1px*1px que j'ai redimensionné avec le css : 
#espace{
    height: 300px;
    width: 75px;
}


Merci de vos réponses ^^
0
Haround
29 févr. 2020 à 19:19
beurk, surtout à éviter votre solution(qui n'en est pas une).
Là vous faites charger une image qui ne sert à rien et en plus la rendez inaccessible: tout ce qui ne faut pas faire et qui nuira aux performances de la page sans rien apporter.
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Balise </br>
erf -
erf -

3 réponses
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

13 réponses
Espace HTML
guilhem_mdg -
hodor -

10 réponses