How to mark up this list

A

adwatson

Hello

Suppose I want a list like this:

http://www.lester1.eclipse.co.uk/list.gif

How should it be marked up? Do I use <br> tags or put paragraphs inside
the <li>'s?
Click to expand...

If there will be actual paragraphs within each bullet point, then I
think it makes sense to put them in P tags. You can always tweak the
spacing between paragraphs with CSS if needed.

- aric
 
M

Mullein row

that would be an <ol>. i don't think you would necessarily need <br />
tags. i think you would just have to style it.
 
A

Andy Dingley

Suppose I want a list like this:
http://www.lester1.eclipse.co.uk/list.gif

How should it be marked up?
Click to expand...

Can't tell from that example alone. Is this a "list of headings", with
some explanatory content for each? Or is it a list of sections, with
numbered headers? i.e. is the body or the header the most significant
content?

In the first case, it's a list.

<ol>
<li><h2>Foo</h2>
<p>Rhubarb rhubarb</p></li>

<li><h2>Bar</h2>
<p>Rhubarb rhubarb</p>
<p>Rhubarb rhubarb rhubarb</p></li>
</ol>


In the second case, just use this:
<h2>Foo</h2>
<p>Rhubarb rhubarb</p>

<h2>Bar</h2>
<p>Rhubarb rhubarb</p>
<p>Rhubarb rhubarb rhubarb</p>


You can apply numbering through CSS, which will be the default for
<ol> anyway. OTOH, control of CSS numbering isn't well supported, so
that if the numbers are signifcact (i.e. they'll be referenced from
elsewhere) then I'd prefer to hard-code them into the HTML. In that
case, look at the CSS text-indent property too.
Do I use <br> tags
Click to expand...

No.
 
J

Jukka K. Korpela

Scripsit Andy Dingley:
<ol>
<li><h2>Foo</h2>
<p>Rhubarb rhubarb</p></li>
Click to expand...

The main problem with this approach is that the numbers look rather
pathetic: by default, they appear in the basic font of the page, whereas
h2 is bold and bigger.

If you want the h2 to appear in normal font size but bold as by default
and the number to match this, you can use a little tricky CSS code that
sets the <ol> element (thereby the numbers as well) to bold but switches
this off for the paragraphs:

ol h2 { font-size: 100%; }
ol { font-weight: bold; }
ol p { font-weight: normal; }

Alternatively, you could make the numbers part of the headings and omit
the <ol> markup. It's not a sin to do so, especially in the absence of
reasonably-supported CSS tools for automatic numbering of paragraphs.
 
D

dorayme

<[email protected]
m>,
Andy Dingley said:
Can't tell from that example alone. Is this a "list of headings", with
some explanatory content for each? Or is it a list of sections, with
numbered headers? i.e. is the body or the header the most significant
content?

In the first case, it's a list.

<ol>
Click to expand...

True, one cannot tell from the post the real nature of the
material, but an ol is no great choice for a list because while
there is a main point, there seems no evidence that the rest of
the points have an ascending or descending status.
 
M

Mullein row

How about preformatted text?

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>preformated text</title>
<style type="text/css">
#container{}
</style>
</head>
<body>
<div id="container">
<pre>
<b>1. Eggs</b>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis
adipiscing.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis
adipiscing.

<b>2. Milk</b>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis
adipiscing.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis
adipiscing.


<b>3. Butter</b>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis
adipiscing.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis
adipiscing.
</pre>
</div>
</body>
</html>
 
D

dorayme

<[email protected]
m>,
Mullein row said:
How about preformatted text?
Click to expand...

How about top quoting and middle or bottom posting?

And, btw, I am sorry to say this, but I am the idiot around here,
not you. So please don't make silly suggestions, you will never
topple my ascendancy.
 
M

Mullein row

<[email protected]
m>,


How about top quoting and middle or bottom posting?

And, btw, I am sorry to say this, but I am the idiot around here,
not you. So please don't make silly suggestions, you will never
topple my ascendancy.
Click to expand...

if you're talking to me, why would I need to try to one up a self
proclaimed idiot?
 
D

dorayme

<[email protected]
m>,
Mullein row said:
if you're talking to me, why would I need to try to one up a self
proclaimed idiot?
Click to expand...

I guess for any number of reasons. For example, you might not
know the idiocy index of the being you are conversing with. In
general, intention is dependent on knowledge. You can intend to
be a certain thing in relation to some one else and be perfectly
reasonable in doing so without succeeding.

(But no... it was mean of me, I am sorry... don't be upset... I
will be frank with you: I was suitably wounded by your words and
quite deserved them)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Only one table shows up with the information 2
How do I make this craftinfsystem Work 1
I dont get this. Please help me!! 2
Working on mobile css menu with plenty of frustration! 2
How to move logo up 4
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated 1
I have to finish this code for my assignment but I cant figure out how to solve it 1
How does a HEAD pointer end up pointing to the first node in a linked list? 3

Members online

Total: 31 (members: 2, guests: 29)
Robots: 501

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top