Coding for List Appearance

Here is my html code for an ordered list -

  <h3>Our Locations</h3>
        <ol>
            <li>USA</li>
            <li id="ny">New York</li>
            <li id="ny">Columbus</li>
            <li id="ny">Austin</li>
            <li id="ny">Philly</li>
            <li>World</li>
            <li id="ot">Ottawa</li>
            <li id="ot">Sydney</li>
        </ol>

This is what the web page looks like with the code (top)

At this point, I don’t care about the links, what I need is

  • to get rid of the numbers in the list
  • place a solid dot in front of USA and World
  • place the small unfilled circles in front of the city names

In other words I want my list to look just like the lower list. I have a basic idea of the difference between an “ol” and a “ul” but I don’t have enough knowledge to effect the changes that I want.

Hey there @ttibsen,

You’re in luck, because in HTML, list can be styled just how you want it. To remove the numbers, you just have to use the list-style-type attribute for the lists. Here’s an example:

.element-class {
/* This will remove the numbers on the list */
    list-style-type: none;
}

You said you want to put a dot in front of USA and World, this would typically use a different type of list, ul (unordered list) which will change all the numbers into dots.

This can also be achieved using the list-style-type attribute. Here’s more to that attribute, check it out:

You can style the list, but if you use an unordered list <ul> instead of an ordered list <ol>, you won’t have numbers. And you can nest the lists inside each other to achieve multi-levels.

This page may help.

Desired solution can be achieved by just html and css, all you need is <ul> and list-style-type. Try and play with it. I will be here to help incase you need me.

Do you want a nested list?

Edit: I messed up the syntax, here is the correct way and I removed the ids just for the sake of it being valid.

  <h3>Our Locations</h3>
  <ul>
    <li>USA
      <ul>
        <li>New York</li>
        <li>Columbus</li>
        <li>Austin</li>
        <li>Philly</li>
      </ul>
    </li>
    <li>World
      <ul>
        <li>Ottawa</li>
        <li>Sydney</li>
      </ul>
    </li>
  </ul>
1 Like

it’s not an answer to your question, but remember that you can’t give the same id to more than one element

<< remember that you can’t give the same id to more than one element >>

Really? I didn’t know that so thanks for pointing that out. But do take a look at the code and even though I have applied - id=ny - to 4 lines and

  • id=ot - to 2 lines, you will see that the - padding-left: 40px - in the styles section, seems to have worked - do you not agree?
    #ny {
            padding-left: 40px
        }
        #ot  {
            padding-left: 40px
        }
    </style>
</head>
<body>
<header>
        <h1><a href="girl develop it.html">Girl Develop It</a></h1>
        <h4>dont be shy. develop it!</h4>
        <h2>About</h2>
    </p>
    It can be intimidating for women to learn and <br>
    ask questions when they are in an extreme <br>
    minority. While open and welcoming, today's <br>
    budding developer community is up to 91% male.
    </p>
        <h3>Our Locations</h3>
        <ol>
            <li>USA</li>
            <li id="ny">New York</li>
            <li id="ny">Columbus</li>
            <li id="ny">Austin</li>
            <li id="ny">Philly</li>
            <li>World</li>
            <li id="ot">Ottawa</li>
            <li id="ot">Sydney</li>
        </ol>

browsers are really good of making something work anyway

still, don’t do that. Use a class for that

That is why they are called ids. An id implies some sort of uniqueness, otherwise, it isn’t really an id.

Great! Class it is for tagging multiple items from now on! Thanks for pointing out the subtleties

BTW, you did want a nested list, right?

I played around with the various - list-style-types - 4 of them to be exact and hallelujah - one of them did give me the open circle that I wanted but the other 3 just gave me the solid circle - I don’t understand why I did not get a unique display for each line. Here is the code - this little experiment in list-style-types was only applied to the very last item in the list - Dawson City - which was outside of the ul.

   ol  {
            list-style-type: none;
        }
        #ny {
            padding-left: 40px;
            list-style-type: none;
        }
        #ot  {
            padding-left: 40px;
            list-style-type: none;
        }
        #dc {
            list-style-type: "\1F44D"; // thumbs up sign
        }
    </style>
</head>
<body>
<header>
        <h1><a href="girl develop it.html">Girl Develop It</a></h1>
        <h4>dont be shy. develop it!</h4>
        <h2>About</h2>
    </p>
    It can be intimidating for women to learn and <br>
    ask questions when they are in an extreme <br>
    minority. While open and welcoming, today's <br>
    budding developer community is up to 91% male.
    </p>
        <h3>Our Locations</h3>
        <ul>
            <li>USA</li>
            <li id="ny">New York</li>
            <li id="ny">Columbus</li>
            <li id="ny">Austin</li>
            <li id="ny">Philly</li>
            <li>World</li>
            <li id="ot">Ottawa</li>
            <li id="ot">Sydney</li>
            <li id="wh">Whitehorse</li>
        </ul>
        <li id="dc">Dawson City</li>
1 Like

Greetings Lasjorg! - What kind of dark magic is this? The code that you have written gives me the perfect result that I am looking for -
Screen Shot 2020-12-08 at 7.24.21 PM
I thought that I would have to write one long list (8 to be precise) of li elements which would then need a Class selector(s) to apply the correct type of circle (solid vs open) and padding (on the Right side) in Styles to get the look I wanted. But in a stroke of magic, everything is as it should be without the need for any CSS. So what is the magic here? I am guessing that having USA and World as the primary containers, they are at the extreme Left and the 2 nested ul’s within those 2 containers are then somehow tabbed 1 tab to the Right. If we had another ul nested inside one of those 2, it would be tabbed further to the Right still. Is that a correct interpretation of what’s happening? Similarly, the primary containers, USA and World get a solid circle but any nested ul lists automatically get an open circle. Let me know if my hypotheses are correct. I could test this out myself but it’s late at night and at this point it is just easier to ask.:pensive:

It’s a built-in feature. The hierarchy of the lists (and the type) determine the list-style-type styling that should be applied by the browser.