13 replies [Last post]
MyJC
MyJC's picture
Offline
newbie
Burbank, CA
Last seen: 9 years 37 weeks ago
Burbank, CA
Timezone: GMT-8
Joined: 2010-12-31
Posts: 3
Points: 4

Final result will be something like this:

1. This is a really great point

The reason my point one is so great is because Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nunc quis tellus id purus consectetur vehicula.
Donec sodales enim ut enim molestie at faucibus quam porta.

2. This is another really great point

The reason my point two is so great is because Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nunc quis tellus id purus consectetur vehicula.
Donec sodales enim ut enim molestie at faucibus quam porta.

Now, I did this by doing this... in html

<ol class="paralist"><l1><h4>This is a really great point</h1>
<p>The reason my point one is so great is because Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Nunc quis tellus id purus consectetur vehicula. 
Donec sodales enim ut enim molestie at faucibus quam porta. </p></li>
<li><h4>This is another really great point</h4>
<p>The reason my point two is so great is because Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Nunc quis tellus id purus consectetur vehicula. 
Donec sodales enim ut enim molestie at faucibus quam porta.</p></li></ol>

and my css looks like this

ol.paralist,ol.paralist li ol {
	margin: 26px;
	padding: 2px;
}
 
ol.paralist li {
	list-style: decimal;
	line-height: 16px;
	padding: 2px;
	font-size: 1em;
	font-weight: bold;
}
 
ol.paralist li h4{
	list-style: decimal;
	line-height: 16px;
	padding: 2px;
	font-size: 1em;
	font-weight: bold;
}
 
ol.paralist li p{
	list-style: decimal;
	line-height: 16px;
	padding: 2px;
	font-size: 1em;
	font-weight: normal;
}
ol.paralist li li {
	padding: 2px;
	font-weight: normal;
	font-size: 1em;
}

I got to that by butchering someone else's css so I'm not entirely sure what all of that means and or if it's necessary. What I do know is that it pretty much works, but won't validate. In my research, I've discovered that the reason it doesn't validate is that I'm not supposed to put h4 tags inside the li tags. Ok, fine, but then how do I do this correctly?

All help appreciated.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 14 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

MyJC wrote:... In my

MyJC wrote:

... In my research, I've discovered that the reason it doesn't validate is that I'm not supposed to put h4 tags inside the li tags. ...

Your research stinks. It probably has to do with making up your own tags and not closing the tags properly. That is if this is an actual snippet. Do you see a problem with this bit?

MyJC wrote:

...  <l1><h4>This is a really great point</h1> ...

MyJC
MyJC's picture
Offline
newbie
Burbank, CA
Last seen: 9 years 37 weeks ago
Burbank, CA
Timezone: GMT-8
Joined: 2010-12-31
Posts: 3
Points: 4

ah - thank you

Thanks for pointing out that error.

So, are you saying by
Your research stinks

that there is no problem with putting h4 tags inside of li tags and that this should be fine?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 14 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

MyJC wrote: ... that there is

MyJC wrote:

... that there is no problem with putting h4 tags inside of li tags and that this should be fine?

Well, let's start with this question: do you receive a validation error when you do it?

semaphore
semaphore's picture
Offline
newbie
Last seen: 9 years 37 weeks ago
Timezone: GMT-5
Joined: 2010-12-31
Posts: 7
Points: 11

You don't need to use a list

You don't need to use a list for what you are trying to achieve. Lists are for multiple items.

Simply use this:

<h4>1. My Heading</h4>
<p>My content</p>

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 14 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

semaphore wrote: You don't

semaphore wrote:

You don't need to use a list for what you are trying to achieve. Lists are for multiple items. ...

There are multiple items in the example. Pay attention.

semaphore
semaphore's picture
Offline
newbie
Last seen: 9 years 37 weeks ago
Timezone: GMT-5
Joined: 2010-12-31
Posts: 7
Points: 11

So if i have a multiple

So if i have a multiple heading tags and paragraphs on one page than I should automatically put them in list format because they are multiple items?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

MyJC wrote: Thanks for

MyJC wrote:

Thanks for pointing out that error.

So, are you saying by
Your research stinks

that there is no problem with putting h4 tags inside of li tags and that this should be fine?

There is no problem putting headers into a list. A List Item is a block level element and can thus hold other blocks. The problem is that in your example you have made up, ficitious, non-existent, HTML that of course will not validate, because it's not real. Try to use legitimate markup, that is in the W3C specs, and you will notice a vast difference in the output.

semaphore wrote:

So if i have a multiple heading tags and paragraphs on one page than I should automatically put them in list format because they are multiple items?

