Cleanest CSS way to do nested indents?

[darius]

Hi

I want to do paragraphs with nested indent, like so

para 1 ....
.........
para 2 .......
.....
para 3 ......
.........

I've tried things like

..indent { margin-left: 3em; }

<p class="indent">
para1
<div class="indent">para2
<div class="indent">para3</div>
</div>
</p>

but the indents aren't cumulative, i.e., it's all first level indent.

I guess I could do

..indent2 { margin-left: 6em; } etc. but that's rather messy if I should
change the indent level.

I could do

li {
list-style-type: none;
}

but on non-CSS browsers I'll get lists with bullets, which isn't what I
want.

Suggestions? Thanks

[Jukka K. Korpela]

darius <no***@here.invalid> wrote:

I want to do paragraphs with nested indent,
Are they really paragraphs? It's difficult to imagine why they should be
indented in a nested manner.
<p class="indent">
para1
<div class="indent">para2
<div class="indent">para3</div>
</div>
</p>
That's invalid markup, so all bets are off. A <p> element must not
contain a <div> element by HTML syntax. The first <div> tag implicitly
closes an open <p> element.

Here's a "keep it simple" approach, which has the drawback that you need
to compute the amounts of indentation:

HTML:

<p>para 1</p>
<p class="level2">para 2</p>
<p class="level3">para 3</p>

CSS:

p { margin-left: 3em; }
p.level2 { margin-left: 6em; }
p.level3 { margin-left: 9em; }

And here's a "make the CSS simpler at the cost of making the HTML more
complicated" approach:

HTML:

<div class="p-container">
<p>para 1</p>
<div class="p-container">
<p class="level2">para 2</p>
<div class="p-container">
<p class="level3">para 3</p>
</div>
</div>
</div>

CSS:

..p-container { margin-left: 3em; }
I could do

li {
list-style-type: none;
}

but on non-CSS browsers I'll get lists with bullets, which isn't what
I want.

But what is important here? Is it acceptable that there is no indentation
when CSS is off? If not, what is really the logical structure of the
data.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Els]

darius wrote:

Hi

I want to do paragraphs with nested indent, like so

para 1 ....
........
para 2 .......
.....
para 3 ......
.........

I've tried things like

.indent { margin-left: 3em; } but the indents aren't cumulative, i.e., it's all first
level indent.

Try padding instead of margin.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Ofra Haza - Im Nin'alu