I've been attempting to design a Football Field using HTML & CSS, but I've hit a roadblock. Despite spending hours debugging, I haven't been able to figure it out.
Here is the code snippet I'm working with:
#EndZone {
float: left;
width: 300px;
height: 500px;
background-color: red;
}
.TopHash div {
margin-left: 300px;
width: 30px;
height: 30px;
border-right: 1px solid white;
}
#MiddleTopHash div {
margin-top: 170px;
width: 30px;
height: 30px;
border-right: 1px solid white;
float: left;
}
.MiddleBottomHash div {
margin-top: 270px;
width: 30px;
height: 30px;
border-right: 1px solid white;
float: left;
}
.BottomHash div {
margin-top: 470px;
width: 30px;
height: 30px;
border-right: 1px solid white;
float: left;
}<div class="FootballField">
<div id="EndZone"></div>
<div class="TopHash">
<div id="OneYardLineTopHash"></div>
<div id="TwoYardLineTopHash"></div>
<div id="ThreeYardLineTopHash"></div>
<div id="FourYardLineTopHash"></div>
</div>
<div id="FiveYardLine"></div>
<div class="TopHash">
<div id="SixYardLine"></div>
<div id="SevenYardLine"></div>
<div id="EightYardLine"></div>
<div id="NineYardLine"></div>
<div id="TenYardLine"></div>
</div>
<div class="MiddleTopHash">
<div id="OneYardLineMiddleTopHash"></div>
<div id="TwoYardLineMiddleTopHash"></div>
</div>
<div class="MiddleBottomHash">
<div id="OneYardLineMiddleBottomHash"></div>
<div id="TwoYardLineMiddleBottomHash"></div>
</div>
<div class="BottomHash">
<div id="OneYardLineBottomHash"></div>
<div id="TwoYardLineBottomHash"></div>
</div>
</div>Edit: How can I ensure that each hash appears 30px to the right of the other, according to this CSS rule?
.TopHash div {
left: 300px;
width: 30px;
height: 30px;
border-right: 1px solid white;
}
Edit 2: This is the desired outcome:
The only adjustment needed is to have the yard hashes spaced 30px apart from each other.