Partage
  • Partager sur Facebook
  • Partager sur Twitter

bordure carre

    2 juillet 2024 à 23:33:38

    bonjour pour l'exercice des bordure Jai un problèmes comment on fait pour crée un carre au milieu de la page il a aucun explication dans la video pour le faire .

    Quand je fait les bordure il se transforme en rectangle et non en carre voila le code que je utilise 

    <p class="carre"> carre </p>

    et en css

    .carre{

    border 2px solid red;

    }

    et en fessant ceci il na pas un carre mais un rectangle qui prend toute la page 

    et aussi comment on fait pour le déplace sur la page si je veut le place au centre a droit et ect.

    Merci pour votre futur réponse.

    -
    Edité par NolanKoch 2 juillet 2024 à 23:35:19

    • Partager sur Facebook
    • Partager sur Twitter
      3 juillet 2024 à 0:05:14

      Bonsoir,  Pour inclure du code sur le forum utilise le bouton code </> de la barre d'outil.

      >> pour l'exercice des bordure

       Quel est l'énoncé de l'exercice que tu veux réaliser? ( un lien vers la page en question ou copie ici l'énoncé)

      >> Quand je fait les bordure il se transforme en rectangle et non en carre

      Les bordures ce place tout autour d'un élément, il n'y à pas à ma connaissance d'élément HTML de forme carrée. L’élément HTML  "block" prend la largeur de son parent. Comme la largeur du navigateur est plus grande que la hauteur de ton contenu cela forme un rectangle. Diminue la largeur de la fenêtre du navigateur tu finiras par avoir un carré à un moment donné.

      Renseigne toi sur le modèle de boite ici ou ici

      >> comment on fait pour crée un carre au milieu de la page

      En utilisant un système de positionnement, actuellement il y a flexbox ou Grid (documente toi sur les deux). Je te fait un exemple avec flexbox :Le carré est réalisé en indiquant des valeurs de hauteur et de largeur à l'élément voulu.

      Le HTML :

      <body>
        <div class="conteneur">
          <div class="carre">
            <p>un carré centré</p>
          </div>
        </div>
      </body>

      Le CSS :

          .conteneur {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
          }
      
          .carre {
            width: 200px;
            height: 200px;
            border: 5px solid brown;
          }

      -
      Edité par AbcAbc6 3 juillet 2024 à 0:13:14

      • Partager sur Facebook
      • Partager sur Twitter
        3 juillet 2024 à 18:19:48

        Merci énormément pour votre réponse je vais me documente sur le sujet .
        • Partager sur Facebook
        • Partager sur Twitter

        bordure carre

        × 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