I’m trying to create a concert set list that looks like this:
I: Song 1, Song 2, Song 3, Song 4, Song 5,
Song 6, Song 7
II: Song 10, Song 11, Song 12, ...
E: Song 20
Here is the code I’ve tried. It almost does what I want, except that I can’t find how to control the width of the gutter between each dt and dd. I want to reduce the gap. I’ve noted in the CSS the various things I’ve tried.
I’m a beginner at HTML/CSS so I’d also welcome suggestions if there’s a better approach to doing this. I want this to be responsive, and avoid older things (e.g. float) that I’ve read can be accomplished better using more modern features (e.g. grid and flex).
* {
box-sizing: border-box;
}
body {
background-color: black;
background-attachment: fixed;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
}
.headline-div {
margin-top: 1em;
margin-bottom: 1em;
font-weight: bold;
font-size: 110%;
color: red;
}
.setlist-dl {
display: grid;
column-gap: 0; /* Thought this would reduce the gap but no */
grid-template-columns: max-content auto;
}
.setlist-dt {
grid-column-start: 1;
color: yellow;
#margin-right: 0; /* Also tried this */
}
.setlist-dd {
grid-column-start: 2;
margin-bottom: 10px; /* put some vertical space between each set */
}
.setlist-songs-ul {
margin: 0;
padding: 0;
}
.setlist-song-li {
color: green;
display: inline; /* makes it horizontal */
}
/* Show outlines of divs and dl components for troubleshooting */
div, dt, dd, dl {
outline-style: dotted;
outline-color: green;
outline-width: 1px;
}
*/<html>
<body>
<!-- SHOW -->
<div class="headline-div">
<span id="1981">5/1/81 [Fri] Grateful Dead - Hampton Coliseum, Hampton, VA</span>
</div>
<div>
<dl class="setlist-dl">
<!-- SETLIST 1 -->
<dt class="setlist-dt">
I:
</dt>
<dd class="setlist-dd">
<ul class="setlist-songs-ul">
<li class="setlist-song-li">Alabama Getaway></li>
<li class="setlist-song-li">Promised Land,</li>
<li class="setlist-song-li">Friend Of The Devil></li>
<li class="setlist-song-li">Me & My Uncle></li>
<li class="setlist-song-li">Big River,</li>
<li class="setlist-song-li">Althea></li>
<li class="setlist-song-li">Little Red Rooster,</li>
<li class="setlist-song-li">Tennessee Jed></li>
<li class="setlist-song-li">Let It Grow></li>
<li class="setlist-song-li">Deal</li>
</ul>
</dd>
<!-- SETLIST 2 -->
<dt class="setlist-dt">
II:
</dt>
<dd class="setlist-dd">
<ul class="setlist-songs-ul">
<li class="setlist-song-li">Feel Like A Stranger></li>
<li class="setlist-song-li">Franklin's Tower></li>
<li class="setlist-song-li">Lost Sailor></li>
<li class="setlist-song-li">Saint Of Circumstance></li>
<li class="setlist-song-li">He's Gone></li>
<li class="setlist-song-li">The Other One></li>
<li class="setlist-song-li">Drums></li>
<li class="setlist-song-li">Space></li>
<li class="setlist-song-li">The Wheel></li>
<li class="setlist-song-li">Wharf Rat></li>
<li class="setlist-song-li">Sugar Magnolia</li>
</ul>
</dd>
<!-- SETLIST 3 -->
<dt class="setlist-dt">
E:
</dt>
<dd class="setlist-dd">
<ul class="setlist-songs-ul">
<li class="setlist-song-li">U.S. Blues</li>
</ul>
</dd>
</dl>
</div>
</body>
</html>