HTML for Ordered List

TBC · 2020-02-21 04:58:03

I know <ul> that I use all the time is for bulleted lists.

And, in old HTML, I thought that <ol> produced numbered lists. Apparently no longer, so I stumbled upon <os> instead.

1. blah
2. blah, blah
3. blah, blah, blah
...
10. blah, blah .....

I have a numbered list, but I would like the numbered list to be indented, like my bulleted lists:

As one can see, the numbered list is flush left without any indent AND after the numbers, it shows a first-line indent rather than a hanging indent.

Now, on top of that, I would like to reverse the numbers as did the person who made the comments, so I would like to start with 10 and go back down to 1.

And as though that is not enough, I want the period after the 10 to line up with all the others.

HELP! Can anyone help? I have scoured the Internet for markup and failed miserably. I tried something in my css file, but that also is resulting in my quickly going bald from tearing my hair out!

Thanks, I hope.

Take care,

rod barbee · 2020-02-21 05:13:08

this works for me: https://www.w3schools.com/tags/att_ol_reversed.asp

see this test page: https://backlight-2-100.barbeephoto.com/r-ol/

code:

<h2>Reversed ordered list</h2>
<ol reversed>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
</ol>

no custom css needed

It doesn't reverse the order of the items, just the numbers in front of those items.

TBC · 2020-02-21 06:21:42

Thanks, Rod. Alas, I had found that syntax without the <h2></h2>and tried it to no avail...Then I tried yours...

and then I tried the <h2> without the reversed notation and at least got the proper indent, but still no numbers

What I'd really love is those numbers in place of the bullets. I get that with the <os> tag, but no indent and no reverse order. If I do that inside the <h2> tags, we revert to bullets.

HMMM ... more hair gone!

Next idea? Thanks for your suggestion thus far.

Take care,

Daniel Leu · 2020-02-21 06:35:12

Have a look at css to style your list: https://www.w3schools.com/css/css_list.asp

TBC · 2020-02-21 06:37:42

And, Rod, your example is exactly what I want. Perfect. I think I have a gremlin thwarting my efforts.

Maybe something missing from the css?

TBC · 2020-02-21 06:55:44

Thanks, Daniel, but alas, that did not work either. I had fiddled with that before. This time, I tried

ol {
list-style-type: decimal;
}

I didn't add any .a, .b, etc. to the ol since I that is the only ol I have.

You and Rod are fountains of help and information.

I hope that someone will let me know where I have erred and set me on a path to keeping my hair!

Take care, and thanks,

rod barbee · 2020-02-21 07:20:06

TBC wrote:

Thanks, Rod. Alas, I had found that syntax without the <h2></h2>and tried it to no avail...Then I tried yours...

the H2 tags were just for a page heading, they have nothing to do with the list.

don't put the list inside the heading tags.

rod barbee · 2020-02-21 07:20:53

Do you have a page we can look at. Maybe there's something in your custom css that's messing with it.

my sample is using Backlight css, nothing special on my part.

TBC · 2020-02-21 07:40:21

My css is at https://www.BCphotoadventures.com/backl … s/BCPA.css

and the recalcitrant page is at https://www.BCphotoadventures.com/quotes-bz/

If I could figure out how to attach the css file, it is MUCH easier to read!

Again, thanks ...

JimR · 2020-02-21 07:43:40

I've tackled this problem before. If I can see a page with the problem, I'll take a look.

TBC · 2020-02-21 07:54:01

Jim,

I love the support in this forum. These css items can be pesky. Please note that the only item that is new in the custom css is that ol entry. I noted the link in the entry above.

Thanks for any help you can give ferreting out my incompetence!

Last edited by TBC (2020-02-21 07:54:44)

rod barbee · 2020-02-21 07:55:05

Margo,

Look in your page template under Typography > Lists
It looks like Ordered List items may be set to circle

TBC · 2020-02-21 07:56:43

Rod, that's what I suspected, and the <h2> was removed.

Once again, thanks!

rod barbee · 2020-02-21 07:56:57

the reason your custom css isn't working is that you're just using ol

The template settings create a selector of ol li, which is more specific.

If you change the setting in the template, that should do the trick. You may need to clear template cache.

JimR · 2020-02-21 08:57:55

Yup - Rod got it.

You'll fine this in the backlight css

ol li {
list-style-type: circle;
}

and you want this

ol li {
list-style-type: decimal;
}

Then in your BCPA.css you have this

ol {
list-style-type: decimal;
}

but that's being overrode by the more specific element in the backlight css. You can see this because in the Chrome inspector your style element is crossed out.

But I don't think you need to do this in your BCPA.css

Check your settings Rod is referring to.

Last edited by JimR (2020-02-21 08:59:59)

TBC · 2020-02-22 01:08:34

rod barbee wrote:

Margo,
Look in your page template under Typography > Lists
It looks like Ordered List items may be set to circle

Brilliant, of course, and I modified the unordered lists while I was at it.

Many, many thanks!

Take care,

TBC · 2020-02-22 01:19:10

rod barbee wrote:

the reason your custom css isn't working is that you're just using ol
The template settings create a selector of ol li, which is more specific.
If you change the setting in the template, that should do the trick. You may need to clear template cache.

I had already removed the ol from the custom css. And with the easy modification to the template, all is well. I didn't even need to clear the cache!

Many thanks, as always,

TBC · 2020-02-22 01:21:12

JimR wrote:

Yup - Rod got it.
But I don't think you need to do this in your BCPA.css
Check your settings Rod is referring to.

Thank you, Jim. I really appreciate your input on this. I had already removed the ol references in css, and as you noted, Rod ferreted out the issue. All is well.

Thanks again,

Community @ The Turning Gate

#1 2020-02-21 04:58:03

HTML for Ordered List

#2 2020-02-21 05:13:08

Re: HTML for Ordered List

#3 2020-02-21 06:21:42

Re: HTML for Ordered List

#4 2020-02-21 06:35:12

Re: HTML for Ordered List

#5 2020-02-21 06:37:42

Re: HTML for Ordered List

#6 2020-02-21 06:55:44

Re: HTML for Ordered List

#7 2020-02-21 07:20:06

Re: HTML for Ordered List

#8 2020-02-21 07:20:53

Re: HTML for Ordered List

#9 2020-02-21 07:40:21

Re: HTML for Ordered List

#10 2020-02-21 07:43:40

Re: HTML for Ordered List

#11 2020-02-21 07:54:01

Re: HTML for Ordered List

#12 2020-02-21 07:55:05

Re: HTML for Ordered List

#13 2020-02-21 07:56:43

Re: HTML for Ordered List

#14 2020-02-21 07:56:57

Re: HTML for Ordered List

#15 2020-02-21 08:57:55

Re: HTML for Ordered List

#16 2020-02-22 01:08:34

Re: HTML for Ordered List

#17 2020-02-22 01:19:10

Re: HTML for Ordered List

#18 2020-02-22 01:21:12

Re: HTML for Ordered List

Board footer