1
votes

Comment positionner un élément <p> sous un élément <h1>?

Je suis assez nouveau dans le développement Web. Je pensais que je comprenais assez bien les choses jusqu'à ce que cela me surprenne. J'ai essayé de déplacer l'élément <p avec à la fois float et position ainsi que d'autres mots-clés CSS. Je suis assez sûr que c'est quelque chose que j'oublie mais je ne le trouve pas.

Pour clarifier, je voudrais que le texte "Calculatrice en ligne" dans l'élément p soit sous le texte "Calculatrice de taille de revêtement de bac à chat". Cela ressemblerait donc à ceci:
Calculateur de taille de bac à chat
Calculatrice en ligne

Et je veux que ce soit dans le même conteneur en haut. Merci!

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <meta name = "viewport" content = "width = device-width">
        <meta name = "description" content = "Litter Box Dimensions Calculator">
        <meta name = "keywords" content = "Litter, box, dimensions, calculator, elastic, liner, cat">
        <meta name = "author" content = "Adam Johnes">
        <title>Cat Pan Liner Size Calculator | Welcome</title>
        <link rel = "stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> 
        <link rel = "stylesheet" href= "style.css"> 
    </head>
    <body>
        <header>
            <div id = "titleBox" class = "container">
                <!-- problem is here (I think)-->
                    <h1 id = "title">Cat Pan Liner Size Calculator</h1>
                    <p id = "infotitle">Online Calculator</p>
                    <img src =  "calculator.jpg" alt = "calculator" id = "calculator">
            </div>
        </header>
        <section>
            <div id = "main" class = "container">
                <h1 id = "linerCalculator">Cat Pan Liner Calculator</h1>
                <form id = "form" class = "w3-form w3-margin">
                    <label id = "labelWidth" for = "width">Width(in):</label><br>
                    <input type = "text" id = "width" placeholder = "Enter width in INCHES"><br><br>
                    <label id = "labelLength" for = "length">Length(in):</label><br>
                    <input type = "text" id = "length" placeholder = "Enter length in INCHES"><br><br>
                    <label id = "labelDepth" for = "Depth">Depth(in):</label><br>
                    <input type = "text" id = "depth" placeholder = "Enter depth in INCHES"><br><br>
                    <input type = "submit" id = "submit" value = "Submit">
                    <input type = "reset" id = "reset">
                </form>
            </div>
        </section>
    </body>
</html>

/* CSS Document */
  body {
    padding: 10px;
    background: rgb(212, 207, 207);
  }
  
  div {
    border: 2px solid lightslategray;
    margin: 0 auto;
    width: 70%;
  }

  #titleBox {
    height: 100px;
    background-color: white;
  }
  
  #title {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    float: left;
    margin-left: 20px;
  }

  #infotitle {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 16px;
    float: left;
  }

  #calculator {
      width: 10%;
      height: 100%;
      float: right;
  }

  #main {
    border: 2px solid lightslategray;
    background-color: white;
    height: 800px
  }

  #linerCalculator {
    font-weight: bold;
    font-size: 16px;
  }

  #form {
    border: 1px solid black;
    width: 350px;
    height: 300px;
    background-color: rgb(243, 242, 248);
    border: 2px solid lightslategray;
  }
  
  /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 800px) {
    .leftcolumn, .rightcolumn {   
      width: 100%;
      padding: 0;
    }
  }
  
  /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
  @media screen and (max-width: 400px) {
    .topnav a {
      float: none;
      width: 100%;
    }
  }

html css containers element

0 commentaires

3 Réponses :

1
votes

Essayez ceci dans votre CSS, cela devrait résoudre votre problème:

    #title {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    margin-left: 20px;
    margin-bottom: -10px;
  }

  #infotitle {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 16px;
    margin-left: 20px;
  }

0 commentaires

0
votes

vous pouvez donner la propriété margin-left à la fois à vous #title et #infotitle comme ceci

#title{
margin-left:15px;
}
#infotitle{
margin-left:15px;
}

si cela aide, faites le moi savoir

0 commentaires

0
votes

#title, #infotitle, #linerCalculator{
/* Add padding left and right */
padding: 0 15px;
}

#infotitle{
/* Add margin-top */
margin-top: -5px;
}

1 commentaires

veuillez ajouter quelques informations sur la réponse.