[css-d] Q and A (Question and Answer) format using ul
Hello,
I saw a FAQ page where it listed a question followed by an answer as
follows (fictional question and answer below):
Q. How do I login?
A. You log in by clicking on the login link.
The HTML markup is an unordered list (ul), where the list (li) have
background images for the Q. and A.
ul.QandA li.Q {
background:transparent url(../images/img_Q.gif) no-repeat scroll 0 2px;
padding:0 0 0 20px;
}
ul.QandA li.A {
background:transparent url(../images/img_A.gif) no-repeat scroll 0 2px;
padding:0 0 16px 20px;
}
Does CSS2.1 allow a way to actually use Q. and A. as text? Or
maybe a different markup (dl?) should be used?
I know the background image technique is well-known
(http://css.maxdesign.com.au/listutorial/introduction.htm), but since
in this example, it's just Q and A, I was hoping there is a way
not to use images.
Thanks,
Stephen
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Q and A (Question and Answer) format using ul
Stephen Tang wrote: I know the background image technique is well-known (http://css.maxdesign.com.au/listutorial/introduction.htm), but since in this example, it's just Q and A, I was hoping there is a way not to use images. I think that Q and A should be part of the content, not the styling. Without CSS and without images, the content of the page should still make sense, so I reckon you'll want to have the images for Q and A with alt text, or just plain text, in the HTML? -- Els __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Q and A (Question and Answer) format using ul
Does CSS2.1 allow a way to actually use Q. and A. as text? Or
maybe a different markup (dl?) should be used?
Sure. It's even easy.
li.Q:before {
content:Q: ;
}
li.A:before {
content:A: ;
}
http://www.w3.org/TR/CSS21/generate.html#before-after-content
---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Q and A (Question and Answer) format using ul
-- On Fri, 3/13/09, Els el...@tiscali.nl wrote:
I think that Q and A should be part of the content, not the
styling.
Without CSS and without images, the content of the page
should still
make sense, so I reckon you'll want to have the images
for Q and A
with alt text, or just plain text, in the HTML?
IMO, a list of question and answer pairs still makes sense, even if they're not
explicitly labelled 'Q' and 'A'. Each question will, presumably, be suffixed
with a question mark, and, if structured as a dl, each answer following it,
indented, will pretty obviously be a response.
dl.qanda dt:before { content: 'Q. '; }
dl.qanda dd:before { content: 'A. '; }
is a basic approach.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Q and A (Question and Answer) format using ul
Hi Stephen,
Personally, I like to use dl for QA features with the dt tag as the question
and the dd tag as the answer. It gives me control over how the two different
elements appear (Q in bold for ex) without assigning id's.
Another method could be the alternating table rows trick, just with a ul
though. Example: li class=odd and alternate with li class=even and then
assign those classes with whatever styling you want.
Hope this helps!
Jenn Mears-Nickerson
Jenn Mears Web Design LLC
39B Northey Street
Salem, MA 01970
617-816-1209
LinkedIn
Facebook
Twitter
From: Stephen Tang clowwizarder...@gmail.com
Sent: Friday, March 13, 2009 11:37 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] Q and A (Question and Answer) format using ul
Hello,
I saw a FAQ page where it listed a question followed by an answer as
follows (fictional question and answer below):
Q. How do I login?
A. You log in by clicking on the login link.
The HTML markup is an unordered list (ul), where the list (li) have
background images for the Q. and A.
ul.QandA li.Q {
background:transparent url(../images/img_Q.gif) no-repeat scroll 0 2px;
padding:0 0 0 20px;
}
ul.QandA li.A {
background:transparent url(../images/img_A.gif) no-repeat scroll 0 2px;
padding:0 0 16px 20px;
}
Does CSS2.1 allow a way to actually use Q. and A. as text? Or
maybe a different markup (dl?) should be used?
I know the background image technique is well-known
(http://css.maxdesign.com.au/listutorial/introduction.htm), but since
in this example, it's just Q and A, I was hoping there is a way
not to use images.
Thanks,
Stephen
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Q and A (Question and Answer) format using ul
Hi Tim,
Thanks for that. I had forgotten about :before and :after
pseudo-classes. That would work, except in IE browsers. You answered
my question though. :-)
Thanks,
Stephen
On Fri, Mar 13, 2009 at 11:43 AM, Climis, Tim tcli...@indiana.edu wrote:
Does CSS2.1 allow a way to actually use Q. and A. as text? Or
maybe a different markup (dl?) should be used?
Sure. It's even easy.
li.Q:before {
content:Q: ;
}
li.A:before {
content:A: ;
}
http://www.w3.org/TR/CSS21/generate.html#before-after-content
---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Q and A (Question and Answer) format using ul
Hi Jenn,
Thanks for those ideas. I had not thought about just getting rid of
the bullet motif entirely. Both of your suggestions are worth
experimenting.
Thanks,
Stephen
On Fri, Mar 13, 2009 at 2:32 PM, Jenn Mears-Nickerson
j...@jennmearswebdesign.com wrote:
Hi Stephen,
Personally, I like to use dl for QA features with the dt tag as the
question and the dd tag as the answer. It gives me control over how the two
different elements appear (Q in bold for ex) without assigning id's.
Another method could be the alternating table rows trick, just with a ul
though. Example: li class=odd and alternate with li class=even and then
assign those classes with whatever styling you want.
Hope this helps!
Jenn Mears-Nickerson
Jenn Mears Web Design LLC
39B Northey Street
Salem, MA 01970
617-816-1209
LinkedIn
Facebook
Twitter
From: Stephen Tang clowwizarder...@gmail.com
Sent: Friday, March 13, 2009 11:37 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] Q and A (Question and Answer) format using ul
Hello,
I saw a FAQ page where it listed a question followed by an answer as
follows (fictional question and answer below):
Q. How do I login?
A. You log in by clicking on the login link.
The HTML markup is an unordered list (ul), where the list (li) have
background images for the Q. and A.
ul.QandA li.Q {
background:transparent url(../images/img_Q.gif) no-repeat scroll 0 2px;
padding:0 0 0 20px;
}
ul.QandA li.A {
background:transparent url(../images/img_A.gif) no-repeat scroll 0 2px;
padding:0 0 16px 20px;
}
Does CSS2.1 allow a way to actually use Q. and A. as text? Or
maybe a different markup (dl?) should be used?
I know the background image technique is well-known
(http://css.maxdesign.com.au/listutorial/introduction.htm), but since
in this example, it's just Q and A, I was hoping there is a way
not to use images.
Thanks,
Stephen
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Q and A (Question and Answer) format using ul
Els, I could make Q and A part of the content, but then if the content is more than one line, the second and subsequent lines would be right under the letter Q or A, which isn't what I had in mind. I was thinking of replacing a list bullet with the letter Q and A without using an image. --Stephen On Fri, Mar 13, 2009 at 11:45 AM, Els el...@tiscali.nl wrote: Stephen Tang wrote: I know the background image technique is well-known (http://css.maxdesign.com.au/listutorial/introduction.htm), but since in this example, it's just Q and A, I was hoping there is a way not to use images. I think that Q and A should be part of the content, not the styling. Without CSS and without images, the content of the page should still make sense, so I reckon you'll want to have the images for Q and A with alt text, or just plain text, in the HTML? -- Els __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Q and A (Question and Answer) format using ul
Stephen Tang wrote:
Els,
I could make Q and A part of the content, but then if the content
is more than one line, the second and subsequent lines would be right
under the letter Q or A, which isn't what I had in mind. I was
thinking of replacing a list bullet with the letter Q and A without
using an image.
You could use something like dt, dd { text-indent: -1em; }
Cordially,
David
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
