Impossible de mettre un lien en une image cliquabl

Lien qui ne tient pas compte de l'image

Sujet résolu

Xillis

5 octobre 2021 à 21:51:37

Bonjour,

J'ai insérer un bouton drapeau sur cette page qui est sensé envoyer les visiteurs sur une autre page traduite.

Seulement, le lien ne tient pas compte de mon image et je ne comprend pas pourquoi.

J'ai insérer ce code

<a id="a1" href="Capture(en).html"><img id="im" src="Images/Bouton(en).png"/></a>

Normalement, c'est toute l'image qui doit être cliquable.

Je vous met mon code html et CSS

<!DOCTYPE html>
<html>

<head>
 
 <meta charset="utf-8" />
<title>webstum.com</title>
<link rel="stylesheet" href="Capture.CSS" />
<meta name="description" content="Gagner des revenus résiduels sur internet"/>
		<meta name="keywords" content="revenus, argent, surf rémunéré, microjobs, programme d\'affiliation, MLM, Forex, Options binaires, webmarketing, processeur de paiement"/>
		<meta name="robots" content="index"/>
		<meta name="REVISIT-AFTER" content="7 days"/>
		<meta http-equiv="Content-Language" content="fr"/>

</head>

<body> 

<header>	
	<div id="header">	
<h1>Webstum.com</h1>

<!--Bouton traduction--
<a href="http://free-website-translation.com/?fr" id="ftwtranslation_button" hreflang="fr" title="" style="border:0;">
<img src="http://free-website-translation.com/img/fwt_button_en.gif" id="ftwtranslation_image" alt="Outil de traduction gratuite de site Internet" style="border:0;"/></a>
<br /><a href="http://free-website-translation.com/?fr" style="font-size:10px;font-family:verdana;color:#000;margin:2px 4px;margin-top:0;">by FreeWebsiteTranslation.com</a><script type="text/javascript" src="http://free-website-translation.com/scripts/fwt.js" /></script>
-->
<a id="a1" href="Capture(en).html"><img id="im" src="Images/Bouton(en).png"/></a>

	<!--<figure id="fig"><a id="a1" href="Capture(en).html"><img id="im" src="Images/Bouton(en).png"/></a></figure>-->
	


	
	
	</div>

</header>

<section>

<h2>
Outils de marketing et revenus passif
</h2>

<div id="A1">
<p class="p"> Programme certifié légit.</p>
<img class="img" src="Images/check2.png"/>
<p class="pp">Des partenaires soigneusement sélectionnés pour la qualité de leur service.<br/>Chaque programmes sont testés avec nos outils de suivis.</p>
</div>

<div id="A2">
<p class="p">Des articles</p>
<img class="img" src="Images/check2.png"/>
<p class="pp">Profitez de notre expérience de marketing gratuitement en lisant notre dossier sur les échanges de traffic.</p>
</div>

<div id="A3">
<p class="p">Développez vos compétences</p>
<img class="img" src="Images/check2.png"/>
<p class="pp">Suivez des formations diplomantes à distance chez notre partenaire pour développer vos compétences.</p>
</div>

<div id="entrer">
<p id="entrer2"><a id="entrer3" href="http://webstum.com/Ressources.html">Entrer</a></p>
</div>
</section>

<footer>
<!--<p>Bannières publicitaires</p>-->
</footer>

</body>

</html>

body {
/* Image de fond extensible à la résolution d'écran*/
background-image: url("Images/Business-Meeting.jpg");
background-repeat: no-repeat;
 -webkit-background-size:contain ; /* pour Chrome et Safari */
  -moz-background-size:contain; /* pour Firefox */
  -o-background-size:contain; /* pour Opera */  
background-size:100% 100%;
margin:0;
padding:0;
}

header, h2
{margin:0;
padding:0;
}

#header 
{background-color:rgba(0,0,0,0.5);
margin:0;
padding:0;
display:flex; justify-content:space-between; padding:0.5%;

}

#fig

{
background-color:red;
margin:0;
margin-right:1%;
}

#im

{
background-color:blue;
/*width:50%;*/
}

#a1

{
background-color:green;


}

h1
{
margin:0;
padding:0;
margin-left:5%;  text-shadow: 2px 1px #BDBDBD, 0 0 20px #5C6BC0, 0 0 30px #999999; <!--#999999;--> <!--#6E6E6E;-->
}

