Help with FAQs

I am trying to create a nicely formatted “Frequently Asked Questions (FAQs)” section, and could use some help and ideas on the best way to format things.

Below is some dummy data…

********************************************
SAMPLE FAQs

1.) What is a Computer?
A computer is a…

2.) What is a Mouse?
A mouse is a…

3.) Do I need a Mouse?
If your…

4.) My computer is running slow…
The first thing to check is…
********************************************

I am thinking things would look best if…

  • The numbers were in their own “column” and right-aligned

  • The FAQs (and Answer) were in their own “column” and left-aligned

  • The FAQs were bolded

How would I accomplish that with CSS?

Would that kind of formatting be okay?

Sincerely,

TomTees

It seems to me for an FAQ you could start by using an ordered list.

I dunno if you meant 2 columns… one for the number and then one for the FAQ and ANSW or 3 columns one for the # one for the question and one for the answer.

2 cols


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Computer FAQs</title>
<style>
h1{margin:0; padding:0;}
#FAQlist{ font: bold 110%/1.1   Arial, Helvetica, sans-serif ; background: silver; margin:0; padding:0 1em 0 3em }
#FAQlist li{padding: 1em 0 0 0 ;   }
#FAQlist li:after{content:""; display:block; clear:both;}
.ques{ float:left; margin-right:.5em;}
.ans{font: normal 90%/1.3   Arial, Helvetica, sans-serif ;}
.ans p{ margin:0; padding:0 0 .5em 0}

</style>


</head>

<body>

<h1>SAMPLE Computer FAQs</h1>
<ol id="FAQlist">
	<li>
     	<div class="ques"> What is a Computer?</div>
     	<div class="ans">
          	<p>A computer is a...</p>
          </div>
     </li>
	<li>
     	<div class="ques"> What is a Mouse?</div>
     	<div class="ans">
          	<p>A mouse is a...</p>
          </div>
     </li>
	<li>
     	<div class="ques"> Do I need a Mouse?</div>
     	<div class="ans">
          	<p>If your...</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>
          </div>
     </li>
	<li value="10">
     	<div class="ques"> My computer is running slow...</div>
     	<div class="ans">
          	<p>The first thing to check is...</p>
          </div>
     </li>
</ol>
</body>
</html>
[/<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Computer FAQs</title>
<style>
h1{margin:0; padding:0;}
#FAQlist{ font: bold 110%/1.1   Arial, Helvetica, sans-serif ; background: silver; margin:0; padding:0 1em 0 3em }
#FAQlist li{padding: 1em 0 0 0 ;   }
#FAQlist li:after{content:""; display:block; clear:both;}
.ques{ float:left; margin-right:.5em;}
.ans{font: normal 90%/1.3   Arial, Helvetica, sans-serif ;}
.ans p{ margin:0; padding:0 0 .5em 0}

</style>


</head>

<body>

<h1>SAMPLE Computer FAQs</h1>
<ol id="FAQlist">
	<li>
     	<div class="ques"> What is a Computer?</div>
     	<div class="ans">
          	<p>A computer is a...</p>
          </div>
     </li>
	<li>
     	<div class="ques"> What is a Mouse?</div>
     	<div class="ans">
          	<p>A mouse is a...</p>
          </div>
     </li>
	<li>
     	<div class="ques"> Do I need a Mouse?</div>
     	<div class="ans">
          	<p>If your...</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>
          </div>
     </li>
	<li value="10">
     	<div class="ques"> My computer is running slow...</div>
     	<div class="ans">
          	<p>The first thing to check is...</p>
          </div>
     </li>
</ol>
</body>
</html>

Change the CSS to this for 3 cols


h1{margin:0; padding:0;}
#FAQlist{ font: bold 110%/1.1   Arial, Helvetica, sans-serif ; background: silver; margin:0; padding:0 1em 0 3em }
#FAQlist li{padding: 1em 0 0 0 ;   }
#FAQlist li:after{content:""; display:block; clear:both;}
.ques{ float:left; width:25%;}
.ans{font: normal 90%/1.3   Arial, Helvetica, sans-serif ; width:70%; margin-left:25%}
.ans p{ margin:0; padding:0 0 .5em 0}

BTW I used “value” on the last LY so you could see what would happen when you reached the double digits… omit “value=‘10’” from your code…

hope that helps

Thanks for the response and the code. (More than I expected!)

Attached is a screen-shot of something I created in Open-Office Calc (aka Excel).

I’m not sure if my formatting is too demanding for the web, but I sorta like the way thing line up.

Tell me what you think.

(I left in the row and column heading to show you how I used OO Calc (Excel) to get the desired effect.)

TomTees

I’d be tempted to use a definition list for this:


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

dl {margin: 0; padding: 0; overflow: hidden;}
dt {margin:0; padding-left: 15px; font-weight: bold;}
dd {margin:0; padding-left: 45px;}
dt span {width: 30px; display: block; float: left;}
</style>
	
</head>

<body>
<dl>
  <dt><span>1)</span>What is a Computer?</dt>
  <dd>A computer is a...</dd>
  <dt><span>2)</span>What is a Mouse?</dt>
  <dd>If your...</dd>
  <dt><span>3)</span>My computer is running slow...</dt>
  <dd>The first thing to check is...</dd>
</dl>
</body>
</html>

I was tempted to use DL too. but the OL automatically numbers. This is only needed if your FAQs ACTUALLY HAVE a specific order in which they must go ( lets say you have actually kept track of which question was most frequently asked, for example). The LI method will allow you to style teh container of each Question… if thats important to you.

It important to not that DDs ARE NOT paragraphs (Ps), so if you have a long answer you may need to do

<DD> <p> some stuff</p><p>some more stuff</p></DD>

these are the two ways:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Computer FAQs</title>
<style>
h1{margin:0; padding:0;}
#FAQlist{ font: bold 110%/1.1   Arial, Helvetica, sans-serif ; background: silver; margin:0; padding:0  ; overflow: hidden; counter-reset: question }
#FAQlist li{padding: 1em 1em 0 4em ; background:pink; counter-increment:question}
#FAQlist li:hover{background:gray}
.ques:before {content: counter(question) ".)"; margin-left:-2.5em; float:left; width:.5em}
.ans{font: normal 90%/1.3   Arial, Helvetica, sans-serif ;}
.ans p{ margin:0; padding:0 0 .5em 0}

</style>


</head>

<body>

<h1>SAMPLE Computer FAQs</h1>
<ol id="FAQlist">
	<li> 
     	<div class="ques"> What is a Computer?</div>
     	<div class="ans">
          	<p>A computer is a...</p>
          </div>
     </li>
	<li>
     	<div class="ques"> What is a Mouse?</div>
     	<div class="ans">
          	<p>A mouse is a...</p>
          </div>
     </li>
	<li>
     	<div class="ques"> Do I need a Mouse?</div>
     	<div class="ans">
          	<p>If your...</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>
          </div>
     </li>
	<li value="10">
     	<div class="ques"> My computer is running slow...</div>
     	<div class="ans">
          	<p>The first thing to check is...</p>
          </div>
     </li>
</ol>
</body>
</html>

or



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

dl {margin: 0 ; padding: 0 0 1em 5em;  counter-reset:question;  border:1px solid #000; font-family:Arial, Helvetica, sans-serif}
dt {margin:0; padding:1em 0 0 0   ;font-weight: bold; counter-increment:question}
dt:before {content: counter(question, decimal) ".)" ; float:left; margin-left:-5.5em; width:3em; text-align:right}
dd {margin:0; padding:0 }
</style>
	
</head>

<body>
<h1>Frequently Asked Questions (FAQs) </h1>
<dl>
  <dt>What is a Computer?</dt>
  <dd>A computer is a...</dd>
  <dt>What is a Mouse?</dt>
  <dd>If your...</dd>
  <dt>My computer is running slow...</dt>
  <dd>The first thing to check is...</dd>
</dl>
</body>
</html>

I suppose I would lean towards the DL UNLESS you inteded to have some hover or styling effect…

How can I have my cake and eat it too? :-/

I am torn between what Dresden and Ralph have shown me.

I like the simplicity and compatibility of <DL><DT><DD>, but I also want more control on formatting and labeling my “Questions” and “Answers”.

Is there a way that <DL> can provide auto-numbering and formatting for numbers?

Also, is there a way to have a more elaborate Label/Number?

For example, having:

Question #1
Question #2
Question #3

Q1.)
Q2.)
Q3.)

FACT #1:
FACT #2:
FACT #3:

TomTees

Amazing, one of the few times we actually HAVE terms and definitions making a DL the ideal element.

Though @d_phoenix – bunch of DIV for nothing much? Much less the paragraphs for nothing?!? … though at least you used a heading tag. IF I were to put that in a OL (which I wouldn’t) I would just have H2 and Paragraph tags without those div… But that’s WHY I wouldn’t use an OL in the first place; as a rule of thumb I consider it semantically incorrect to put block-level items inside a LI as that indicates it is not a ‘short list item’; the type of thing that LIST tags are for.

I’d go with the DL, semantically it’s what the content IS…

Ralph’s use of the SPAN is a good way to handle both-- you want auto-numbering that can be a SSI’s job. I’d NOT be slapping paragraphs in there unless there were REALLY going to be more than one paragraph each… DD gives the content a semantic meaning, you shouldn’t be adding more too it.

Because Shadow has made me have to explain myself: :slight_smile:

Use the OL IF:

  1. There is an actual order to each of your FAQ. ( this one is really important)

  2. yes, you can <div class=“ques”></div> with H2. I was keeping it generic, in case the FAQ was part of another section ( thought you could still use Hx is stead of divs)…

basically do this instead:
<h2>Your Question</h2>
h3:before {content: counter(question) “.)”; margin-left:-2.5em; float:left; width:.5em}

3)You can forget the DIV tag ( ie: instead of this <div class=“ans”><p>A mouse is a…</p> </div> do this: <p>A mouse is a…</p> with #FAQlist li p{font: normal 90%/1.3 Arial, Helvetica, sans-serif ; margin:0; padding:0 0 .5em 0}

  1. the main advantage to doing it the way I originally showed you is if you have multi paragraph answers, your FAQ section is or could be a section of another page, or if you feel you needed to style the background of each section… especially with :hover

IF you then chose to use DL for an FAQ
I think my warning about P was that DDs are not P so dont use them just because you have a paragraph break in your FAQ answer text as THAT would be semantically incorrect.
each DD needs to contain an independent definition. for example:


<DL>
<DT>What is a  Computer?<DT>
<DD> A computer is.. blah blah</DD>
<DT>What is a  Mouse?<DT>
<DD>
       <p>Is a dirty rotten mammalian vermin.blah blah blah blah</p>
        <p>Great for feeing to snakes tho.</p>
</DD>
<DD>its a computer input device that allows... blah</DD>
</DL>

Some might argue that if you needed the :hover or styling for each FAQ you could code each questions its own separate DL as oppose to using LIs as Shadow points out… my own personal feeling on this is that , even tho the LIs contain block level items … multiple DL essentially create a LIST of DLs…

Anyway my intent before was to keep my answer simple and generic… but I hope this will help you pick which is most appropriate to YOUR SPECIFIC implementation ( and it’s the implementation that defines which method is best) and to make your code leaner as you do.

:slight_smile:

BTW, TRY MY DL code… it auto numbers and you can change the way it appears:
dt:before {content: counter(question, decimal) “.)” ; float:left; margin-left:-5.5em; width:3em; text-align:right}

OR
dt:before {content: counter( “Q” (question, decimal) “.)” ; float:left; margin-left:-5.5em; width:3em; text-align:right}

OR
dt:before {content: counter( “Question #” (question, decimal) ; float:left; margin-left:-5.5em; width:3em; text-align:right}

Okay, I have finally figured out the exact “look-and-feel” that I would like! Now the challenge is how to do it in an acceptable way using HTML and CSS?! :-/

To address some things you mentioned earlier, Dresdan…

1.) Each “Myth” does need to be numbered.

2.) The code needs auto-number things for me.

3.) I want to use the format MYTH #1, MYTH #2, MYTH #x

4.) Ideally the code should be compatible from IE 6 to IE 9 (?) and with Opera, Safari, and FireFox. (A lot of the things you used don’t seem to meet that test.)

5.) Each “Response” (i.e. Answer to a Myth) could be multiple paragraphs.

Semantically, I really like the simplicity of the <DL><DT><DD>, but maybe that isn’t possible with all of my fancy layout/formatting?

Attached is a screen-shot that I just created in Open-Office Calc.
(It is just for demonstration purposes, so if you are a carnivore, chill out!) :lol:

TomTees

Tees

look at my code, each will auto number for you. My only issue is ORDER. when styles are off a DT has no order. This is a semantic thing rather than presentation. an OL ALWAYS numbers items… even when styles are off. Think of it this way: if you have a list of the month of the year … it makes sense to use an OL. because Jan comes before June… also if you have a list of steps to follow when changing your oil… a specific ORDER must be followed. if you use an OL your list will have the #s even without using CSS… ( this is good because it means the ORDER will be accessible to ALL … even if they are using Netscape 2.0)

For the “myth #” find
content: attribute in the code I provided earlier and change it to counter( “Myth #” (question, decimal) “:”;

am afraid that to support IE6 and 7 you may need to source out some javascript ( old IE does not support before:/after:) and a lot of js used to make up for it lack of support. So it comes to a choice between putting in “Myth # X” manually or using js to support IE.

As far as <P>s , if you choose to use a DL, just remember what I said about differentiating between a paragraph and a definition.

Dresden_Phoenix,

Oops, I’m getting a bit lost here with all of your help and code floating around. :blush:

Questions/Comments:

Backing up a moment, and based on my last “Myths_Veggies.png” attachment…

Do you think I would be better served to use an Ordered List or to use “Definition List”??


So I am reading up on SitePoint’s site about Content.

If I understand correctly, it is saying that it only adds in the numbering of labels (e.g. MYTH #1) visually and not in the actual content itself?

Note that the generated content is only rendered—it doesn’t appear in the DOM tree. In other words, generated content doesn’t alter the document as such—only the presentation.

If that is correct, maybe that isn’t what I want? ** getting confused **

I’m not 100% certain at this point, but I suppose that I want certain “Myths” and “Myth Responses” associate with certain numbers (e.g. MYTH #1) because I need some way to sort and prioritize things.

It is not that I am doing a Step1, Step 2, Step 3 kind of thing. However, Myth #1 is presumably the most important are relevant to Myths #2, #3, and #4 whereas maybe Myth #75 isn’t as important and/or needs to be grouped with Myth #76 and #77.

With that being said…

Maybe I need to “hard-code” my Myth #'s?!


I am also concerned about compatibility, because according to SitePoint here, the Content tags support is pretty limited.

Wouldn’t using “Content” cause issues even beyond IE6?

As mentioned earlier, I guess I do want “Myth #3” to match up with “Brightly Coloured Veggies Are Healthier.”

Maybe down the road I would store all of this in a database?

  • MythID (e.g. “Myth #3”)
  • Myth (e.g. “Brightly Coloured Veggies Are Healthier.”)
  • MythResponse (e.g. “Rooted in an environmental don’t mess with…”)

For the “myth #” find
content: attribute in the code I provided earlier and change it to counter( “Myth #” (question, decimal) “:”;

I saw that, but it seems like other browser may have trouble rendering that as well.

If used that approach and a user was on IE6, what would they see?

Sorry for being confused, but this is a bigger topic than I thought?!

TomTees

[COLOR=“Blue”]P.S. Okay, I think this is where I am getting confused…

I remember from reading my SitePoint books that using Lists is a great technique to group things both semantically and for display purposes. So it seemed like a logical choose for “Frequently Asked Questions (FAQs)” that have a simple Term-Definition relationship. And even if you expanded things a bit to my “Myths” example, this still seemed like a good approach.

I liked the idea of an OrderList because CSS would add numbers to my list automatically without me having to hard-code anything.

But then I sorta changed things and liked the look of;

Myth #1: <some myth>
<explanation of why it is a myth>

And so I am now confused if I have went beyond a simple OrderedList and now I need to see things as 3 separate pieces of data??

(I know you gave a solution using “Content”, but I’m wondering if that is too breakable, and also if I need to make “Myth #1” more like permanent content and not just an “auto-numbering” thingy…)

Make sense?! :-/

[/COLOR]

It’s ok… that why I was over simplifying earlier.

lets see if I can take another swing at explaining:

the content property can only be used when you use :before OR :after on an element ( this is why IE6 and 7 are not going to work w/o some help fro javascript).

when you make a website TRUE content is in your HTML , your CSS is (and is supposed to be) just for looks. So if its something having to do with the meaning … don’t create it using CSS. Some people and some browsers don’t even use CSS at all ( yeah sure the people are like 95 years old and the browsers are equally ancient… but you get my point)

When you use an OL, even tho the #s get generated automatically, it IMPLIES that there is a meaning to this order… so the first myth you put in your list would be implied to be more important than the second, or the third… and so forth. This is NOT true of a UL (UNORDERED list) or a DL ( definition list) even tho you can STYLE ANY of these list to give you a count. and that’s what I meant. I got the feeling that since you used #s in your FAQ that you wanted an implied order … and thus the OL idea. Now here’s the rub…

The OL automatically counts… and even when styled NOT to show # implies that each LI is in a MANDATED ORDER ( first one first, second one second… etc). BUT the automatic numbers cannot be styled other than the default ways of the list ( you could use roman numerals for example… but you can’t have “chapter V”) so what my OL code is doing is hiding the OL numbers and replacing it with what you wanted it to say. That is called STYLING. What is important however is that if NO styles were applied the OL would look like this:

1 What is a computer?
A computer is…

2 What is a mouse?
A mouse is?

where a DL would look like this

What is a computer?
A computer is…

What is a mouse?
A mouse is?

see how the numbers are not put there by the DL… and thus its implied that there is no PARTICULAR order in your list? Style is important but it also important to think HOW DOES my page read w/o any style… that helps you decide on semantics

As far as IE6

IE6 would IGNORE dt:before {…} all together… (unfortunately, it all that it would ignore, so the #s from the OL wont show either since we have styled them away)… however you can use javascrip to make IE6 show the dt:before {…} rule ( my js is mediocre at best … which is why I didn’t go into the details of it right away)

BTW,

the computer CANT figure out what’s important … How could it??? Even if you use an OL you will need to place the first myth first, the second second… it’s just that with an OL you are communicating that this was indeed your intent and not just done out of convenience.

to recap:

  • it is important to separate meaning from style… it may be nice for it to look like "myth #1, myth #2, etc…) but whats important is that it MEANS 1, 2, 3, etc…

  • an UL or DL does NOT imply any order in the list ( item 10 is of equal important as item 1) and as such neither type of list automatically numbers its items.

  • An OL MEANS order… whether the count is shown or not, it MEANS 1,2,3…

  • Because of the above an OL automatically numbers for you… but you can use CSS to have other elements show automatic #s

  • IE6 will have problems with such CSS methods… but IE6 always has problems with CSS. which is why either rewriting your content OR using js for older IE is often necessary.

  • Unless such CSS methods are used the OL only automatically displays a limited number of count styles … ( decimal, roman, ect) but no embellishments ( periods and or parenteis or even words before the number)

dresden_phoenix,

Did you see my addendum in BLUE font at the end of my last post?

TomTees

Thanks for your last comments, dresden_phoenix.

So here is what I am thinking…

I’m really trying to display 3 pieces of data:

  • MythID (e.g. “Myth #3”)
  • Myth (e.g. “Brightly Colored Veggies Are Healthier.”)
  • MythResponse (e.g. “Rooted in an environmental don’t mess with…”)

(Now, database experts might scream that I am storing “Myth #3” in the database, but there would at least be a MythID=3.)

Each Myth has its own unique MythID and that relationship should not be broken for the reasons mentioned in my last post.

So, how can I accomplish the following:

1.) Create a web page that looks exactly like my “Myths_Veggies.png” attachment above.

2.) That follows respectable HTML and CSS

3.) Is structured in a logical semantic way

4.) That will cover most browsers that are still in use (e.g. IE 6 & 7)
–> This means that relying on CSS’s Content attribute wouldn’t be a good idea.

It seems like my need to have Myth #1, Myth #2,… with the rest of my content display as an indented, hanging paragraph (in MS Word speak) is what is making this a challenging project, but that is what looks best and what I am aiming for!

Please tell me this can be done and meet the above goals.

Thanks,

TomTees

right,
but the TRUE question is is the myth idea relevant to the Myth order? or just # assigned for convenience

BTW… attachments take a few hrrs to approve… so none of us can see it just yet.

#2 and 3 are actually the same thing.

#4 might be a knot w/o java script. It’s just the limitation of IE… the only auto numbering you can get can’t be styled. and if you put in the numbers your self… well it won’t be autonumbered, and when css is off… you will have 1 myth #1 , 2 myth #2… you just have to decide on some trade offs… for compatibility sake…and that’s what I am saying…

BTW, you should be thinking of what is correct semantically first… rather than what LOOKS. What I have been trying to say if your myths are really ordered FOR A REASON… there is no need for an OL if they ARE then you should use an OL that’s first and foremost.

BTW, sorry if we got our lines crossed, but CSS does NOT add the numbering in an OL. It is an inherent part of the HTML ( this is why it carries meaning) … if you have a page w/o any CSS… and use an OL it will still have the #s… but no styling. Remember , your readers can have CSS off.

It could go either way at this point in development, but I am thinking of the “Myth #” more like a “MythID” that uniquely identifies a specific Myth. (Doing so will allow me to refer to it on other pages and to make sure that the “MythID” is linked to the “MythName” and the “MythDescription”.)

It is likely that the more important a Myth, the smaller its “MythID”. (e.g. “Myth #5” is one of the Top 10 Myths, whereas “Myth #25” is a secondary one.)

Lastly, I would likely organize Myths into “families”. So maybe Myths #11-15 deal with some logical grouping. (So if the “MythID” was not permanently tied to the “MythName” and “MythDescription”, then that grouping would be lost.)

BTW… attachments take a few hrrs to approve… so none of us can see it just yet.

DANG!! (No wonder you were having a hard time following me?!) :frowning:

#4 might be a knot w/o java script. It’s just the limitation of IE… the only auto numbering you can get can’t be styled. and if you put in the numbers your self… well it won’t be autonumbered, and when css is off… you will have 1 myth #1 , 2 myth #2… you just have to decide on some trade offs… for compatibilty sake…and that’s what I am saying…

Well, if I can get the desired “look”, then I don’t mind having MythID as a piece of data, because as mentioned above, this really is more like a database record I am trying to display where MythID, MythName, MythResponse all go together.

I guess you’ll have to wait for my attachment to be approved before you can really help out?! :frowning:

Thanks,

TomTees

OK, it’s approved. But I second dresden’s question above about whether or not the numbering of myths here is necessary at all. I don’t see any necessary hierarchy or ordering of those myths. Giving them an order like that almost implies that one flows from another. But myths are just myths, aren’t tey?

EDIT: sorry, that was answered above.

Thanks Ralph!

But I second dresden’s question above about whether or not the numbering of myths here is necessary at all. I don’t see any necessary hierarchy or ordering of those myths. Giving them an order like that almost implies that one flows from another. But myths are just myths, aren’t they?

Well, a few comments…

1.) I just grabbed this data off the Internet so we had something to work with. (This isn’t my actual content which I’d prefer not to share just yet.)

2.) When I did my actual Content last night, I did sorta write things in a logical order.

Like I said above, both my FAQ’s and Myths do sorta have a logical grouping with them, although certainly not to the degree of the steps required to change the oil in your car!

For instance, maybe FAQs 1-10 deal with “Computer Hardware”, and FAQs 11-20 deal with “Computer Software” and FAQs 21-28 deal with “Computer Security”.

Or maybe Myths 1-10 are the most important (i.e. Top 10 Myths) and so the numbering does matter.

Right now my content is just Text, but it probably would make sense to put it into a database pretty soon as it grows and expands. So if that happens, each “FAQ” and “Myth” will likely have an “ID” associated with them. This will not only identify them in terms of the database, but also likely be used when you display FAQ #___ and MYTH #____.

Also, if I can find a way to display things from my earlier mentioned MythID, MythName, MythDescription paradigm, and later on I decide to change my grouping or ranking of things, I could just change things in the database - not touching the record’s true Primary Key - and that would allow me to display things in a different order but not lose the data-mapping. And it would also help me avoid having to re-type things if you follow me?!

Does that help?

BTW, why I was waiting on responses and waiting on my attachment to appear, I was able to hack out something using my limited CSS skills using DIVs…

However, it seems like what I just did probably isn’t the best semantically, but who knows?! (:

TomTees

Yes it helps… since your website is written off the DB… you could have the CMS output the MythID as part of the HTML. ( which would solve the IE compatibility issue and the auto numbering issue. Whether it’s supposed an OL or DL remains a gray area… for as you said, its more logical than a UL, but not as much as the steps in changing your oil. Sadly there is no “semi-ordered list” tag…lol. So lets go with the DL idea for now…

It wont be ordered as far as semantics … (only OLs are ordered) … but the CMS can insert your ordered bullet into the HTML so the viewer will see it regardless of the browse…

<DT><span>Myth #(mythID_var)</span> The myth name…</DT>…

or you could go back to CSS, and know that you will need some JS to make it work in IE.

the CSS solution is 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 -.75em -0 ;}
dl {margin: 0 ; padding: 0 0 0 125px;  counter-reset:question;   }
dt {margin:1em 0 0 0 ; padding:0   ;font-weight: bold; counter-increment:question}
dt:before {content: "MYTH #"counter(question, decimal) ":" ; float:left; margin-left:-125px; width:100px; text-align:right;  font-weight:bold;}
dd p {margin: 0 0 1em 0 ;}
</style>
	
</head>

<body>
<h1>Common Myths </h1>
<h2>Somethings you should know... </h2>
<dl>
  <dt>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>The myth of whatever</dt>
  <dd>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</dd>
  <dt>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>

or
you could keep the word “myth” as part of the content ( that way IE will always read “MYTH:” but not “MYTH # whatever:” … unless you add a jscript to add the #. this is what is meant by “graceful degradation” (assuming of course that this want supposed to be an OL to begin with…)


<!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 -.75em -0 ;}
dl {margin: 0 ; padding: 0 0 0 125px;  counter-reset:question;   }
dt {margin:1em 0 0 0 ; padding: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"><span >Myth</span>:</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"><span >Myth</span>:</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"><span >Myth</span>:</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>

Seeing always does that! :slight_smile:

since your website is written off the DB… you could have the CMS output the MythID as part of the HTML. ( which would solve the IE compatibility issue and the auto numbering issue.

Right.

Whether it’s supposed an OL or DL remains a gray area… for as you said, its more logical than a UL, but not as much as the steps in changing your oil. Sadly there is no “semi-ordered list” tag…lol.

Yeah.

Here is what I came up with while I was waiting on you guys…


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Experiment</title>
	<style type="text/css" media="all">
		body {width: 800px; font: small/1.3em Verdana, Helvetica, Arial, sans-serif;}
		h3 {margin: 1.3em 0 0.7em 0;}
		.myth_id, .myth {font-weight: bold; color: red;}
		.myth_id {float: left; width: 90px;}
		.myth {margin: 0 0 -1em 0;}
		.myth_response {padding: 0 0 0 90px; }
	</style>
</head>

<body>
	<h1>COMMON MYTHS</h1>
	<h3>Some things you should know about your Veggies...</h3>
	<div class="myth_id">MYTH #1:</div>
	<div class="myth">Fresh vegetables are more nutritious than frozen.</div>
	<div class="myth_response">
		<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>
	</div>

	<div class="myth_id">MYTH #2:</div>
	<div class="myth">Farmer's markets only have organics.</div>
	<div class="myth_response">
		<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>
	</div>

	<div class="myth_id">MYTH #3:</div>
	<div class="myth">Brightly Coloured Veggies Are Healthier.</div>
	<div class="myth_response">
		<p>Rooted in an environmental &#8220;don&#8217;t mess with the brightly-colored frogs&#8221; 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 &#8220;spinach over iceberg lettuce,&#8221; there&#8217;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&#8217;ve got nothing that the white variety doesn&#8217;t have.</p>
	</div>
</body>
</html>

What do you think about that?

I suppose it isn’t “semantic” like the DL/DD/DT, but at least it looks exactly like I wanted! :slight_smile:

TomTees