473,695 Members | 2,088 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

CSS: basic indentation question

Hello,

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)?

Best Regards... :-)

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.
Jul 23 '05 #1
10 3257
nz******@cs.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.stylesh eets.
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

Jul 23 '05 #2
"Neil Zanella" <nz******@cs.mu n.ca> wrote in
comp.infosystem s.www.authoring.html:
Q: Is my name Joe Doe or is my
name John Doe?


It could be done in several ways. Here's one.

In CSS:
p.qa {margin-left:2em; text-indent:-2em}
span.qa {width:2em}
In HTML:
<p class="qa"><spa n class="qa">Q:</span> Is my name ...</p>

(untested)

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Jul 23 '05 #3
On 28 Aug 2004 12:49:42 -0700, nz******@cs.mun .ca (Neil Zanella) wrote:

[crossed to ciwas and f-up set accordingly]
I would like to achieve the following
effect for an FAQ page... 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...


This is a CSS issue really and you might want to have a look at the
'ciwas' a-FAQ for some inspiration.

http://www.css.nu/faq/ciwas-aFAQ.html

which has its style sheet here...

http://www.css.nu/includes/ciwas-FAQs.css

I wrote the style sheet for the 'ciwas' FAQ's several years ago and to
the best of my memory the FAQ lists comes out pretty much as you want
all the way from modern browsers and down into IE4x/NS4x browsers.

--
Rex
Jul 23 '05 #4
Thank you for your reply. I now wonder, when should I
be using <span> and when should I be using <div>. What
is the difference?

Thanks,

Neil

Stan Brown <th************ @fastmail.fm> wrote in message news:<MP******* *************** **@news.odyssey .net>...
"Neil Zanella" <nz******@cs.mu n.ca> wrote in
comp.infosystem s.www.authoring.html:
Q: Is my name Joe Doe or is my
name John Doe?


It could be done in several ways. Here's one.

In CSS:
p.qa {margin-left:2em; text-indent:-2em}
span.qa {width:2em}
In HTML:
<p class="qa"><spa n class="qa">Q:</span> Is my name ...</p>

(untested)

Jul 23 '05 #5
On Sat, 28 Aug 2004 17:48:51 -0400, Stan Brown
<th************ @fastmail.fm> wrote:
"Neil Zanella" <nz******@cs.mu n.ca> wrote in
comp.infosyste ms.www.authoring.html:
Q: Is my name Joe Doe or is my
name John Doe?
It could be done in several ways. Here's one.

In CSS:
p.qa {margin-left:2em; text-indent:-2em}
span.qa {width:2em}

Don't think so.

"10.2 Content width: the 'width' property
This property does not apply to non-replaced inline-level elements. The
width of a non-replaced inline element's boxes is that of the rendered
content within them ... "

In HTML:
<p class="qa"><spa n class="qa">Q:</span> Is my name ...</p>

(untested)


I don't think there would be much wrong with using a table here, as the
Q and A logically belong with the associated text. But if anyone has a
good CSS solution I'd also be interested - for each of the possibilities
I've thought of so far, I've also found a reason for disliking them.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 23 '05 #6


Neil Zanella wrote:

Thank you for your reply. I now wonder, when should I
be using <span> and when should I be using <div>. What
is the difference?


The difference is between the text level and the block level. Please see
e.g. <URL:http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.3>.

Thor

--
http://www.anta.net/
Jul 23 '05 #7
"Neil Zanella" <nz******@cs.mu n.ca> wrote in
comp.infosystem s.www.authoring.html:
Thank you for your reply. I now wonder, when should I
be using <span> and when should I be using <div>.


[Please don't quote upside down, and please do trim quotes; see
<http://web.presby.edu/~nnqadmin/nnq/nquote.html>.]

<span> is for inline elements, and <div> is for block elements like
paragraphs and tables.

You can change that with CSS, but that's the intent.
Jul 23 '05 #8
"Stephen Poley" <sb************ ******@xs4all.n l> wrote in
comp.infosystem s.www.authoring.html:Quoting my:
span.qa {width:2em}


Don't think so.

"10.2 Content width: the 'width' property
This property does not apply to non-replaced inline-level elements. The
width of a non-replaced inline element's boxes is that of the rendered
content within them ... "


Durn it, I forgot about that.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Jul 23 '05 #9
On Sun, 29 Aug 2004 12:16:10 -0400, Stan Brown
<th************ @fastmail.fm> wrote:
<span> is for inline elements, and <div> is for block elements like
paragraphs and tables.

You can change that with CSS, but that's the intent.


Yet it should be stressed that changing <span> to display: block; will not
make it legal to nest other block elements within it. The HTML must be
correct without the CSS, of course.
Jul 23 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
1421
by: Zhidian Du | last post by:
Hello, I have a program, whose output are XML files (at least 100 K) but there is no the CSS file to control its display. Is there any programs that can generate a CSS form these XML files? How can I display it use browsers? I do not need perfect appearances, but just let browser can display their basic hierarchical structures.
29
3052
by: Joseph Haig | last post by:
I am trying to use descriptive lists, <DL>, as shown in <http://www.maths.man.ac.uk/~jhaig/tmp/test.html> with a style sheet at <http://www.maths.man.ac.uk/~jhaig/tmp/default-2.css>. With Mozilla and Opera they appear correctly, with a border round both the <DT> and <DD> parts but in Internet Explorer the borders are messed up. Can anyone please tell me where the mistake is? As an aside, the <div id="main"> section should have the...
98
6255
by: Pamel | last post by:
I know this must have been asked elsewhere, but I cannot find it. There is a piece of text on my web page that I don't want browsers to resize. IE won't resize it if I specify the size in px, but everything else will. Is there any way to prevent browsers from resizing text? If you could just point me to where this has already been answered, that would be great. Paul
2
6714
by: darius | last post by:
Hi I want to do paragraphs with nested indent, like so para 1 .... ......... para 2 ....... ..... para 3 ...... .........
14
2474
by: Xah Lee | last post by:
is there somewhere i can find the default css for browsers? e.g. what's the usual rendering in terms of css for <p>, <ul> etc. in particular, right now i'm interested in creating a style similar to <ul> and <li>. Of course i can eyeball and come up with a css, but want to be sure. ----------
13
3022
by: amykimber | last post by:
Hi all, I know I'm doign something really daft, but I can't get this to work... I have a form with a bunch of inputs called ship_owner - why the ? Because I'm submitting this page though php and the put the data into an array in the post.... anywhat. I have a link <a href="javascript:change_class()" >Block mode</a> to
59
3653
by: phil-news-nospam | last post by:
In followups by Brian O'Connor (ironcorona) to other posts, he repeats the idea that using tables in CSS is not something that should be done because IE doesn't support it. Of course I'm not happy about the fact that IE doesn't support CSS tables. But what can one do about that? And tables of one type or the other are needed in some cases (regardless of whether some people feel it is appropriate or not). So the issue I and considering...
13
5760
by: deko | last post by:
I. A. B. II. A. 1) 2) B. C.
13
1943
by: Dan Aldean | last post by:
Hi, I use ASP.NET 2.0 and I created a stylesheet, but I don't know how to make it visible to a web form "MyWebPage.aspx" that uses the master page. I put a reference to the css in the .master but it's not visible to the newly created page. MyWebPage.aspx doesn't have a <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>structure.
0
9115
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
8847
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8825
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7661
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6491
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5839
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4340
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
2
2272
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
1976
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.