SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist NokX's Avatar
    Join Date
    Feb 2003
    Location
    Knoxville, TN
    Posts
    531
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Subsequent Instances

    let's say i have a nest of lists. i want each nested list to be indented 15px more than it's parent. how can i do this in CSS?

    i know i can do this...

    Code:
    ul {
         margin-left: 15px;
    }
    ul ul {
         margin-left: 15px;
    }
    ul ul ul {
         margin-left: 30px;
    }
    but i was hoping for something a bit more dynamic as i don't know how deep the nesting could go.

    any ideas?

  2. #2
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The way you have shown in the only way to do it via fixed-dimension margins. Relative-dimensions would work better in your favour, as the margin of the child would be relative to the parent

    Hope this helps

    James

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by redhillccwebmas View Post
    The way you have shown in the only way to do it via fixed-dimension margins. Relative-dimensions would work better in your favour, as the margin of the child would be relative to the parent

    Hope this helps

    James
    That's not exactly true. Using a fix size, an element will always (presuming it's not absolute positioned) nest based on it's parent so this can be achieved quite simply applying the margin to one <ul> and the rest will indent accordingly

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>List Example</title>
    <style type="text/css">
    * {
    	padding: 0;
    	margin: 0;	
    }
    ul {
    	margin-left: 15px;	
    }
    </style>
    </head>
    <body>
    <ul>
    	<li>Item one
    		<ul>
    			<li>Item two
    				<ul>
    					<li>Item three</li>
    				</ul>
    			</li>
    		</ul>
    	</li>
    </ul>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •