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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centered navigation list Groups

    Howdy. I have 4 groups of lists for navigating to an administration area. These groups are displayed to users according to level of membership. For example, if a user is just a viewer that want's to comment but can have a profile they will have only one group displayed to them. If a user is an administrator they have all 4 groups of navigation choices available. I would like to have these groups across the top of the page and centered where there is only one or all 4 groups are showing. Not stacked but horizontal.
    This code is from the first group and there are 4 more similar groups that can be displayed depending on user status. I can get them to center but they are stacked. Maybe I have to use php or javascript. Thanks for any suggestions.

    Code:
    <div class="nav_group">
    				<h2>General</h2>
    				<ul class="a">
    					<li> Dashboard</li>
    					<li>Edit Profile</li>
    					<li>Comments</li>
    					<li>Log out</li>
    				</ul>
    				
    				<h2>Display</h2>
    				<ul class="b">
    					<li>Site Wrapper</li>
    					<li>View Members</li>
    					<li>Upload Avatar</li>
    					<li>Log out</li>
    				</ul>
    </div>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,740
    Thanks
    22
    Thanked 1,837 Times in 1,821 Posts
    Hello TravelTech,

    That should be pretty easy to do with CSS only, no need for js to do what you've described so far.

    It's a perfect situation to use a Definition List since you have that h2 over each list. The dt can take the place of the h2 and that wraps everything inside a block level element that we can style.

    This is based on my Thumbnail Presentation. It will center as many lists as will fit in the width of the container, then line-break and center the next line of lists -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 100% "Comic Sans MS";
    	background: #FC6;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    	font-size: 0.8em;
    }
    #nav_group {
    	border-bottom: 3px double #f00;
    	margin: 0 0 100px;
    	text-align: center;
    }
    #a {background: #00f;}
    #b {background: #ff0;}
    	dl {
    		display: inline;
    		width: 100px;
    		margin: 5px;
    		vertical-align: top;
    		display: table-cell;
    		display: inline-table; 
    		display: inline-block;
    		text-align: left;
    	}
    		dt {
    			font-size: 1.4em;
    			text-decoration: underline;
    		}
    		dd {font-size: 1em;}
    </style>
    </head>
    <body>
        <div id="container">
            <div id="nav_group">
                <dl id="a">
                    <dt>General</dt>
                        <dd>Dashboard</dd>
                        <dd>Edit Profile</dd>
                        <dd>Comments</dd>
                        <dd>Log out</dd>
                </dl>
                <dl id="b">                    
                    <dt>Display</dt>
                        <dd>Site Wrapper</dd>
                        <dd>View Members</dd>
                        <dd>Upload Avatar</dd>
                        <dd>Log out</dd>
                    </dl>
            <!--end nav_group--></div>
        <!--end container--></div>
    </body>
    </html>
    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
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That worked like a charm! Thanks much.


  •  

    Posting Permissions

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