28172 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnemt CSS grid

Bonsoir,

Sur l'image ci-dessous, je souhaiterais décoller un peu le fil d'Ariane du menu. J'ai essayé plein de choses sans succès.

upload/1708625838-86276-ce.jpg

Voici le code:

#gallery {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: 80px;
}
#gallery img {
  place-self: stretch;
  object-fit: cover;
  /*width: 100%;
  height: auto;*/
  border-radius: 0%;
}
div#block {
    width:100%; height: auto; padding: 30px 30px 0 30px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 4px 4px 10px var(--light-grey);
}
div#block-3 {
    width:100%; 
    height: auto; 
    margin: 25wv;
    padding: 10px;
    background-color: white;
    border-radius: 10px;
    /*box-shadow: 4px 4px 10px var(--light-grey);*/
}
img:nth-child(1) {
  grid-column: 1 / 7;
  grid-row: 1 / 4;
}
img:nth-child(2), div#block {
  grid-column: 2 / 6;
  grid-row: 3 / 6;
}
div#block-3 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }


      <div id="gallery">
        <img src="img/jardin-privatif-clos-gite-tigoudoul-moelan-sur-mer-1920x564.jpg" alt="">
        <div id="block">
          <h1 class="center mb-40">Gite éco-responsable en Bretagne Sud</h1>
          <h2>Louer un gîte éco-responsable en Bretagne offre la possibilité de vivre une double expérience. Découvrez la beauté 
            préservée de la Bretagne tout en minimisant votre impact sur l'environnement. Profitez d'un séjour authentique dans un cadre naturel 
            préservé, adoptant des pratiques durables et éco-responsables.<br><br>
            Plongez dans une immersion totale, alliant confort et respect de la nature pour des vacances respectueuses de l'écosystème breton.</h2>
        </div>
        <div id="block-3">
          <a href="index.html"><b>Accueil</b></a> > Gite éco-responsable
        </div>


Merci poir votre aide.

Cdt
Modérateur
Bonjour,

Je suppose que le fil d'Ariane est div#block-3.

Pas mal de solutions.

Solution 1: On met par exemple un padding-top: 1em sur #gallery

Solution 2: On met un position: relative et top: 1em sur div#block-3

Remarque : quand on emploie des < et > qui ne délimitent pas des balises, on les remplace par &lt; et &gt; sinon on peut avoir des surprises. Il faudrait donc écrire &lt; Gite éco-responsable et non pas > Gite éco-responsable.

Amicalement,
Meilleure solution
Modérateur
Bonjour,

Ma mère me l'a toujours dit : tu testeras toujours tes solutions avant de les poster.

Seulement voilà, quand on a qu'un bout de code, bah, difficile de deviner ce qui empêche par ailleurs ces solutions de fonctionner. Parce que si on met dans une page seulement les codes que tu as donnés, ces solutions me semblent fonctionner.

Amicalement,

EDIT: ci-dessous mon code de test
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
* {outline:1px solid red;}
#gallery {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: 80px;
}
#gallery img {
  place-self: stretch;
  object-fit: cover;
  /*width: 100%;
  height: auto;*/
  border-radius: 0%;
}
div#block {
    width:100%; height: auto; padding: 30px 30px 0 30px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 4px 4px 10px var(--light-grey);
}
div#block-3 {
    width:100%; 
    height: auto; 
    margin: 25wv;
    padding: 10px;
    background-color: white;
    border-radius: 10px;
    /*box-shadow: 4px 4px 10px var(--light-grey);*/
}
img:nth-child(1) {
  grid-column: 1 / 7;
  grid-row: 1 / 4;
}
img:nth-child(2), div#block {
  grid-column: 2 / 6;
  grid-row: 3 / 6;
}
div#block-3 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    position:relative;
    top: 0.5em;
    left: 0.5em;
}
</style>
</head>
<body>
<div id="gallery">
    <img src="img/jardin-privatif-clos-gite-tigoudoul-moelan-sur-mer-1920x564.jpg" alt="">
    <div id="block">
        <h1 class="center mb-40">Gite éco-responsable en Bretagne Sud</h1>
        <h2>Louer un gîte éco-responsable en Bretagne offre la possibilité de vivre une double expérience. Découvrez la beauté 
            préservée de la Bretagne tout en minimisant votre impact sur l'environnement. Profitez d'un séjour authentique dans un cadre naturel 
            préservé, adoptant des pratiques durables et éco-responsables.<br><br>
            Plongez dans une immersion totale, alliant confort et respect de la nature pour des vacances respectueuses de l'écosystème breton.</h2>
    </div>
    <div id="block-3">
        <a href="index.html"><b>Accueil</b></a> &lt; Gite éco-responsable
    </div>
</div>
</body>
</html>
Amicalement,
Modifié par parsimonhi (22 Feb 2024 - 20:33)
Re,
"Ma mère me l'a toujours dit : tu testeras toujours tes solutions avant de les poster." Smiley biggrin Smiley ravi
Mille excuses ! Ca fonctionne parfaitement ! La mienne me disait "tu rafraîchiras la page de ton navigateur !"
Amicalement,
Prévenir un modérateur
Répondre au sujet
Aller à