Centered navigation list Groups

TravelTech

01-26-2010, 02:09 PM

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.

<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>

Excavator

01-26-2010, 04:33 PM

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 (http://nopeople.com/CSS/thumbnail%20presentation/index.html). 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 -
<!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>
</div>
</div>
</body>
</html>

TravelTech

01-26-2010, 09:14 PM

That worked like a charm! Thanks much.:thumbsup: