Texte avec lien dans une image

8 avril 2021 à 12:47:43

Bonjour, je souhaite insérer en bas à droite d'une image, du texte entouré d'une bordure avec un lien cliquable mais je bloque.

J'ai déjà écrit le code suivant :

HTML :

<div><img src="Mark logo.PNG">
        	   <a href="https://monsite.fr/article" id="voir">Voir l'article</a></div>

CSS :

#voir
{
	border-radius: 10px ;
	border: 4px red solid;
	background-color: red;
	color: white;
}

Merci pour votre aide.

-
Edité par JH26 8 avril 2021 à 12:47:59

NadfriJS

8 avril 2021 à 16:58:22

Salut, un truc comme ca?

https://jsbin.com/boyeyecomo/edit?html,css,output

La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

Domi65

8 avril 2021 à 20:16:27

Hello. Si tu veux que le texte soit par dessus la photo, tu peux, en conservantla solution HTML proposée par NadfrJS, utiliser ce CSS :

figure{
  text-align:right
}
a{
  color:white;
  text-decoration: none;
  position: relative;
  top: -1.5em
}

JH26

9 avril 2021 à 12:03:29

Yes ! C'est exactement ce que je cherchais.

Par contre j'ai remarqué que j'ai un autre problème, c'est que lorsque l'on clique seulement sur l'image je suis redirigé vers l'adresse https://monsite.fr/contact qui correspond à un lien présent dans la liste à puce positionnée précédemment. Alors que je souhaiterai qu'il ne se passe rien ou que l'on soit redirigé vers le même lien que le texte en bas de l'image.

J'ai rajouté un petit bout de css qui corrige le problème mais j'ai surtout l'impression d'avoir mis une béquille et de ne pas avoir résolu le problème qui doit se trouver du côté de mon code HTML.

<body>

  <div id="mapage">
     <HEADER>
       <img src="Chrome logo Mini.PNG" alt="toto">
         <h1>Mon Site</h1>
           <nav>
             <ul>
        		<li><a href="https://monsite.fr/accueil">ACCUEIL</li>
        		<li><a href="https://monsite.fr/blog">BLOG</li>
        		<li><a href="https://monsite.fr/cv">CV</li>
        		<li><a href="https://monsite.fr/contact">CONTACT</li>
             </ul>
           </nav>
     </HEADER>
       <figure>
            <div>
            	<img src="Mark logo.PNG" alt="logo de mon site" id="image" />
        	      <figcaption>
        	       <a href="https://monsite.fr/article" id="voir">Voir l'article</a>
            </div>
        	      </figcaption>
       </figure>

body
{
	background-color: #FBFF9C;	
}

header
{
	display: flex;
}

figure
{
	border: solid gray;
    width: fit-content;
    height: fit-content;
    text-align:right;
    border-radius: 5px;
    background-color: teal;
}

#voir
{
  color:white;
  text-decoration: none;
}

#image
{ 
      pointer-events: none; 
      cursor: default; 
      }

NadfriJS

9 avril 2021 à 18:36:46

Salut, tes balises <a> présent dans les li ne sont pas fermées, ca doit faire le bazar coté HTML.

Pour trouver rapidement ce genre de bug, passe toujours ton HTML dans un vérificateur:

A mettre dans tes favoris:

Vérificateur HTML:

https://validator.w3.org/

Vérificateur CSS:

https://jigsaw.w3.org/css-validator/

La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

JH26

13 avril 2021 à 17:02:47

Oui effectivement et merci pour les conseils