skip to Main Content

I want to move the paragraph is same position as the <summary> but the css seems like not work. What can I do?? It just stays at the same position no matter what css I add.

I have tried so many times. adding many CSS such as margin, padding, and text-align also maintains the same position. I want the paragraph to have the same position as the <summary>. Also any recommendation for the design or any recommend color?

body {
  padding: 0;
  margin: 0;
  border: none;
}

.container {
  background-color: brown;
  max-width: 100%;
  height: 100%;
  background-color: antiquewhite;
  left: 0;
  right: 0;
}

summary {
  position: relative;
  font-size: 35px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  /* Add 'none' for text-decoration */
  text-indent: 5em;
  /* Correct the property value */
  cursor: pointer;
  margin-bottom: 20px;
}

.content {
  display: block;
  border: solid:1ex;
  margin-right: 5ex
}

details.word {
  font-size: 15px
}

details.styled {
  padding: 1em;
  border: 1px solid;
}

header {
  text-align: center;
  display: block;
  background-color: burlywood;
  padding: 30px;
  margin: 50px;
  background-color: white;
  font-family: 'Times New Roman', Times, serif;
  font-display: block;
  position: relative;
}

.container_p {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  position: relative;
}
<header style="font-size:15ex">

  Rules and regulation

</header>
<div class="container">

  <details style="font-size:15px">
    <summary>
      1. Team Composition
    </summary>
    <div class="container_p">
      <p>
        In Dodgeball, two teams compete against each other. Each team has 6 to 10 players. However, only 6 players are permitted to participate in the match, and the remaining players have to sit outside as substitutes. The substitute can enter the court only
        if any of the teammates get injured or feels sick. As per the rules of the game, each team has to include 2 female players on their side. It means each team has four male players and 2 female players.
      </p>
    </div>

  </details>
  <br />
  <br />
  <details>
    <summary>
      2. Court Dimensions
    </summary>
    <p class="c">
      The court of dodgeball has varying sizes. There is no specific measurement to follow while setting up a dodgeball court. But, it’s obvious that all the court’s dodgeball is rectangular in shape.
      <br /> However, the recommended size of the court is 60 feet in length and 30 feet in width.
      <br /> The court has two side lines (60 ft each), two end lines (30 ft each), two attack lines ( each line drawn 10 ft away from the center line), and one center line that divides the court into two equal halves. o, each half of the court comes
      under the control of each team. [enter image description here](https://i.stack.imgur.com/R7Akr.png) The attacking lines and center lines are of vital importance. A team can stand in its attacking area and throw the balls to opponents.
      <br /> <br /> While the center line is used for placing all the six balls before the game starts. Each team has to put its three balls on different sides of the court.
      <br /> For example, if team A puts its balls on the right side of the court, team B has to put its ball on the left side of the court. In addition to placing the balls, this line is not crossable. However, a player can cross this line only at the
      time of picking the balls from the center line, but as soon as all the balls have been picked, no player can cross this line. The Dodgeball is also played on a basketball court, excluding the goal posts, or even on a volleyball court, excluding
      the net.
      <br /> Ezoic This court is surrounded by walls and has different circles on it. It has similar lines as mentioned above. These lines include sidelines, end lines, and center lines but not attacking lines. One thing that is not found on the above-mentioned
      court is a 5 ft neutral zone on each side of the center line. Players from both teams use these zones to throw and retrieve the balls.

    </p>
  </details>

  <details>
    <summary>
      3. Duration of the Game
    </summary>
    <p>
      A Dodgeball game lasts for 10 minutes. Each match consists of 9 games. Thus, the winner has to win 5 out of 9 games.
      <br /> To win the game, a team has to eliminate the players of its rival team in as much as 10 minutes.
      <br /> Each team avails itself of a time-out of one minute (60 seconds). Both the teams can substitute their players during a time-out.
    </p>
  </details>



  <details>
    <summary>

      4. Starting of Match
    </summary>
    <p>
      The game of Dodgeball starts with the referee’s count of three or his whistle. 6 players from each team stand on their respective sides of the court, near the end line, and wait for the referee’s signal. As soon as the referee finishes counting, the players
      from both teams rush to pick up their balls that are placed on the center line. The players have to pick their own balls. They cannot pick the balls of the opposing team. Ezoic After collecting the balls, players can either throw them to their opponents
      to eliminate them or pass them to their teammates.
    </p>
  </details>
  <details>
    <summary>5. How to Play Dodgeball? Step by step Guid</summary>
    <p>
      <h3>Step 1:</h3>

      Ezoic Select 2 teams of 6 players. Each team must have four male players and 2 female players.

      <h3>tep 2:</h3>S Find a playing surface. It should be rectangular with 60 ft in length and 30 ft in width. You can choose a basketball or volleyball court. Ezoic Step 3: Select 6 balls of two different colors. Each team has to choose 3 balls of the
      same color. If team A picks yellow colored balls, team B has to pick the balls with the other available color. Step 4: Place 6 balls of two different colors on the center line. Put three balls, of the same color, on one side of the court, and the
      other three balls, of another color, on the other side of the court. Step 5: Each team should take one side of the court. Team A should stand at one end of the court, just behind the end line, and team B has to stand on the other end of the court,
      behind the end line. It means both teams have to stand in the way that they should be facing each other. Step 6: Now, wait for the referee’s signal to officially start the game. The referee’s signal may be in the form of a counting or whistle. Step
      7: As soon as the referee signals, any two or three players from each team should rush towards the center line to retrieve the balls. Remember, you should pick your own per-selected balls. Step 8: After retrieving your balls from the center line,
      you either start throwing them to your opponents to hit them, or you can pass the balls to your teammates and let them throw the balls to your opponents. You should not hold the ball for more than 10 seconds. Step 9: When you attempt to hit your
      balls to your opponents, they also do the same to hit you. You can save yourself from being touched by your opponent’s balls by means of ducking, diving, jumping, catching the balls, or even blocking them with your balls. Step 10: Your team’s aim
      is only to eliminate all the members of the opposing team. Therefore, your team has to be careful and strategic simultaneously. Careful in the sense that you have to save yourself from being hit by your opponents’ balls, from going out of the court,
      crossing the center line after the first rush, or avoiding any other below-mentioned existing fouls. Step 11: As per rules, when a player from one team gets out, he can be revived in the game by sending an opponent player out of the court. In simple
      words, one exit results in the entry of one player; an out player comes in when his opponent gets eliminated. Step 12: When your team succeeds in eliminating all the opposing players, you win the match.
    </p>
    <p>
      You simply outnumber your opponents by not increasing your number but rather reducing your opponents’ quantity in a number of following ways:
      <ul style="list-style:disc">
        <li>Hitting your opponents by throwing balls at them.</li>
        <li>Catching your opponents’ balls that they throw at you.</li>
        <li>Making them go out of the bounds of the court.</li>
        <li>Tempting them to cross the center line.</li>
        <li>confusing them to pick dead balls.</li>
        <li>Saving yourselves from being touched by opponents’ balls.</li>

      </ul>
    </p>
    <p>
      <h3>ote: Important Points</h3>N
      <ul style="list-style:disc">
        <li>
          If a team is not able to eliminate the players of the opponent team in 10 minutes (duration of the match), the team with more remaining players on the court wins the match.
        </li>
        <li>In case both the teams have equal players on the court when the time completes, sudden death will be played to finalize the winner.</li>
        <li>This round starts in the same way as a regular match.</li>
        <li> After the start of the match, the first team to eliminate one opponent wins the match.</li>
      </ul>


    </p>
  </details>

  <details>
    <summary>6. Scoring System in Dodgeball</summary>
    <p>
      There is no concept of scoring points in Dodgeball. Conversely, this game depends on an elimination pattern. Therefore, to win a match, you don’t need to grab points and outscore your opponents, but you have to outnumber them by means of elimination.
      How would you do it?

    </p>
  </details>

  <details>
    <summary>
      7. Rules For Substitution And Revival
    </summary>
    <p>
      <h3>
        A) Substitutions Rules
      </h3>

      Each team has 2 to 4 substitutes waiting outside for their entry into the match. Each team can substitute players during a 1-minute time-out. Substitution is made when a player gets injured or falls sick.
    </p>
    <p>
      <h3>B) Revival of Players</h3>
      Players are revived in the same sequence as they are eliminated. When your team manages to eliminate one of your opponents, one out player of your team is revived. One elimination results in one revival. This elimination and revival have to be made in
      sequence. The player who is eliminated before all others get revived before others. Thus, the latest eliminated player comes in the end if revived. When a player is to enter the court after his revival, he must tap or touch the wall of the court
      before actually making an entry in the court.
    </p>
    <p>



    </p>
  </details>

  <details style="font-size:20px ;">
    <summary>
      8. Fouls And Penalty
    </summary>
    <div style="display:block">
      <p style="padding-right:30%; width:50%">
        <h3>A) Crossing Boundaries</h3>
        A player should remain inside the playing areas as long as the match continues. If you go out, it is a foul. You cannot go out of the playing area in any situation; not take the balls either. If you attempt to cross the boundaries, you are eliminated.
        Your body parts should not touch the outer areas of the court, be it a wall, surface, or any outsitting players. If your body part comes in contact with anything present out of the court, you will be sent out. A player should not cross the center
        line after the first rush. To cross the center line is a foul.


      </p>
      <p>
        <h3>
          B) Stalling
        </h3>

        A player from any team can hold three balls at once, usually when he remains alone on the court. However, he cannot stall those balls for more than 30 seconds. If he holds three balls for more than 30 seconds, he is at fault. As per rule, a player cannot
        take a ball in his position for more than 10 seconds. So, three balls will take 30 seconds, and the player has to throw them as soon as possible
      </p>
    </div>
  </details>
