positionner un lien sous une image ?

emmanuel mesquita
Les bases HTML/CSS

Décrivez ici votre problème ou ce que vous cherchez à faire.
Bonjour, je débute totalement dans le codage et j'ai un souci pour placer des elements ou je le souhaite.
Peut faut il utiliser une grille plutot que des colonnes...
j'ai encore tout a découvrir et c'est passionnant !

voici mon code :

HTML :

" <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: 300px;
height: 300px;
}

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

col {

column-count: 3;

}"

Entourez votre code en utilisant "```" pour bien le mettre en forme. (ne copiez pas trop de code)

Ce que je veux

je voudrai que mes six photos soit placés par deux (l'une au dessus de l'autre) dans trois colonnes.
je voudrais placer un lien en dessous chaques images et si possible ajouter un peu d'espacement vertical entre les images pour que les liens ne parraissent pas "comprimés".

Ce que j'obtiens

le lien se place par défaut a droite de l'image et cela décalle l'ensemble et les images ne sont plus alignés correctement.

2 réponses

popotte

Salut, alors d'abord je mets un coup de propre au code et ensuite je réponds ^^

<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: 300px;
    height: 300px;
}

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

col {
    column-count: 3;
}
popotte

Alors pour commencer tu as mal nommé col dans ton CSS

col -> Recher la balise <col></col>

Pour une div avec id col il faut mettre #col dans le CSS

Ensuite il faut isoler les images/liens:

<div id="container">
    <div class="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>
    </div>

    <div class="col">
        <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>
    </div>

    <div class="col">
        <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>
    </div>

    <div class="col">
        <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>
    </div>

    <div class="col">
        <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>
    </div>

    <div class="col">
        <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>
</div>

Et en CSS:

#container {
    display: grid;
    grid-template-columns: repeat(2, 2fr) /* 2collones d'une largeur de 2/5 */
}

C'est une feature récente, ça fonctionne sur EDGE mais pas sur IE (mais IE c'est poubelle :|)