Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Sep 2002
    Posts
    459
    Thanks
    0
    Thanked 20 Times in 20 Posts

    need help with multi-level menu

    After all this time I finally found a way to get my nested lists to look like individual rows. The problem is I'm having a hard time getting everything to
    line up to the left while padding the title for each level/row. I've tried and get big gaps on the left side and pushed out boxes on the right. Could someone
    help me straighten things out? I'm trying to make it liquid so it will fit to the window size. Thanks in advance, any help is greatly appreciated!!
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
            
     <title>Untitled</title>
    <style type="text/css">
    
    ul {
    list-style:none;
    margin:0;
    padding:0;
    }
    
    ul li{
    padding-left:20px;
    }
    
    
    </style>
    </head>
    <body>
    <div>
    <p class="error-message"></p>
    <b>[Demo Categories]</b>&nbsp;&nbsp;&nbsp;<a href="#"> ADD </a>
    <ul class="Level-1">
    <li>
    <div style="width: 100%;border-bottom: solid 1px black;padding: 4px 0px;">
    <div style="position:relative; float:right;">
    <span>Active</span>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Add </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Edit </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Move </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Copy </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Remove </a>
    </div>
    <a href="#">Item 1</a>
    </div>
    <ul class="Level-2">
    <li>
    <div style="width: 100%;border-bottom: solid 1px black;padding: 4px 0px;">
    <div style="position:relative; float:right;">
    <span>Active</span>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Add </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Edit </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Move </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Copy </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Remove </a>
    </div>
    <a href="#">Item 1-1</a>
    </div>
    </li>
    <li>
    <div style="width: 100%;border-bottom: solid 1px black;padding: 4px 0px;">
    <div style="position:relative; float:right;">
    <span>Active</span>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Add </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Edit </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Move </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Copy </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Remove </a>
    </div>
    <a href="#">Item 1-2</a>
    </div>
    <ul class="Level-3">
    <li>
    <div style="width: 100%;border-bottom: solid 1px black;padding: 4px 0px;">
    <div style="position:relative; float:right;">
    <span>Active</span>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Add </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Edit </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Move </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Copy </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Remove </a>
    </div>
    <a href="#">Item 1-2-1</a>
    </div>
    </li>
    <li>
    <div style="width: 100%;border-bottom: solid 1px black;padding: 4px 0px;">
    <div style="position:relative; float:right;">
    <span>Inactive</span>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Add </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Edit </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Move </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Copy </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Remove </a>
    </div>
    <a href="#">Item 1-2-2</a>
    </div>
    <ul class="Level-4">
    <li>
    <div style="width: 100%;border-bottom: solid 1px black;padding: 4px 0px;">
    <div style="position:relative; float:right;">
    <span>Inactive</span>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Add </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Edit </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Move </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Copy </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Remove </a>
    </div>
    <a href="#">Item 1-2-2-1</a>
    </div>
    </li>
    <li>
    <div style="width: 100%;border-bottom: solid 1px black;padding: 4px 0px;">
    <div style="position:relative; float:right;">
    <span>Inactive</span>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Add </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Edit </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Move </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Copy </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Remove </a>
    </div>
    <a href="#">Item 1-2-2-2</a>
    </div>
    </li>
    <li>
    <div style="width: 100%;border-bottom: solid 1px black;padding: 4px 0px;">
    <div style="position:relative; float:right;">
    <span>Inactive</span>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Add </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Edit </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Move </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Copy </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Remove </a>
    </div>
    <a href="#">Item 1-2-2-3</a>
    </div>
    </li>
    </ul>
    </li>
    <li>
    <div style="width: 100%;border-bottom: solid 1px black;padding: 4px 0px;">
    <div style="position:relative; float:right;">
    <span>Inactive</span>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Add </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Edit </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Move </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Copy </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Remove </a>
    </div>
    <a href="#">Item 1-2-3</a>
    </div>
    </li>
    </ul>
    </li>
    <li>
    <div style="width: 100%;border-bottom: solid 1px black;padding: 4px 0px;">
    <div style="position:relative; float:right;">
    <span>Active</span>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Add </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Edit </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Move </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Copy </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Remove </a>
    </div>
    <a href="#">Item 1-3</a>
    </div>
    </li>
    </ul>
    </li>
    <li>
    <div style="width: 100%;border-bottom: solid 1px black;padding: 4px 0px;">
    <div style="position:relative; float:right;">
    <span>Active</span>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Add </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Edit </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Move </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Copy </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Remove </a>
    </div>
    <a href="#">Item 2</a>
    </div>
    <ul class="Level-2">
    <li>
    <div style="width: 100%;border-bottom: solid 1px black;padding: 4px 0px;">
    <div style="position:relative; float:right;">
    <span>Inactive</span>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Add </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Edit </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Move </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Copy </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Remove </a>
    </div>
    <a href="#">Item 2-1</a>
    </div>
    </li>
    <li>
    <div style="width: 100%;border-bottom: solid 1px black;padding: 4px 0px;">
    <div style="position:relative; float:right;">
    <span>Inactive</span>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Add </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Edit </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Move </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Copy </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Remove </a>
    </div>
    <a href="#">Item 2-2</a>
    </div>
    </li>
    </ul>
    </li>
    <li>
    <div style="width: 100%;border-bottom: solid 1px black;padding: 4px 0px;">
    <div style="position:relative; float:right;">
    <span>Active</span>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Add </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Edit </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Move </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Copy </a>
    &nbsp;&nbsp;&nbsp;
    <a href="#"> Remove </a>
    </div>
    <a href="#">Item 3</a>
    </div>
    </li>
    </ul>
    <div>
    </body>
    </html>
    NO Limits!! DHCreationStation.com
    ------------------------------------------------------------
    Broken items wanted for tinkerin'! PostItNow@BrokenEquipment.com
    Global Complaint Dept.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello c1lonewolf,
    I'm not sure exactly what you're asking but I can pad an "item" on my end like this -
    Code:
    <div style="border-bottom: 1px solid black; padding: 4px 0 0 10px; ">
    Notice I removed the width: 100%;

    Hate the inline styles. It's much easier to work on if you style things from a .css file.

    Also, I think I would do this with a dl instead of a ul, something like this -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 0 auto;
    	padding: 0 0 300px;
    	background: #999;
    }
    dl {
    	overflow: auto;
    	background: #fff;
    }
    	dt {
    		padding: 0 0 0 4px;
    		float: left;
    	}
    		dd {float: right;}
    			dd span,
    			dd a {margin: 0 10px 0;}
    </style>
    </head>
    <body>
        <div id="container">
    		<dl>
    			<dt><a href="#">Item 1</a></dt>
    				<dd>
    					<span>Active</span>
    					<a href="#"> Add </a>
    					<a href="#"> Edit </a>
    					<a href="#"> Move </a>
    					<a href="#"> Copy </a>
    					<a href="#"> Remove </a>
    				</dd>
        <!--end container--></div>
    </body>
    </html>
    Last edited by Excavator; 03-01-2014 at 08:20 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Sep 2002
    Posts
    459
    Thanks
    0
    Thanked 20 Times in 20 Posts
    I only use inlines when first developing...how would this work using nested items like in a category list.
    Plus you have have <dl> tag but no closing tag???
    NO Limits!! DHCreationStation.com
    ------------------------------------------------------------
    Broken items wanted for tinkerin'! PostItNow@BrokenEquipment.com
    Global Complaint Dept.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Forgot the </dl>...was in a hurry. You can add that in if you like.

    I'm just partial to dl's. As far as nested items, you can go quite a few layers deep before you need to start adding extra specificity with classes. Look at my example here with a ul nested in a dl.

    I only use inlines when first developing...
    That would make no sense with my workflow so it's foreign to me. What program do you edit your code in?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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