Problème "Padding" HTML-CSS
Résolu
JeuneZouave
Messages postés
17
Date d'inscription
Statut
Membre
Dernière intervention
-
Haround -
Haround -
A voir également:
- Padding html
- Editeur html - Télécharger - HTML
- Espace html ✓ - Forum HTML
- [**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
- /Var/www/html/index.html ✓ - Forum Linux / Unix
- Html download - Télécharger - HTML
5 réponses
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.
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.
é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.
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.
Bonjour,
Tu peux aussi déplacer ton id "g" ailleurs.
Dans la div corps ou en ajouter une autre
par exemple
je te conseille également d'éviter de mettre du code JS directement dans les attributs..
Utilises plutôt des fonctions.
par exemple
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>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
<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; }