Home/ Questions/Q 8243771
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T21:37:36+00:00

I have come across the following problem. I have a horizontal menu bar I

  • 0

I have come across the following problem. I have a horizontal menu bar I would like
to style towards the top of the page. Here is what its html is like:

<body>
  <div id="container">
    <div id="left">
    </div>
    <div id="center">
      <!-- stuff above header here ... -->
      <div id="header">
        <ul>
          <li class="first"><a href="#">Products</a></li>
          <li><a href="#">Customers</a></li>
          <li><a href="#">Invoices</a></li>
        </ul>
      </div>
      <!-- stuff below header here ... -->
    </div>
    </div id="right">
    </div>
  </div>
</body>

I want it to appear like this:

+--------------------+-----+--------------------+-----+--------------------+
+                    +     +                    +     +                    +
+      Products      +  /  +      Customers     +  /  +      Invoices      +
+                    +     +                    +     +                    +
+--------------------+-----+--------------------+-----+--------------------+

Basically, I need the following:

  1. the whole page is fixed width (960px) in the center (id=”center”)
    and has expandable variable-size sidebars (id=”left” and id=”right”).

  2. the navigation bar spans the center div and is hence also 960px wide

  3. the navigation bar has a background image which is 960px wide and has
    a height which is known (not sure if the fact the height of the navigation
    bar is known makes a difference to the CSS styling).

  4. The parts labeled “/” are images which display this “/” character. These
    images are the same height as the navigation bar and have a width of 30px.

  5. I want the area containing the each one of the links Products, Customers,
    and Invoices, to be the same width, regardless of differences in the width
    of the text. The width of each should be 300px.

  6. If one of the links has a name that is very long (e.g. if we had
    “Super Long Heading for the List of Products” instead of just “Products”
    in one of the headings then the text should not wrap to the line below,
    but should instead be cut off (perhaps displaying an ellipsis at the end
    of the text). In practice we want the text to fit completely all the time,
    given that the width of the center div is fixed, so assigning a smaller
    font is imperative.

  7. I want each of the Products, Customers, and Invoices links to be centered
    vertically as well as horizontally within its bounding box.

That’s all, this is all I have been trying to do.

But I am having problems centering the text, in part because I can never tell
whether I should apply a property to an element (e.g. a, or to its parent div,
or to its grandparent div), and I don’t know whether some properties are inherited
all the way down the DOM tree or whether inheritance only depends on which elements
are adjacent in the DOM tree as being involved in a parent-child relationship.

So far I figured out how to take care of 1. as follows:

  div#left { float: left; }
  div#right { float: right; }
  div#center { width: 960px; margin: 0px auto; }

I have also sliced the header background and header divider from the PSD/JPG mockup.

However, I cannot get the rest to work, in particular 5. and 7.

Any suggestions?

OK, here is what I ended up doing:

In this case, since the image is a separator and not an item indicator, you
can not set it with list-style-image inside the ul element because that would
mean also having the image at the right of the first image, which would produce
the wrong effect.

So my solution was to clear: both on the containing div to make sure it appears on
a line by itself. Then set the ul’s list style to none. And then if W is the width
of the header div and there are N hyperlinks in the menu, then compute:

floor({W – [(N – 1) * SEPARATOR_IMAGE_WIDTH]} / N) to compute the width of each
link containing block, and set it for each li element. Also set a padding of
SEPATATOR_IMAGE_WIDTH and a background for each li except for the first one.

Then set the height for the ul, li, and a link to the height of the separator image,
to keep it from collapsing. You can use the inherit attribute instead of the line
height if you don’t want to write down 40px all the time.

Center the text in the a link with text align and use some top padding to move the text
a little bit down from the top (as I couldn’t find a better way to center the text
vertically within those 40px, any ideas here welcome)

  div#header_middle { clear: both; }
  div#header_middle ul { list-style: none; background: url(images/header_middle_navbar_background.jpg); height: 40px; }
  div#header_middle ul li { float: left; padding-left: 14px; background: url(images/header_middle_entryseparator.jpg) no-repeat; height: 40px; }
  div#header_middle ul li.first { padding-left: 0px; background: none; }
  div#header_middle ul li a { display: block; float: left; text-transform: uppercase; font-size: medium; width: 110px; text-align: center; padding-top: 8px; height: 40px; color: white; }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is a start, show us that you can at least check a few more numbers off that list:

    div#header {background-color: green; text-align: center;}
#header li { display: inline-block; }
#header li a { width:300px; display: block; text-align: center; background-color: red;}

    By the way, why not just Google a horizontal-navigation-bar and copy it?

    • 0