Indenting LI items - HTML Forums

ryandevilhorns · 11-12-2009, 09:06 PM

Hi there,

I'm hoping someone can help me figure out how to make some LI items indent slightly more each level down. Something like this is what I'm looking for:

I wasn't having much luck finding any examples Googling unfortunately, I'm a novice at CSS and unsure what the exact term would be.

Is it possible for the CSS to have some logic so that the LI item knows its position in the UL and can indent appropriately?

If not, I would then have to define the indent for each level in the CSS and then call it with a class for each level?

Hope that all makes sense.
Thanks.

Pegasus · 11-13-2009, 02:52 AM

Try adding margin: 5px; to each <li>, like this:

<li style="margin: 5px;">Item 1</li>
<li style="margin: 10px;">Item 2</li>

And so on.

¥åßßå · 11-13-2009, 03:00 AM

Or nest lists :

HTML Code:

<ul>
<li>item 1</li>
<li>Item 2
  <ul>
  <li>Item 2a</li>
  <li>Item 2b><li>
  </ul>
</li>
<li>Item 3</li>
</ul>

¥

ryandevilhorns · 11-13-2009, 02:11 PM

Quote:

Originally Posted by ¥åßßå

Or nest lists :

HTML Code:

<ul>
<li>item 1</li>
<li>Item 2
  <ul>
  <li>Item 2a</li>
  <li>Item 2b><li>
  </ul>
</li>
<li>Item 3</li>
</ul>

¥

I thought about trying that, but I have a different bullet icon for nested lists defined in my global css, I'd like the effect I asked about to be just on one page. Thanks though.

Quote:

Originally Posted by Pegasus

Try adding margin: 5px; to each <li>, like this:

<li style="margin: 5px;">Item 1</li>
<li style="margin: 10px;">Item 2</li>

And so on.

I think this is what I'm looking for, thanks for your help.

¥åßßå · 11-13-2009, 02:17 PM

Just override your global css?

HTML Code:

<style type="text/css">
.foo,
.foo ul{
list-style:none;
margin:0 0 0 1em;
}
</style>

...

<ul class="foo">++ rest of my example

¥

ryandevilhorns · 11-13-2009, 04:36 PM

Quote:

Originally Posted by ¥åßßå

Just override your global css?

HTML Code:

<style type="text/css">
.foo,
.foo ul{
list-style:none;
margin:0 0 0 1em;
}
</style>

...

<ul class="foo">++ rest of my example

¥

Thanks for the follow-up, let me play around with this and do some further reading. The other examples I can visualize, but I'm unfamiliar with this formatting and can't visualize it.