Help with FAQs

well thats the point its not about getting it to LOOK like what you want … that’s what CSS is for. it looks right but reads wrong… which is far worse. And you went ahead and put in your #s yourself. I mean, if you dont mind diong that ( or having your CMS doing it for you). you can use the DL I suggested in my previous post ( which I think was also ralph’s suggestion) but just do this:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
<style type="text/css" media="all">
h1, h2, dl, dd {font-family:Arial, Helvetica, sans-serif; margin:0; padding:0 }
h1{ text-align: center; text-transform:uppercase;}
h2{margin: 1em 0 -.5em 0 ; background: }
dl {margin: 0 ; padding: 0 0 0 125px ; counter-reset:question;   }
dt {margin: 0  ; padding: 1em 0 0 0    ;font-weight: bold; counter-increment:question}
dt .bullet {text-transform:uppercase; float:left; margin-left:-125px; width:100px; text-align:right;  font-weight:bold;}
dt .bullet span:after {content: " #" counter(question, decimal)  ; }
dd p {margin: 0 0 1em 0 ;}
</style>
	
</head>

<body>
<h1>Common Myths </h1>
<h2>Somethings you should know... </h2>
<dl>
  <dt><span class="bullet">Myth #1:</span> The myth of whatever</dt>
  <dd>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</dd>
  <dt><span class="bullet">Myth #2:</span> The myth of whatever</dt>
  <dd>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</dd>
  <dt><span class="bullet">Myth #3:</span> The myth of whatever</dt>
  <dd>
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

  </dd>
</dl>
</body>
</html>

this should actually be working for you by now :wink:

BTW… Dont skip headings ( you jumped from h1 to h3 w/o any h2s)

You didn’t like my attempt? :frowning:

And you went ahead and put in your #s yourself.

But remember how I said I didn’t want CSS deciding the numbers for me?

What is wrong with that? (I typed them in for this example, but my database would determine the “MythID” at runtime.)

you can use the DL I suggested in my previous post ( which I think was also ralph’s suggestion) but just do this:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
<style type="text/css" media="all">

What does media=all do??

h1, h2, dl, dd {font-family:Arial, Helvetica, sans-serif; margin:0; padding:0 }
h1{ text-align: center; text-transform:uppercase;}
h2{margin: 1em 0 -.5em 0 ; background: }
dl {margin: 0 ; padding: 0 0 0 125px ; counter-reset:question; }
dt {margin: 0 ; padding: 1em 0 0 0 ;font-weight: bold; counter-increment:question}

I thought you were leaving out the Attributes that weren’t supported by all browsers?

dt .bullet {text-transform:uppercase; float:left; margin-left:-125px; width:100px; text-align:right; font-weight:bold;}

Don’t you technically want to make it


dt {width: 100px; }

dt .bullet span:after {content: " #" counter(question, decimal) ; }
dd p {margin: 0 0 1em 0 ;}
</style>

Again, I thought you were leaving out the fancy Attributes?

Also, why is there an extra ‘#’ in there?

</head>

<body>
<h1>Common Myths </h1>
<h2>Somethings you should know… </h2>
<dl>
<dt><span class=“bullet”>Myth #1:</span> The myth of whatever</dt>
<dd>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</dd>
<dt><span class=“bullet”>Myth #2:</span> The myth of whatever</dt>
<dd>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</dd>
<dt><span class=“bullet”>Myth #3:</span> The myth of whatever</dt>
<dd>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

</dd>
</dl>
</body>
</html>


this should actually be working for you by now ;) 


Was your choice of the class "bullet" arbitrary, or does that have meaning?

My code was working before, but you apparently didn't like it!  :p



> BTW.. Dont skip headings  ( you jumped  from h1 to h3 w/o any h2s)


I didn't like the size of &lt;h2&gt; so I skipped it!

(Guess you would tell me to just stylize it down in size a notch, huh?)

