Jump to content

How to indent li items?


dakke
 Share

Recommended Posts

I have a simple list:

<ul id="navbar"><li>1.</li>	<ul id="navbar">	<li>1.1.</li>	<li>1.2.</li>	</ul><li>2.</li><li>3.</li></ul>

I would like to get it indented as in item1 indent 5px, item2 indent 10px, item3 15px,... (+5) Item 1.1. 7px, item 1.2. 9px (+2).Tried doing something like:

#navbar ul li {	padding-left:5px; }#navbar ul li li {	padding-left:5px;}...

No result. Anyone any suggestions on how to do this? And is there a way to embed a math function in it? Like 'Get previous indent and multiply with 2/3.

Link to comment
Share on other sites

You haven't constructed your list correctly - the list item has to contain the child list. Also, only one element can have one id.

<ul id="navbar">	<li>1.<ul>		<li>1.1.</li>		<li>1.2.</li>	</ul></li>	<li>2.</li>	<li>3.</li></ul>

Your CSS should work now.

Link to comment
Share on other sites

Thanks and that indeed does work. However, I obviously was not clear enough.What I want is a result that looks like this:1. (+2)--2. (+2)----3. (+2)------4. (+2)-------4.1. (+1)--------4.2. (+1)Where "-" is 1px, So: all parents should be positioned +2px relative to the previous parent item. All childs should be positioned +1 relative to their parent.What would be very very cool is to implement math function (eg each parent item should be previous indent * 4). I guess that one can not create a kind of dynamic indent (as in to write it all in one 'simple' statement). I assume that I should indeed write the css for each item. Is their a way to add such a code (something like 'padding-left: (ul li) * 2; and so forth...EDIT: This last is possible by integraing PHP into the script. Check this URL for a beautiful (cause it's so simple) way of doing just that. Embed a php file as a css (instead of css file), write your PHP and embed the css in it. PHP and CSS

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...