Partage
  • Partager sur Facebook
  • Partager sur Twitter

Aligner titre à gauche

Problème CSS Margin-Padding

Sujet résolu
    13 juin 2024 à 11:35:16

    Bonjour à tous

    J'ai récemment décidé de me lancer dans l'apprentissage du HTML/CSS en autodidacte, et je rencontre déjà un problème :euh:

    J'ai créé ce code de manière à avoir un arrière-plan un peu orange et une bordure noir (pour le style :ange:), mais dès que je veux y ajouter du texte, il se retrouve complétement décalé du bords de l'écran.

    J'imagine que le problème vient des propriétés MARGIN-PADDING du code CSS comme je l'ai mentionné dans le titre mais je voudrais les garder tel quel, alors comment faire pour aligner le texte à gauche sans modifier le style du CSS ?

    Je vous mets mon code en pièce-jointe

    <body>
      <h1>
        The title
      </h1>
      <h2>
        I do:
      </h2>
    </body>
    
    *{
      background-color: black;
      color: white;
    }
    body{
      margin: 20px;
      padding: 250px;
      background-color: coral;
      text-align: left;
    }

    J'imagine que ce point doit vous paraitre évident, donc je m'excuse pour le dérangement :( 

    -
    Edité par LinuxUbuntu4 13 juin 2024 à 17:10:03

    • Partager sur Facebook
    • Partager sur Twitter
      13 juin 2024 à 12:59:19

      Bonjour,

      >> et une bordure noir

      La ce n'est pas une bordure, c'est une marge externe. Pour une bordure c'est border :

      https://developer.mozilla.org/fr/docs/Web/CSS/border

      N'utilise pas le sélecteur universel (*) de cette façon, indique les éléments que tu souhaites styliser en indiquant soit le nom de la balise, le mieux étant l'usage de class. 

      Documente toi sur le modèle de boite.

      PS : le texte est aligné à gauche par défaut, dans ton titre tu indiques "à droite".

      -
      Edité par AbcAbc6 13 juin 2024 à 13:00:35

      • Partager sur Facebook
      • Partager sur Twitter
        13 juin 2024 à 17:19:04

        AbcAbc6 a écrit:

        La ce n'est pas une bordure, c'est une marge externe. Pour une bordure c'est border

        Merci pour votre réponse :)

        J'aurais une dernière question du coup:

        Comment faire pour que cette bordure soir fixer aux bords de la page ?

        Comme on peut le voir sur cette capture d'écran, la bordure encadre seulement le texte >_<

        PS: Merci pour la correction

        -
        Edité par LinuxUbuntu4 13 juin 2024 à 17:21:09

        • Partager sur Facebook
        • Partager sur Twitter
          13 juin 2024 à 18:04:06

          Bonsoir, en indiquant une hauteur minimum du body à 100% de la hauteur du viewport et en supprimant les marges par défaut du body.

          html {
                box-sizing: border-box;
              }
          
              *,
              *::before,
              *::after {
                box-sizing: inherit;
              }
          
              body {
                border: 21px ridge #ffdd94;
                background-color: coral;
                margin: 0;
                min-height: 100vh;
              }



          -
          Edité par AbcAbc6 13 juin 2024 à 18:06:23

          • Partager sur Facebook
          • Partager sur Twitter
            15 juin 2024 à 21:11:29

            Cela fonctionne

            Merci beaucoup :ange:

            • Partager sur Facebook
            • Partager sur Twitter

            Aligner titre à gauche

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