If it's a list of headers and paragraphs, then yes. Yes you should.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

semaphore
semaphore's picture
Offline
newbie
Last seen: 9 years 37 weeks ago
Timezone: GMT-5
Joined: 2010-12-31
Posts: 7
Points: 11

Deuce wrote: If it's a list

Deuce wrote:

If it's a list of headers and paragraphs, then yes. Yes you should.

So if you had a client that wanted you to migrate content from a word document that looked exactly like the example above, you would put it in a list format and waste time styling the list to have it appear like the example???? That's ridiculous.

So then you would be saying that these examples should be using a list format?
http://webdesignledger.com/tips/web-design-trends-in-2011
http://www.smashingmagazine.com/2010/11/24/multivariate-testing-in-action-five-simple-steps-to-increase-conversion-rates/

TymArtist
TymArtist's picture
Offline
Regular
Chicago
Last seen: 8 years 39 weeks ago
Chicago
Timezone: GMT-6
Joined: 2005-11-23
Posts: 31
Points: 8

Definition List?

MyJC,

Good question! Sometimes modifying someone else's code can be a rough gig.

After a bit of thought, why not try something like this?

<ol>
<li><dl><dt>Great point 1</dt><dd>Lorem ipsum</dd></dl></li>
<li><dl><dt>Great point 2</dt><dd>Lorem ipsum</dd></dl></li>
</ol>

It's an ordered list so you still get your numbers, then each item has a title and definition. Seems clean enough to me and fairly easy to style. I'll let the rest of you argue on the semantics Smile.

Tim

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 14 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

TymArtist wrote:MyJC,Good

TymArtist wrote:

MyJC,

Good question! Sometimes modifying someone else's code can be a rough gig.

After a bit of thought, why not try something like this?

<ol>
<li><dl><dt>Great point 1</dt><dd>Lorem ipsum</dd></dl></li>
<li><dl><dt>Great point 2</dt><dd>Lorem ipsum</dd></dl></li>
</ol>

It's an ordered list so you still get your numbers, then each item has a title and definition. Seems clean enough to me and fairly easy to style. I'll let the rest of you argue on the semantics Smile.

I don't know. If you're using OL just for the numbers is sort of smacks of presentational markup to me. Then there are many lists of one item each inside of the list items. I may be nit picking though. If you decide it belongs in a definition list why not do it like this and avoid the OL:

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Page</title>
    <style type="text/css">
    	dl { margin: 4em; width: 70%; }
	dt { display: list-item; list-style-type:decimal; font-weight: bold;}
	dd { margin: 0; }
 
    </style>
</head>
<body>
	<dl>
		<dt>Great point 1</dt>
		<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla, est et faucibus pellentesque, sem risus malesuada tellus, ut aliquet felis sem non sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Morbi sollicitudin volutpat lacinia.</dd>
		<dt>Great point 2</dt> 
		<dd>Ut hendrerit, massa id convallis facilisis, ante sem eleifend nunc, quis auctor augue sapien et quam. Nulla molestie bibendum elit sit amet tincidunt. Suspendisse mollis, velit id tempus pellentesque, massa nisi tincidunt velit, eu lacinia dui ipsum a nisi. Nam ut lorem a arcu condimentum consequat vel porta lorem.</dd>
	</dl>
</body>
</html>

TymArtist
TymArtist's picture
Offline
Regular
Chicago
Last seen: 8 years 39 weeks ago
Chicago
Timezone: GMT-6
Joined: 2005-11-23
Posts: 31
Points: 8

Good point

Nice. Good point. I don't often interchange types of lists, but that would definitely be the way to go!

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 9 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

semaphore wrote: Deuce

semaphore wrote:

So if you had a client that wanted you to migrate content from a word document that looked exactly like the example above, you would put it in a list format and waste time styling the list to have it appear like the example???? That's ridiculous.

So then you would be saying that these examples should be using a list format?
http://webdesignledger.com/tips/web-design-trends-in-2011
http://www.smashingmagazine.com/2010/11/24/multivariate-testing-in-action-five-simple-steps-to-increase-conversion-rates/

Semantically, they appear to ordered lists.
As for wasting time to style them... the links you posted would honestly take a minute or two to style out. Mainly because I'm not the fastest typer in the world...

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 14 weeks 1 day ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

Deuce wrote: Semantically,

Deuce wrote:

Semantically, they appear to ordered lists. ...

Absolutely. Semantic markup means that if you have a list of things you put them in a list. It's not ridiculous at all, it's correct. It's not even arguable.