f



Create custom ordered list

I've been converting an ugly-as-fluck nested table into a series of Definition 
Lists (series to get additional space between them - is there another way?) and 
where the table contained "in-line" notes, I've now moved the notes to a series 
of paragraphs after the last </dl> @ 
http://prino.neocities.org/miscellaneous/keeping-statistics.html#notes

However, I would really like to replace them with a customized <ol>, but to do 
so I need very non-standard numbers, in a format different from the text of the 
list itself. Is there any way to do this?

Thanks,

Robert

PS: Further CSS'ification will follow, right now I'm only looking at this issue!
-- 
Robert AH Prins
robert(a)prino(d)org
No programming (yet) @ http://prino.neocities.org/
0
Robert
11/2/2016 5:02:12 PM
comp.authoring.stylesheets 8158 articles. 0 followers. mdmoura (161) is leader. Post Follow

3 Replies
130 Views

Similar Articles

[PageSpeed] 24

2.11.2016, 19:02, Robert Prins wrote:

> I've been converting an ugly-as-fluck nested table into a series of
> Definition Lists

I don’t see why you used a table in the first place. It’s probably not 
relevant, so maybe you shouldn’t have even mentioned it.

> (series to get additional space between them - is there
> another way?)

Of course there is. Setting vertical margins is very elementary CSS, 
though you need to note that many elements, such as <dl>, have default 
vertical margins and that vertical margins collapse. But I don’t see why 
you are using <dl>. Probably just to get particular layout. Actually 
tabular layout could make the presentation more readable, and might be 
seen as more logical or more structural. (I don’t see why you used 
*nested* tables, though.)

> and where the table contained "in-line" notes, I've now
> moved the notes to a series of paragraphs after the last </dl> @
> http://prino.neocities.org/miscellaneous/keeping-statistics.html#notes

The markup is rather simple compared with the rest of the page:

<p><span class="stat-tt">&nbsp;[1]</span> text content...

> However, I would really like to replace them with a customized <ol>, but
> to do so I need very non-standard numbers, in a format different from
> the text of the list itself. Is there any way to do this?

I thought you meant unusual numbering, but it seems to be normal 1, 2, 
3... So it’s about the presentation of item numbers, really. Instead of 
the default “1.”, you want “ [1]” in italic (contrary to the typographic 
principle that brackets should not be italicized). Assuming you have a 
good reason to that rendering, what is the problem now? What would be 
gained by changing the markup for all the items and then trying to get 
the same rendering as you have now?

Well, it *is* possible, with the usual CSS Caveats. You need CSS code 
that removes the default numbering from a numbered list (<ol>) element; 
that’s simple: list-style-type: none. Then you need to set the margins 
of <ol> and <li> elements (partly because the defaults have been 
designed for a rendering that has the default numbering) and to generate 
and format the numbers yourself, using “counters” and “generated content”.

> PS: Further CSS'ification will follow

Why? What you have described is not CSS’ification but revamping HTML 
code and then wondering how to change CSS code accordingly. This does 
not sound productive, and I don’t just mean the possibility that you are 
making the HTML code more obscure rather than better. What do you expect 
to achieve?

Yucca
0
Jukka
11/2/2016 8:55:38 PM
On Wed, 2 Nov 2016 17:02:12 +0000, Robert Prins wrote:
> I've been converting an ugly-as-fluck nested table into a series of
> Definition Lists (series to get additional space between them - is
> there another way?)

Surely there is. I can't imagine what sort of layout you might have 
that would fit equally well into the table or definition-list 
paradigm, but in you want space between them then give the elements 
(or their common parent) a class, and then ion your style sheet 
specify top or bottom margin or both.

I'm assuming you actually want lists, just for the sake of something 
to show, but you can do something analogous with other structures.

Stylesheet:

ul.foo li { margin-top:0.5em; margin-bottom:0.5em; }

HTML:

<ul class="foo">
<li>Lorem</li>
<li>Ipsum</li>
</ul>

-- 
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
                                       http://BrownMath.com/
                                  http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator:      http://validator.w3.org/
CSS 2.1 spec:   http://www.w3.org/TR/CSS21/
validator:      http://jigsaw.w3.org/css-validator/
Why We Won't Help You: http://preview.tinyurl.com/WhyWont
0
Stan
11/3/2016 2:14:19 AM
In article <nvd65d$ipu$1@dont-email.me>, robert@prino.org says...
> 
> I've been converting an ugly-as-fluck nested table into a series of Definition 
> Lists (series to get additional space between them - is there another way?) and 
> where the table contained "in-line" notes, I've now moved the notes to a series 
> of paragraphs after the last </dl> @ 
> http://prino.neocities.org/miscellaneous/keeping-statistics.html#notes
> 
> However, I would really like to replace them with a customized <ol>, but to do 
> so I need very non-standard numbers, in a format different from the text of the 
> list itself. Is there any way to do this?
> 
> Thanks,
> 
> Robert
> 
> PS: Further CSS'ification will follow, right now I'm only looking at this issue!

For your numbering problem - is this what you're looking for?

http://www.webdesignerdepot.com/2013/05/learn-to-count-with-css/

-- 

Phil, London
0
Philip
11/3/2016 12:37:47 PM
Reply: