Applying Different Styles To Alternate Text ?

#1

Hi,

Have a FAQ page , where have many sets of questions and answers. The
questions need to be a different colour / style and the answers
different. Was wondering is there a easy way to do this as compared to
enclosing each question and answer within divs ? Perhaps , through
JavaScript.

Thanks in advance ..

P.S. this might be a multipost..

#2

vivekian wrote:

Quote:

Have a FAQ page , where have many sets of questions and answers. The
questions need to be a different colour / style and the answers
different. Was wondering is there a easy way to do this as compared
to enclosing each question and answer within divs ? Perhaps , through
JavaScript.

Use CSS. What if the visitor has JavaScript disabled or not available?

<h1>My FAQ>
<h2>Question 1</h2>
<p>Answer for question 1</p>

<h2>Question2</h2>
<p>You get the idea...</p>

CSS:

body { font-family: sans-serif; }
h2 { color: red; font-family: serif; }
p { color: black; }

--
-bts
-Warning: I brake for lawn deer

#3

vivekian wrote:

Quote:

Have a FAQ page , where have many sets of questions and answers. The
questions need to be a different colour / style and the answers
different.

A FAQ can be considered a definition list (name/value pairs). Use CSS to

style <dt> and <dd> to taste.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

#4

Jim Moe <jmm-list.AXSPAMGN (AT) sohnen-moe (DOT) com> scripsit:

Quote:

A FAQ can be considered a definition list (name/value pairs).

A dog can be considered a horse, but it ain't no horse. (Besides, it's not
even name/value pairs. A question is not a name.)

Quote:

Use CSS to style <dt> and <dd> to taste.

In addition to being illogical (semantically wrong) markup, using <dl> wins
nothing. It's _more difficult_ to style than simple logical markup such as
<h2> for questions. (If you wish to style an answer as a unit, then you had
better make it a classed <div>, since it need not consist of a single
paragraph, and an answer can contain many different elements in succession.)

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

#5

Jukka K. Korpela wrote:

Quote:

A FAQ can be considered a definition list (name/value pairs).

A dog can be considered a horse, but it ain't no horse. (Besides, it's not
even name/value pairs. A question is not a name.)

Use CSS to style <dt> and <dd> to taste.

In addition to being illogical (semantically wrong) markup, using <dl> wins
nothing. It's _more difficult_ to style than simple logical markup such as

Saying it is illogical does not make it so.
Name/value, term/definition, question/answer. How are these semantically
different? What is illogical about it?

Quote:

h2> for questions. (If you wish to style an answer as a unit, then you had
better make it a classed <div>, since it need not consist of a single
paragraph, and an answer can contain many different elements in succession.)

dd> and <div> are both flow elements. Either way <p>s, <ul>s, etc., are

required for the content.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

#6

"Jim Moe" <jmm-list.AXSPAMGN (AT) sohnen-moe (DOT) com> wrote

Quote:

dd> and <div> are both flow elements. Either way <p>s, <ul>s,
etc., are
required for the content.

<!ELEMENT DIV - - (%flow

* --><!ELEMENT DD - O (%flow

#7

"Jim Moe" <jmm-list.AXSPAMGN (AT) sohnen-moe (DOT) com> wrote

Quote:

dd> and <div> are both flow elements. Either way <p>s, <ul>s,
etc., are
required for the content.

Sorry. Let me try that again.

<!ELEMENT DIV - - (%flow

* -->

<!ELEMENT DD - O (%flow

#8

David Trimboli wrote:

Quote:

dd> and <div> are both flow elements. Either way <p>s, <ul>s,
etc., are required for the content.

Sorry. Let me try that again.

!ELEMENT DIV - - (%flow

* --
!ELEMENT DD - O (%flow

* --
[...]
So DIV and DD can both take content without further markup (#PCDATA).

True.

But that was not my point. Jukka claimed using a <dl> was illogical,
semantically incorrect, and more work than using a combination of <hx> and
<div> because of the layout requirements that answers to FAQs may need. I
do not see that the level of difficulty is any different.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

#9

"Jim Moe" <jmm-list.AXSPAMGN (AT) sohnen-moe (DOT) com> wrote

Quote:

David Trimboli wrote:
dd> and <div> are both flow elements. Either way <p>s, <ul>s,
etc., are required for the content.

Sorry. Let me try that again.

!ELEMENT DIV - - (%flow

* --
!ELEMENT DD - O (%flow

* --
[...]
So DIV and DD can both take content without further markup
(#PCDATA).

True.
But that was not my point. Jukka claimed using a <dl> was
illogical,
semantically incorrect, and more work than using a combination of
hx> and
div> because of the layout requirements that answers to FAQs may
need. I
do not see that the level of difficulty is any different.

I don't know about level of difficulty, but questions and answers
together do not make a definition list. The answer is not the
definition of the question. This is why DL is semantically incorrect.

It seems to me the most meaningful way to do this is:

<div class="faq">
<h1>What is the answer to my question?</h1>
<p>The answer is no.</p>
<h1>Are you a quack?</h1>
<p>The answer is yes.</p>
<p>I am a duck.</p>
</div>

Now you can style the questions and answers as you like.

div.faq h1 {color: red; background-color: white; font-weight: bold;}
div.faq p {color: black; background-color: white; font-weight:
normal;}

Notice that my markup is no more complex than a definition list would
be.

David
Stardate 6545.2

#10

David Trimboli wrote:

Quote:

But that was not my point. Jukka claimed using a <dl> was
illogical,
semantically incorrect, and more work than using a combination of
hx> and <div> because of the layout requirements that answers to FAQs may
need. I do not see that the level of difficulty is any different.

I don't know about level of difficulty, but questions and answers
together do not make a definition list. The answer is not the
definition of the question. This is why DL is semantically incorrect.

That is taking a <dl> literally, in its most narrow sense. Even the spec

[1] has this to add: "Another application of DL, for example, is for
marking up dialogues, with each DT naming a speaker, and each DD
containing his or her words." Which is a question/answer example!
This brings me back to one of my questions: Name/value,
term/description, question/answer. How are these semantically different
and incorrect for definition list? From the spec [1]: "Definition lists
vary only slightly from other types of lists in that list items consist of
two parts: a term and a description." Two parts, hmm.

Quote:

It seems to me the most meaningful way to do this is:

div class="faq"
h1>What is the answer to my question?</h1
p>The answer is no.</p
h1>Are you a quack?</h1
p>The answer is yes.</p
p>I am a duck.</p
/div

Or:

<dl class="faq">
<dt>Are you a quack?</dt>
<dd>
<p>The answer is yes.</p>
<p>I am a duck. Quack!</p>
</dd>
</dl>
If a definition term is not a question, then how is a heading a
question? "A heading element briefly describes the topic of the section it
introduces."[2]

Quote:

Notice that my markup is no more complex than a definition list would
be.

My point exactly.

________
[1] <http://www.w3.org/TR/html4/struct/lists.html#edef-DL>
[2] <http://www.w3.org/TR/html4/struct/global.html#edef-H1>

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)