Bonjour,

Je n'arrive pas a trouver comment placer un lien juste en dessous une image.

je dispose de six images, deux par colonne dans trois colonnes, le tout bien aligné (merci a @ChrisLebure).

si je rajoute un lien il est placé par défaut a droite de l'image et décale tout.

Peut être me faut-il apprendre a utiliser une grille...

Je souhaiterais aussi espacer verticalement les 2 lignes de 3 images pour que le lien ne soit pas "comprimé" entre deux images.

Voici le code :

<div id="col">
      
      
        <img src="https://i.postimg.cc/JhcxJWtv/capoeira.png" title="viva la capoeira" alt="photo capoeira"/>
        <a href="https://capoeiramandaraloiretcher.jimdofree.com" title="cliquez ici pour acceder au site officiel du groupe" target="_blank">capoeira mandara</a>
      
           
        <img src="https://i.postimg.cc/44F5pPNf/jeuxvideos.jpg" title="you win" alt="photo jeux videos"/>
        <a href="https://store.steampowered.com/category/rpg/" title="cliquez ici pour acceder au site de steam" target="_blank">jeux de roles</a>
      
           
        <img src="https://i.postimg.cc/HLC3VLWb/arts.jpg" title="musique, peinture, cinema..." alt="photo arts"/>
        <a href="https://www.wikiart.org/fr/maurits-cornelis-escher" title="cliquez ici pour voir les oeuvres de mon artiste favori" target="_blank">wonderfull art</a>
      
      
       
        <img src="https://i.postimg.cc/6pzL5fSx/marseille.jpg" title="ah la provence..." alt="photo de marseille"/>
        <a href="https://fr.wikipedia.org/wiki/Marseille" title="cliquez ici pour tout savoir sur la ville culturelle" target="_blank">ville de marseille</a>
      
           
        <img src="https://i.postimg.cc/8zkM3rCK/nature.jpg" title="le grand air" alt="photo de nature"/>
        <a href="https://theconversation.com/pourquoi-la-nature-nous-fait-du-bien-les-scientifiques-expliquent-92959" title="cliquez ici si vous aimez la nature" target="_blank">tree hug</a>
      
           
        <img src="https://i.postimg.cc/QMH5NG1c/plaisir.jpg" title="goutons voir si le vin est bon" alt="photo de plaisir"/>
        <a href="https://www.bien-manger-bien-boire.com/" title="cliquez ici pour des idees sympa" target="_blank">hédonisme</a>
      

      </div>

CSS :

body {
  margin: 0;
}
 
header {
  background-color: black;
  height: 100px;
}
 
h1 {
  margin: 0;
 color: white;
  text-align: center; 
  line-height: 100px;
}

.centrage {text-align: center;}

body
{
    background-color: grey;
    color: white;
}

img {
	width: 275px;
	height: 180px;
}

img {
	max-width: 100%;
	height: auto;
}

#col {
  column-count: 3;
  
}

un screenshot du résultat foireux :

Merci d'avance, knowledge is so sweet.

salut,  pour ton problème je pense que tu peut rajouter des balise <br /> après tes images (cette balise fais un saut de ligne)

et pour rajouter ton espace entre image et lien tu peut rajouter 

margin-top: 10px;
margin-bottom: 10px;

pour espacer.

ps: pour que ton code soit plus lisible tu peut regrouper les balise dans ton code css tu t'y retrouveras certainement mieux

-
Edité par TidianDELAGE5 30 novembre 2021 à 17:12:47

Bonjour,

c'est normal car <img> et <a> sont par défaut des éléments de type "inline", c'est-à-dire qu'ils s'écrivent à la suite les uns des autres sur la même ligne, et ne prennent que la largeur nécessaire à leur contenu. C'est comme ça qu'on peut avoir plusieurs <a> sur la même lignen une image et un <a>, etc. tout dépend des largeurs

à l'inverse, les éléments de type "block" occupent toute la largeur disponible dans leur parent, c'est le cas des <div>, des <h1>, etc. Le navigateur va à la ligne pour les écrire, et va à la ligne ensuite. C'et le comportement habituel des <div> par exemple.

Mais on peut décider qu'un élément inline se comporte comme un élément block, il suffit pour ça de le déclarer :

a {
  display:block;
}

dans notre cas, les <a> vont s'afficher sous les images pour occuper toute la largeur de la colonne, et pour ne pas affecter les autres <a> de la page on écrira :

#col a {
    display:block;

et seules les <a> de la div en colonnes seront affectées

Remarque : il faut utiliser l class .col plutôt que l'id #col, qu'on réserve pour le javascript, du coup on aura :

.col a {
    display:block;

et bien entendu dans le HTML

<div class="col">
...
</div>

Cependant, comme je pense que la page va encore évoluer, avec par exemple un filet autour de chaque block image + lien, et peut-être un titre quelque part, ou une légende, la solution qui permettrait de faire évoluer facilement le tout serait de créer des boîtes qui contiennent image + lien avec un truc de la forme :

<div class="col">

  <div class="boite">
    <img src="..." alt="">
    <a href="...">
  </div>

  <div class="boite">
    <img src="..." alt="">
    <a href="...">
  </div>

</div>

et si on définit les .boite comme des flexbox, on va positionner facilement les éléments sur la hauteur sans utiliser le display:block pour les <a>

Spontanément je prendrai cette solution, mais c'était bien d'aborder la question des éléments inline ou block et la manière de le changer