</div>

2

Answers


  1. You have used text-indent: 5em on summary tag which is shifting the content.

    If you want to add the indent to everything, you can just add padding-left on the container itself.

    Also, you might want to consider using rem, instead of em.

    Login or Signup to reply.
  2. I added below code to css and put the text below h3 tags in p tag.

    I think put h3 tag in p tag is wrong cause both of them have display block.

    p,h3,ul {
      margin-left: 11rem;
    }
    
    body {
      padding: 0;
      margin: 0;
      border: none;
    }
    
    .container {
      background-color: brown;
      max-width: 100%;
      height: 100%;
      background-color: antiquewhite;
      left: 0;
      right: 0;
    }
    
    summary {
      position: relative;
      font-size: 35px;
      font-weight: 500;
      text-align: left;
      text-decoration: none;
      /* Add 'none' for text-decoration */
      text-indent: 5em;
      /* Correct the property value */
      cursor: pointer;
      margin-bottom: 20px;
    }
    
    .content {
      display: block;
      border: solid:1ex;
      margin-right: 5ex
    }
    
    details.word {
      font-size: 15px
    }
    
    details.styled {
      padding: 1em;
      border: 1px solid;
    }
    
    header {
      text-align: center;
      display: block;
      background-color: burlywood;
      padding: 30px;
      margin: 50px;
      background-color: white;
      font-family: 'Times New Roman', Times, serif;
      font-display: block;
      position: relative;
    }
    
    .container_p {
      margin-top: 20px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 10px;
      position: relative;
    }
    
    p,
    h3,
    ul {
      margin-left: 11rem;
    }
    <header style="font-size:15ex">
    
      Rules and regulation
    
    </header>
    <div class="container">
    
      <details style="font-size:15px">
        <summary>
          1. Team Composition
        </summary>
        <div class="container_p">
          <p>
            In Dodgeball, two teams compete against each other. Each team has 6 to 10 players. However, only 6 players are permitted to participate in the match, and the remaining players have to sit outside as substitutes. The substitute can enter the court only
            if any of the teammates get injured or feels sick. As per the rules of the game, each team has to include 2 female players on their side. It means each team has four male players and 2 female players.
          </p>
        </div>
    
      </details>
      <br />
      <br />
      <details>
        <summary>
          2. Court Dimensions
        </summary>
        <p class="c">
          The court of dodgeball has varying sizes. There is no specific measurement to follow while setting up a dodgeball court. But, it’s obvious that all the court’s dodgeball is rectangular in shape.
          <br /> However, the recommended size of the court is 60 feet in length and 30 feet in width.
          <br /> The court has two side lines (60 ft each), two end lines (30 ft each), two attack lines ( each line drawn 10 ft away from the center line), and one center line that divides the court into two equal halves. o, each half of the court comes
          under the control of each team. [enter image description here](https://i.stack.imgur.com/R7Akr.png) The attacking lines and center lines are of vital importance. A team can stand in its attacking area and throw the balls to opponents.
          <br /> <br /> While the center line is used for placing all the six balls before the game starts. Each team has to put its three balls on different sides of the court.
          <br /> For example, if team A puts its balls on the right side of the court, team B has to put its ball on the left side of the court. In addition to placing the balls, this line is not crossable. However, a player can cross this line only at the
          time of picking the balls from the center line, but as soon as all the balls have been picked, no player can cross this line. The Dodgeball is also played on a basketball court, excluding the goal posts, or even on a volleyball court, excluding
          the net.
          <br /> Ezoic This court is surrounded by walls and has different circles on it. It has similar lines as mentioned above. These lines include sidelines, end lines, and center lines but not attacking lines. One thing that is not found on the above-mentioned
          court is a 5 ft neutral zone on each side of the center line. Players from both teams use these zones to throw and retrieve the balls.
    
        </p>
      </details>
    
      <details>
        <summary>
          3. Duration of the Game
        </summary>
        <p>
          A Dodgeball game lasts for 10 minutes. Each match consists of 9 games. Thus, the winner has to win 5 out of 9 games.
          <br /> To win the game, a team has to eliminate the players of its rival team in as much as 10 minutes.
          <br /> Each team avails itself of a time-out of one minute (60 seconds). Both the teams can substitute their players during a time-out.
        </p>
      </details>
    
    
    
      <details>
        <summary>
    
          4. Starting of Match
        </summary>
        <p>
          The game of Dodgeball starts with the referee’s count of three or his whistle. 6 players from each team stand on their respective sides of the court, near the end line, and wait for the referee’s signal. As soon as the referee finishes counting, the players
          from both teams rush to pick up their balls that are placed on the center line. The players have to pick their own balls. They cannot pick the balls of the opposing team. Ezoic After collecting the balls, players can either throw them to their opponents
          to eliminate them or pass them to their teammates.
        </p>
      </details>
      <details>
        <summary>5. How to Play Dodgeball? Step by step Guid</summary>
    
        <h3>Step 1:</h3>
        <p>
          Ezoic Select 2 teams of 6 players. Each team must have four male players and 2 female players.
        </p>
        <h3>Step 2:</h3>
        <p>
          S Find a playing surface. It should be rectangular with 60 ft in length and 30 ft in width. You can choose a basketball or volleyball court. Ezoic Step 3: Select 6 balls of two different colors. Each team has to choose 3 balls of the same color. If team
          A picks yellow colored balls, team B has to pick the balls with the other available color. Step 4: Place 6 balls of two different colors on the center line. Put three balls, of the same color, on one side of the court, and the other three balls,
          of another color, on the other side of the court. Step 5: Each team should take one side of the court. Team A should stand at one end of the court, just behind the end line, and team B has to stand on the other end of the court, behind the end line.
          It means both teams have to stand in the way that they should be facing each other. Step 6: Now, wait for the referee’s signal to officially start the game. The referee’s signal may be in the form of a counting or whistle. Step 7: As soon as the
          referee signals, any two or three players from each team should rush towards the center line to retrieve the balls. Remember, you should pick your own per-selected balls. Step 8: After retrieving your balls from the center line, you either start
          throwing them to your opponents to hit them, or you can pass the balls to your teammates and let them throw the balls to your opponents. You should not hold the ball for more than 10 seconds. Step 9: When you attempt to hit your balls to your opponents,
          they also do the same to hit you. You can save yourself from being touched by your opponent’s balls by means of ducking, diving, jumping, catching the balls, or even blocking them with your balls. Step 10: Your team’s aim is only to eliminate all
          the members of the opposing team. Therefore, your team has to be careful and strategic simultaneously. Careful in the sense that you have to save yourself from being hit by your opponents’ balls, from going out of the court, crossing the center
          line after the first rush, or avoiding any other below-mentioned existing fouls. Step 11: As per rules, when a player from one team gets out, he can be revived in the game by sending an opponent player out of the court. In simple words, one exit
          results in the entry of one player; an out player comes in when his opponent gets eliminated. Step 12: When your team succeeds in eliminating all the opposing players, you win the match.
        </p>
        <p>
          You simply outnumber your opponents by not increasing your number but rather reducing your opponents’ quantity in a number of following ways:
        </p>
    
        <ul style="list-style:disc">
          <li>Hitting your opponents by throwing balls at them.</li>
          <li>Catching your opponents’ balls that they throw at you.</li>
          <li>Making them go out of the bounds of the court.</li>
          <li>Tempting them to cross the center line.</li>
          <li>confusing them to pick dead balls.</li>
          <li>Saving yourselves from being touched by opponents’ balls.</li>
    
        </ul>
        <h3>ote: Important Points</h3>
    
        <ul style="list-style:disc">
          <li>
            If a team is not able to eliminate the players of the opponent team in 10 minutes (duration of the match), the team with more remaining players on the court wins the match.
          </li>
          <li>In case both the teams have equal players on the court when the time completes, sudden death will be played to finalize the winner.</li>
          <li>This round starts in the same way as a regular match.</li>
          <li> After the start of the match, the first team to eliminate one opponent wins the match.</li>
        </ul>
    
    
        </p>
      </details>
    
      <details>
        <summary>6. Scoring System in Dodgeball</summary>
        <p>
          There is no concept of scoring points in Dodgeball. Conversely, this game depends on an elimination pattern. Therefore, to win a match, you don’t need to grab points and outscore your opponents, but you have to outnumber them by means of elimination.
          How would you do it?
    
        </p>
      </details>
    
      <details>
        <summary>
          7. Rules For Substitution And Revival
        </summary>
        <h3>
          A) Substitutions Rules
        </h3>
        <p>
    
          Each team has 2 to 4 substitutes waiting outside for their entry into the match. Each team can substitute players during a 1-minute time-out. Substitution is made when a player gets injured or falls sick.
        </p>
        <h3>B) Revival of Players</h3>
        <p>
    
          Players are revived in the same sequence as they are eliminated. When your team manages to eliminate one of your opponents, one out player of your team is revived. One elimination results in one revival. This elimination and revival have to be made in
          sequence. The player who is eliminated before all others get revived before others. Thus, the latest eliminated player comes in the end if revived. When a player is to enter the court after his revival, he must tap or touch the wall of the court
          before actually making an entry in the court.
        </p>
        <p>
    
    
    
        </p>
      </details>
    
      <details style="font-size:20px ;">
        <summary>
          8. Fouls And Penalty
        </summary>
        <div style="display:block">
          <h3>A) Crossing Boundaries</h3>
          <p style="padding-right:30%; width:50%">
    
            A player should remain inside the playing areas as long as the match continues. If you go out, it is a foul. You cannot go out of the playing area in any situation; not take the balls either. If you attempt to cross the boundaries, you are eliminated.
            Your body parts should not touch the outer areas of the court, be it a wall, surface, or any outsitting players. If your body part comes in contact with anything present out of the court, you will be sent out. A player should not cross the center
            line after the first rush. To cross the center line is a foul.
    
    
          </p>
          <h3>
            B) Stalling
          </h3>
          <p>
    
            A player from any team can hold three balls at once, usually when he remains alone on the court. However, he cannot stall those balls for more than 30 seconds. If he holds three balls for more than 30 seconds, he is at fault. As per rule, a player cannot
            take a ball in his position for more than 10 seconds. So, three balls will take 30 seconds, and the player has to throw them as soon as possible
          </p>
        </div>
      </details>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search