Partage
  • Partager sur Facebook
  • Partager sur Twitter

Position absolute

Position absolute

Sujet résolu
    21 mai 2024 à 18:38:54

    Bonjour,

    Je suis en train de suivre le cours "Créez votre site web avec HTML5 et CSS3".

    Je suis actuellement dans le chapitre "Abordez d'autres techniques de mise en page". Tout se passe bien lors de mes tests, sauf lorsque j'essaie d'utiliser la propriété `position: absolute`avec configurations suivante :

    <div>
        <a href="=" class="banniere"> 
           <img src="https://images.unsplash.com/photo-1659678314866-ed69cff0b366?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1364&q=80" alt="couple sur un rocher">
           <h1>Des vacances sympas</h1>
        </a>
    </div>
    
    * {
      font-family: Arial;
    }
    
    img {
      height: 400px;
    }
    
    .banniere {
      position: relative;
    }
    
    h1 {
      position: absolute;
      top: 100px;
      font-size: 20px;
    }

    Je n'arrive pas à centrer le texte de la balise <h1> sur l'image.

    Lorsque j'utilise `top: 100px;`, le texte descend au lieu de de monter.

    Je ne comprends pas pourquoi. Quelqu'un peut-il m'expliquer, s'il vous plaît ?

    Merci et bonne journée.

    Cordialement,

    • Partager sur Facebook
    • Partager sur Twitter

    Doucement mais Surement 

      22 mai 2024 à 16:24:28

      Bonjour.

      Tu demandes en quelque sorte une marge de 100px en haut. Si tu veux remonter le h1, tu dois mettre une valeur négative (-100px).

      Cordialement.

      • Partager sur Facebook
      • Partager sur Twitter
        22 mai 2024 à 19:27:47

        Bonjour,

        Merci pour votre retour. Comment puis-je centrer la balise `<h1>` ? J'ai essayé ceci, mais cela ne fonctionne pas :

        .banniere {
          position: relative;
          
          
        }
        
        h1 {
          position: absolute;
          font-size: 20px;
          text-align: center;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          display: fixed;
          align-items: center;
          justify-content: center;
        }

        Merci et bonne journée.

        • Partager sur Facebook
        • Partager sur Twitter

        Doucement mais Surement 

          22 mai 2024 à 21:51:11

          Bonsoir,

          display: fixed; n'existe pas Voici les valeurs possible pour cette propriété :

          https://developer.mozilla.org/fr/docs/Web/CSS/display#syntaxe

          Soit tu utilises une ancienne méthode de positionnement le centrage en position absolut, soit tu utilises une méthode plus actuelle les flexbox. Mais pas les deux en même temps.

          Les deux dernières propriétés utilisées sont issue du module flexbox en CSS. 

          Si tu veux centrer un élément positionner en absolu, voici un tuto pour le faire :

          http://user.oc-static.com/pdf/622587-centrer-en-css.pdf

          -
          Edité par AbcAbc6 22 mai 2024 à 21:52:21

          • Partager sur Facebook
          • Partager sur Twitter
            24 mai 2024 à 18:50:21

            Merci
            • Partager sur Facebook
            • Partager sur Twitter

            Doucement mais Surement 

              24 mai 2024 à 20:39:55

              D'ailleurs, pour superposer deux éléments, on peut aussi utiliser grid :) display: grid sur le parent, et grid-area: 1 / 1 sur les deux enfants, afin de les mettre dans la même cellule. Ensuite, centrer se fait comme avec flex.
              • Partager sur Facebook
              • Partager sur Twitter

              Pas d'aide concernant le code par MP, le forum est là pour ça :)

              Position absolute

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
              • Editeur
              • Markdown