css style - divide nav into left and right_问答_开发者

My goals:

I want to have #nav to be divide into menu-left and menu-right, and each has its max width
I want to make sure that #nav, menu-left and right are not statically fixed. So that it expands and shrinks according to settings of the users.
The output should be similar to what we see in the picture.

I am doing this in wordpress. I want to create an navigation or simply a horizontal menu at the very top.

What I want to do is to divide the original menu into two parts, as shown in the following picture.

http://i50.tinypic.com/zyaakl.jpg (The picture is quite big so I would leave it as a link)

A live demo is here http://www.i3physics.com/blog/?page_id=2

This is my css code

#nav {
 background-color: #444444;
 line-height: 35px;
 margin: 0 auto;
 overflow: hidden;
}

#nav ul {
 float: right;
 list-style: none;
 margin: 0 0 0 0;
}
#nav ul#menu-left {
 float: left;
 max-width: 700px;
}

#nav ul#menu-right {
 float: right;
 max-width: 500px;

}
#nav ul li {
 float: left;
 text-align: center;
 margin: 0;
 padding: 0 12px 0;
}
#nav ul li a, #nav ul li a:visited { 
 float: left;
 color: #ffffff;
 font-size: 11px;
 font-family: Verdana,sans-serif;
 line-height: 35px;
 font-weight: normal;
 font-style: normal;
 font-variant: normal;
 text-transform: none;
 text-decoration: none;
 text-align: start;
 text-indent: 0px;

}
#nav ul li a:hover {
 color: #ffffff;
 text-decoration: underline;
}

This is my sample code in header.php

<body>
<div id="nav">
  <ul id="menu-left"><?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?></ul>
  <ul id="menu-right"><?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?></ul>
</div>

What I want to do is to divide the original menu into two parts, as shown in the following picture.

http://i50.tinypic.com/zyaakl.jpg (The picture is quite big so I would leave it as a link)

So I thought about maximizing left and right. Then do margin-left and margining-right. But this is ugly. I want quality. It might ruin the display at a different resolution, and on a different monitor.

I even had tried this:

#nav ul#menu-left {
 float: right;
 max-width: 700px;
}

#nav ul#menu开发者_开发百科-right {
 float: left;
 max-width: 500px;

I will appreciate any help here. Thank you very much.

I'm not sure exactly what you are asking for, but if my guess is correct, you want something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
html, body {
 width:100%;
 margin:0;
 padding:0;
}
#wrapper {
 background-color:#444;
 width:100%;
}
ul.nav {
 overflow:hidden;
 list-style:none;
 padding:0;
 position:relative;
 width:600px; /* FOR a static width like Posh CSS */
 margin:0 auto;
}
li {
 margin:0 10px; /* Gap between LI elements 20px */
}
li.left {
 float:left;
}
li.right {
 float:right;
}
li a {
 color:#fff;
}
</style>
</head>
<body>
<div id="wrapper">
<ul class="nav">
 <li class="left"><a href="#">left</a></li>
 <li class="left"><a href="#">left</a></li>
 <li class="left"><a href="#">left</a></li>
 <li class="left"><a href="#">left</a></li>
 <li class="left"><a href="#">left</a></li>
 <li class="right"><a href="#">right</a></li>
 <li class="right"><a href="#">right</a></li>
 <li class="right"><a href="#">right</a></li>
</ul>
</div>
</body>
</html>

let me know if thats about right.

just add width:1200px; to #nav in your CSS file

Working here http://grab.by/58ZH

If you want to keep the dark row filling 100% width of the page:

HTML

<div id="nav">
  <div id="nav_wrapper">
    <ul id="menu-left">...</ul>
    <ul id="menu-right">...</ul>
  </div>
</div>

CSS

#nav ul #menu-left {
  float:left;
  max-width:700px;
}

#nav u l#menu-right {
  float:right;
  max-width:500px;
}
#nav_wrapper {
   margin: 0 auto;
   width: 1600px;
}

do you also want to add the extra row below?