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.
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.
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.
<< 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>
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>
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 -
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.
