Hello everyone, I recently created a webpage displaying different lists of football players. My goal is to keep the lists stacked vertically without any floats that would make them appear side by side. The separate lists are essential for properly categorizing the various groups of football players. You can view the page at the following link:
<h2>Goalkeepers</h2>
<ul id="goalkeepers">
<li><a href="DE BACKER Glenn.JPG" rel="shadowbox[players]"><img src="DE BACKER Glenn.JPG" width="180px" alt="player"/></a><p>DE BACKER</p> <p>Glenn</p></li>
<li><a href="VERPAELST_Jeroen.JPG" rel="shadowbox[players]"><img src="VERPAELST_Jeroen.JPG" width="180px" alt="player"/></a><p>VERPAELST</p> <p>Jeroen</p></li>
</ul>
<h2>Defenders</h2>
<ul id="defenders">
<li><a href="9.JPG" rel="shadowbox[players]"><img src="9.JPG" width="180px" alt="player"/></a><p>VAN LONDERSEELE</p> <p>Bram</p></li>
<li><a href="DU MONGH Kim.JPG" rel="shadowbox[players]"><img src="DU MONGH Kim.JPG" width="180px" alt="player"/></a><p>DUMONGH</p> <p>Kim</p></li>
</ul>
I'm having trouble getting the layout right. Can someone point out what I'm doing wrong? Thanks!
CSS:
#goalkeepers {
list-style-type: none;
width: 1000px;
margin: 0px auto;
padding: 0px;
}
#goalkeepers li {
float: left;
width: 170px;
padding: 12px;
height: 200px;
text-align: center;
}
#defenders {
list-style-type: none;
width: 1000px;
margin: 0px auto;
padding: 0px;
}
#defenders li {
float: left;
width: 170px;
padding: 12px;
height: 200px;
text-align: center;
}