dakke Posted August 18, 2008 Share Posted August 18, 2008 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 More sharing options...
Synook Posted August 19, 2008 Share Posted August 19, 2008 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 More sharing options...
dakke Posted August 19, 2008 Author Share Posted August 19, 2008 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 More sharing options...
dakke Posted August 19, 2008 Author Share Posted August 19, 2008 Got a reply of someone and mentioned it could be done with adjacent sibling selectors but would not work in IE6.Thanks anyway for the support. Need to get a work around. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.