tags:

views:

60

answers:

2
Q: 

css style - divide nav into left and right

My goals:

  1. I want to have #nav to be divide into menu-left and menu-right, and each has its max width

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

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

A: 

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?

GerManson  2010-06-25 22:39:44
Hi. I appreciated your help. I am sorry if I confused you.From the picture, the future blog entry (the writing) is going to be shown within the width of the horizontal double line bars that you see in the picture. Simply state, that is the width of the remaining header and content body. As you said, it was set at max 1200px.Thus, the nav menu that I intended to make, is maximize for whatever resolution the user is viewing at.So, the content of the nav menu is divided into left and right, as shown in the picture. I am eager to find a way to make left and right at max, and like the pic
JohnWong  2010-06-25 22:50:16
Hi. Again thank you for the fixed. I tried and still not working right for my purpose. 1. I want to have #nav to be divide into menu-left and menu-right, and each has its max width 1. 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. 2. The output should be similar to what we see in the picture.
JohnWong  2010-06-25 23:33:11
+1  A: 

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"&gt;
<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.

edl  2010-06-25 23:42:33
Hi. Thank you. Yes. Here is my intention. http://i48.tinypic.com/vy9yli.jpg I just added a few more left and right. As you can see, I want to position left and right content as close to the center (where the left and right are divided), and just some px distance apart. To another words, if this is the line [] is the width, and | is the divider, then [empty empty empty <----- empty empty | empty empty -----> empty empty empty] where the arrow represents the direction of which the content of left and right will expand.
JohnWong  2010-06-26 00:02:23
this is the demo i tried to learn. http://poshcss.com/ I am interested in the nav part only.
JohnWong  2010-06-26 00:03:23
poshcss.com is a fixed width nav. replacing `min-width` and `max-width` with just a simple `width` attribute in `ul.nav` will get you similar results: check the edit above.
edl  2010-06-26 01:05:54
Hi. edl, sorry for this late response. Thank you. Since I don't like to manually add li and links myself, which is bad for wordpress themeing, i went with my original code. I took poshcss' idea, make the central one shorter (around 500-600px), and then cover the entire top nav with div id="nav-wrapper" which is width: 100%, and close both nav and nav-wrapper div before move to the body. :) and I solved my problem. you can look at it.http://www.i3physics.com/blog/
JohnWong  2010-07-02 05:12:57

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?