THIS WEEK'S JOB // Swap bullets, tuck numbers, and turn a plain list into a menu that matches your shop. (Book pages 201-206 in Mrs. Gaiser's book.)
THE THREE IDEAS
list-style-type
Discs, circles, squares, decimals, roman numerals, or none. The bullet is a style choice now, not a fact of nature.
list-style-position and padding
Bullets can hang outside or tuck inside the text block, and padding controls the indent. Lists finally line up with everything else.
none is a superpower
list-style-type: none strips the bullets entirely, which is exactly how nav bars are made from lists. This week explains week 19.
TRY IT IN THE PAINT BOOTH
<style>
ul.menu { list-style-type: none; padding: 0; }
ul.menu li { background: #171236; color:#eae6ff; margin: 4px 0; padding: 8px; }
</style>
<ul class="menu">
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
</ul>OPEN THE PAINT BOOTH, PRELOADED »
ON YOUR LOT
Restyle one list on your site to match your palette, and turn your nav list into a real menu block if you are feeling brave.