So, the way you did it is better than my attempt because your (and Ralph's) was is more "semantic", correct??


BTW, from a semantic standpoint, it isn't a problem to have the "MYTH #__:" embedded inside the &lt;dt&gt; tag??



TomTees

it was a good go at it…lol. but there are more accurate methods.

OK, there IS a difference between CSS and HTML. I thought you wanted it to be automatic, so I thought you meant the HTML doing the numbering… which is why I had originally suggested an OL.

Dont worry about media all. force of Habbit. Media all means that style tag will apply to all media ( aural, printing, cell, etc )

MY bad about counter-reset, counter-increment the bullet class , etc they aren’t doing anything anyway… but you can take them out.

The hopefully clean CSS is


<style>
h1, h2, dl, dd {font-family:Arial, Helvetica, sans-serif; margin:0; padding:0 }
h1{ text-align: center; text-transform:uppercase;}
h2{margin: 1em 0 -.5em 0 ; background: }
dl {margin: 0 ; padding: 0 0 0 125px   }
dt {margin: 0  ; padding: 1em 0 0 0    ;}
dt .bullet {text-transform:uppercase; float:left; margin-left:-125px; width:100px; text-align:right;  font-weight:bold;}
dd p {margin: 0 0 1em 0 ;}
</style>

this is what happens when I code and pack at the same time. lol

just to answer your question I named the class bullet because it makes sense. but whatever you name a class or ID in CSS doesn’t matter semantically. I chose “bullet” because that’s what it is… a bullet in a list… the same way as someone would put a “*” or a number… your bullet was “Myth #”

I didn’t like the size of <h2> so I skipped it!

I hope shadow doesn’t read that first… LOL!!!

Thats what CSS is for… to change the look of your html. That means: change the size, color, font, spacing, position, etc of any tag. so if you don’t like the look of an H1 or h2… or whatever you use css like this H2{ font-size: 80%; font-family: Arial, san-serif; font weight:normal; padding .5em 0 ; } etc…

you cant change the tags… which is what all of us have been trying to say, because each tag actually has a MEANING. :slight_smile:

Am the rare art director. when I start a page, I like to do it as a text file ( not a word , or anything in which I can make it pretty… but a text file in which I cant even use bold or caps.

once I have my content written out that way… it becomes “easier” to see whats a list, whats a paragraph, whats a blockquote… what should be a headline, etc.

Once I wrap the proper tags around the content I have a “boring” but semantically correct all text HTML outline of the page. This is what you should aim for.

Afterward, I add any semantic touches EMs and STRONGSs for things that need to emphasized. After that any last minute spans for part of the content that will need styling later or that want to separate from the rest of the content…

ONCE you have THAT right… then you can use pure css, for your layout, typography, etc. At times I find I would need an extra tags to move a block of elements or to add an extra bg graphic, or hover effect… etc. that’s when I start wrapping divs AS NEEDED.

Nothing is a problem from a semantic stand point as long as you MEAN it ( as opposed to doing it because it looks good).

You were right in thinking , for example, that an FAQ is a list… because it is a list of questions and answers. The discussion has been is it a UL, OL or DL. and as you can see there are arguments favouring all of those.

I would argue, that “Myth #__” is a bullet and has no meaning, but since it’s so important that it be visible even in IE6 some might argue that its part of your content and that meaning is lost if it’s missing. if , as such it has meaning… then it makes sense that it is part of the definition term ( that’s what DL stands for)

in your attempt using divs… it was just text with no parts ( except the h1 and h3) having any semantic meaning. there is literally NO semantic differentiation between when you say “myth #” “Fresh vegetables…” and “Studies show…”. and that’s what makes it wrong.

remember when I said type your content in wordpad… no establishments … no even bolds… only line breaks? If you look at that bland text semantically it will seem like this to you:

Headline: which describes EVERYTHING on the page… that’s your H1 ( you can only have one, because how can it describe everything on the page if there is another H1 below it ( does the second h1 describe everything on the page BUT the first h1??? see? )

H2-h6 are like sections and sub sections of the page… a navigation, a main article a sub main article … and so forth. So in your case "Somethings you should know… " is a heading that goes into more details about your H1 which again is “common myths”

Lists ( do I really Need to go onto what is a list? lol! ) But it interesting to note that that’s why navigation are often LISTS… since a navigation is essentially a list of links.

We are opting for a DL because of the weight this tag carries semantically.
Each DT implies the term within it. Each DD implies it is a SEPARATE and standalone definition pertaining to the last DT above it in the code ( this is what you can’t use DD to make paragraph breaks… because if you do you would be essentially implying there are TWO different definitions to the same term as opposed to expounding on it.)

Hope that gives you more of an insight into semantics and HTML

Okay.

OK, there IS a difference between CSS and HTML. I thought you wanted it to be automatic, so I thought you meant the HTML doing the numbering… which is why I had originally suggested an OL.

Originally I did until realized there might be issues with other browsers and I re-thought the purpose of “Myth #___

Dont worry about media all. force of Habbit. Media all means that style tag will apply to all media ( aural, printing, cell, etc )

Okay.

MY bad about counter-reset, counter-increment the bullet class , etc they aren’t doing anything anyway… but you can take them out.

Okay.

this is what happens when I code and pack at the same time. lol

Leaving town because of me?! :slight_smile:

I hope shadow doesn’t read that first… LOL!!!

Thats what CSS is for… to change the look of your html. That means: change the size, color, font, spacing, position, etc of any tag. so if you don’t like the look of an H1 or h2… or whatever you use css like this H2{ font-size: 80%; font-family: Arial, san-serif; font weight:normal; padding .5em 0 ; } etc…

you cant change the tags… which is what all of us have been trying to say, because each tag actually has a MEANING. :slight_smile:

Yeah, I fixed my <H2>

Am the rare art director. when I start a page, I like to do it as a text file ( not a word , or anything in which I can make it pretty… but a text file in which I cant even use bold or caps.

once I have my content written out that way… it becomes “easier” to see whats a list, whats a paragraph, whats a blockquote… what should be a headline, etc.

Once I wrap the proper tags around the content I have a “boring” but semantically correct all text HTML outline of the page. This is what you should aim for.

Understood, but I did my in a spreadsheet, so I wasn’t far behind that!

Afterward, I add any semantic touches EMs and STRONGSs for things that need to emphasized. After that any last minute spans for part of the content that will need styling later or that want to separate from the rest of the content…

ONCE you have THAT right… then you can use pure css, for your layout, typography, etc. At times I find I would need an extra tags to move a block of elements or to add an extra bg graphic, or hover effect… etc. that’s when I start wrapping divs AS NEEDED.

Good advice.

Nothing is a problem from a semantic stand point as long as you MEAN it ( as opposed to doing it because it looks good).

Good point.

You were right in thinking , for example, that an FAQ is a list… because it is a list of questions and answers. The discussion has been is it a UL, OL or DL. and as you can see there are arguments favouring all of those

Okay.

I would argue, that “Myth #__” is a bullet and has no meaning, but since it’s so important that it be visible even in IE6 some might argue that its part of your content and that meaning is lost if it’s missing.

That was my point and why I didn’t want to use the Content attribute.

if , as such it has meaning… then it makes sense that it is part of the definition term ( that’s what DL stands for)

Could you also do this…

<dt class=“myth_id”>MYTH #1::/dt>
<dt class=“myth”>Fresh vegetables are more nutritious than frozen.</dt>
<dd>Studies show that…<.dd>

in your attempt using divs… it was just text with no parts ( except the h1 and h3) having any semantic meaning. there is literally NO semantic differentiation between when you say “myth #” “Fresh vegetables…” and “Studies show…”. and that’s what makes it wrong.

Okay, good point!

remember when I said type your content in wordpad… no establishments … no even bolds… only line breaks? If you look at that bland text semantically it will seem like this to you:

Headline: which describes EVERYTHING on the page… that’s your H1 ( you can only have one, because how can it describe everything on the page if there is another H1 below it ( does the second h1 describe everything on the page BUT the first h1??? see? )

H2-h6 are like sections and sub sections of the page… a navigation, a main article a sub main article … and so forth. So in your case "Somethings you should know… " is a heading that goes into more details about your H1 which again is “common myths”

Okay.

Lists ( do I really Need to go onto what is a list? lol! ) But it interesting to note that that’s why navigation are often LISTS… since a navigation is essentially a list of links.

I get that one.

We are opting for a DL because of the weight this tag carries semantically. Each DT implies the term within it. Each DD implies it is a SEPARATE and standalone definition pertaining to the last DT above it in the code ( this is what you can’t use DD to make paragraph breaks… because if you do you would be essentially implying there are TWO different definitions to the same term as opposed to expounding on it.)

Hope that gives you more of an insight into semantics and HTML

Yeah, those are some good tips.

Thanks!!!

TomTees

One quick one :

Could you also do this…

<dt class=“myth_id”>MYTH #1:</dt>
<dt class=“myth”>Fresh vegetables are more nutritious than frozen.</dt>
<dd>Studies show that…<.dd>

you could, it wouldn’t be wrong so much as confusing

Each DT implies the term within it. Each DD implies it is a SEPARATE and standalone definition pertaining to the last DT above it in the code ( this is what you can’t use DD to make paragraph breaks… because if you do you would be essentially implying there are TWO different definitions to the same term as opposed to expounding on it.)

… so it’s like :
<h2>myth #1</h2>
<h2> some myth </h2>
not wrong just redundant.

Even if you need that extra tag… it end up being more flexible to do this:
<h2><span>myth #1</span> some myth </h2> Especially since “myth #1” and “some myth…” are actually related content ; it makes more sense that way.

spans have ZERO semantic value so they come in handy that way !!

Okay, good points.

I get it.

Thanks for all of your help!! (And Ralph and everyone else too!)

TomTees

In case you are interested, here is my final code…


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Experiment</title>
	<style type="text/css" media="all">
	/*
		* {padding: 0; margin: 0; border-width: 1px; border-style: dotted; border-color: black;}
	*/
		body {width: 800px; font: small/1.3em Verdana, Helvetica, Arial, sans-serif;}
		h2 {margin: 1.3em 0 0.7em 0; font-size: 1.3em;}
		dl {margin: 0; padding: 0 0 0 7em; }
		dt {margin: 0 0 -1em 0; font-weight: bold; color: red;}
		dt .myth_id {float:left; margin: 0 0 0 -7em; text-align: left;}		/* Move ID to left */
		dd {margin: 0;}
	</style>
</head>

<body>
	<h1>COMMON MYTHS</h1>
	<h2>Some things you should know about your Veggies...</h2>
	<dl>
		<dt><span class="myth_id">MYTH #1:</span> Fresh Vegetables are more Nutritious than Frozen.</dt>
		<dd>
			<p>Studies show that sometimes you can get more nutrients from frozen veggies, depending on variety and how old the vegetables at your supermarket are. That's because produce starts losing nutrient quality as soon as it's picked.</p>
			<p>Frozen vegetables are flash-frozen right after harvest so they are preserved at their peak of freshness when they are most nutritious. Your best bet in terms of taste, nutrition, and the environment is still local in-season produce.  When that's not an option frozen can be a better choice (from a nutrient standpoint) than spinach that takes two weeks to reach your table.</p>
		</dd>
	</dl>
	<dl>
		<dt><span class="myth_id">MYTH #2:</span> Farmer's Markets only have Organic Vegtables.</dt>
		<dd>
			<p>Just because a vegetable (or anything for that matter) is sold at a farmers' market does not mean that it's organic.  It still must be certified organic by the U.S. Department of Agriculture for a guarantee that it was grown without synthetic fertilizers and pesticides.</p>
			<p>Some farmers will say they are in the process of getting certified, they grow crops without synthetic chemicals but can't afford the certification process, or they only use chemicals when they have no choice and don't use them when it's close to harvest time.  It's your call on whether you trust that farmer.</p>
		</dd>
	</dl>
	<dl>
		<dt><span class="myth_id">MYTH #3:</span> Brightly Colored Veggies are Healthier.</dt>
		<dd>
			<p>Rooted in an environmental “don’t mess with the brightly-colored frogs” sort of expertise, a longstanding bit of advice in the world of fruits and vegetables claims that the more richly colored a food is, the more nutritional value it contains. As in the case of “spinach over iceberg lettuce,” there’s no denying that in certain instances, this rule absolutely applies. However, there are plenty of exceptions to this idea of which we should all be made aware.</p>
			<p>White cabbage (as dully colored as its name suggests) is one of the most vitamin and nutrient-packed foods available, containing Vitamins A, B, C, and K as well as calcium, iron, and fiber. White cauliflower is basically just a bundled chunk of antioxidants. Celery has protein and calcium (in addition to boasting a minuscule amount of calories). Red and pink pinto beans? They’ve got nothing that the white variety doesn’t have.</p>
		</dd>
	</dl>
</body>
</html>

It is basically what you and Ralph recommended, but cleaned up some and customized to the exact look I wanted.

Hopefully it is now also semantically correct?! :slight_smile:

Thanks,

TomTees

You could simplify further by dispensing with the class on the span and using dt span as the selector.

dt span {float:left; margin: 0 0 0 -7em; text-align: left;}  /* Move ID to left */

AWESOME!!!

Thanks for the suggestion to tighten up my CSS! :tup:

Sincerely,

TomTees