p {
margin:0;
padding:0;}

section 
{
background-color:rgba(0,0,0,0.5);
margin:0;
padding:0;
color:white;
}

h2
{
padding-top:7%; text-align:center; /*position:absolute;*/ width:100%; /*top:50%;*/ transform: translateY(-50%); color:white; 
font-size:xx-large; font-family: Open Sans, sans-serif; text-transform: uppercase; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

.p 

{
font-size:x-large; 
color: #A9CCE3;
font-weight: bold;
margin:3%;

}

.pp

{
font-size: large;	
font-weight: bold;
margin:5%;
}

#A1, #A2, #A3

{
background-color:rgba(0,0,0,0.5); 
background:linear-gradient(to left, transparent 50%, #021F33 );
border-top: solid 1px #5882FA;
/*border: solid 4px rgba(255, 0, 0, .1);*/
padding-bottom:0.2%;
padding-left:0.2%;
width:50%;
margin-bottom:2%;
}

#A1 

{
margin-left:10%;
}

#A2

{
margin-left:20%;
}

#A3

{
margin-left:30%;
}

.img

{
width:5%;
height:5%;
float:left;
margin-right:2%;
margin-top: 2%;
margin-left:2%;
}

#entrer

{
display:flex;
justify-content : center;
/*background-color:red;*/
}

#entrer2

{
background-color:#031629;
border:solid /*#5882FA*/ #032740 1px;
border-radius:8px;
font-size:300%;
padding-top:0.2%;
padding-bottom:0.2%;
padding-left:2.5%;
padding-right:2.5%;
}

#entrer3

{
text-decoration:none;
color:#A9CCE3; 
}

#entrer3:hover

{
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

#entrer2:hover
{
box-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

Je vous remercie pour votre aide

-
Edité par Xillis 6 octobre 2021 à 20:58:00

Outils de marketing et revenus passifs

Lamecarlate

6 octobre 2021 à 7:58:02

Bonjour,

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Merci de modifier votre titre. Pour cela, éditez le premier message de votre sujet.

(titre originel : Image cliquable)

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Mewen_bzh

6 octobre 2021 à 8:57:49

Bonjour,

Pour commencer je te propose de revoir ton code afin de partir sur des bases solides et y voir plus clair.

Commence déjà par mettre de l'ordre dans tes sauts de ligne, revois l'indentation, retire ta meta http-equiv qui est obsolète, etc.

Tu peux utiliser le validateur HTML du W3C : https://validator.w3.org/#validate_by_input

et le validateur CSS : https://jigsaw.w3.org/css-validator/#validate_by_input

-
Edité par Mewen_bzh 6 octobre 2021 à 8:59:16

Je ne réponds pas aux messages privés.

AbcAbc6

7 octobre 2021 à 3:24:58

Bonjour, en plus de ce qu'a dit Mewen_bzh,

La balise <img> ne sort jamais sans son attribut alt obligatoire.

Plutôt que la meta http-equiv, indiquez la langue du document dans la balise <html> avec l'attribut lang, de cette façon :

<!DOCTYPE html>
<html lang="fr">

Un commentaire CSS c'est : /* commentaire */, pas de commentaire HTML dans le CSS.

Plutôt que d'indiquer un style (.p) à des paragraphes utilise les balises de titre appropriée.

Pour en venir à ton problème de lien, utilise l'inspecteur des éléments pour voir ce qui ne va pas. Clique droit sur le lien qui ne fonctionne pas puis inspecter. Dans la console d'inspection de code tu vois que c'est le <h2> qui prend le dessus.

Pour quelles raisons un padding-top: 7%; et un transform: translateY(-50%); Laisse les éléments comme ils sont positionner et ne change que si cela est nécessaire.

Pas de width: 100% pour un block, Lire https://raphaelgoetter.wordpress.com/2011/11/30/width-100-tu-es-le-mal/

De façon générale utilise des class pour le CSS, laisse les identifiants pour les ancres et le JavaScript, c'est une question de poids de sélecteur.

Xillis

7 octobre 2021 à 22:38:55

Je vous remercie d'avoir prit le temps de m'aider. Le problème est résolu.

Outils de marketing et revenus passifs