CODEWITHSUNDEEP
csslayoutxhtmlheader
user1527429
user1527429

Reputation: 727

CSS: how to properly style horizontal menu bar with background image and centered entries separated by icons

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

Upvotes: 1

Views: 2438

Answers (1)

Todilo
Todilo

Reputation: 1333

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?

Upvotes: 0

Related Questions