Partage
  • Partager sur Facebook
  • Partager sur Twitter

positionner un lien sous des images en colonnes ?

    30 novembre 2021 à 16:49:09

    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 :

    résultat foireux

    Merci d'avance, knowledge is so sweet.


    • Partager sur Facebook
    • Partager sur Twitter
      30 novembre 2021 à 17:03:48

      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

      • Partager sur Facebook
      • Partager sur Twitter
        30 novembre 2021 à 17:17:10

        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









        • Partager sur Facebook
        • Partager sur Twitter

        positionner un lien sous des images en colonnes ?

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur
        • Markdown