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
You have used
text-indent: 5em
onsummary
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.
I added below code to css and put the text below
h3
tags inp
tag.I think put
h3
tag inp
tag is wrong cause both of them have display block.