Re: CSS: basic indentation question

nzanella (AT) cs (DOT) mun.ca (Neil Zanella) wrote:

I would like to achieve the following
effect for an FAQ page without having
to resort to html tables. What is the
best way to do it using CSS (note how
the indentation is table-like)?

If you are asking about CSS, the right group is c.i.w.a.stylesheets.
Followups set accordingly.

The J'uring Test FAQ
====================

Q: Is my name Joe Doe or is my
name John Doe?

A: How would I know? I tried searching
with Google and found several matches
but still cannot tell. So hey, you
could be Joe, John, someone else,
or you may not even be human.

I assume that this is to be understood so that the text lines proper
(excluding "Q:" and "A:") start at the same position. This is _not_
completely evident from your description, since it becomes apparent (?)
only when your message is viewed using a monospace font.

This sounds tricky, and I'm afraid you'll at least need extra markup to
make "Q:" and "A:" elements that can be styled, in addition to the
obvious (?) markup

<h2> Q: Is my name Joe Doe or is my
name John Doe?</h2>
<p>
A: How would I know? I tried searching
with Google and found several matches
but still cannot tell. So hey, you
could be Joe, John, someone else,
or you may not even be human.
</p>

Using <span>Q:</span> and <span>A:</span>, one approach might be

span { position: absolute;
left: -1.5em; }
h2, p { position: relative;
margin-left: 1.5em; }
h2 { font-size: 100%; }

(though you probably want to use classes for <span> and maybe <p>, or for
some containers of them, since you might have other <span> and <p>
elements on the page as well).

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html