Member Avatar for Grump

I am in the process of overhauling one of my websites and one of my priorities is to get away from tables. Of course, I didn't make that decision until I had already done a fair amount of work with a mixture of tables and divs ().

To make the transition easier, I am trying to do one thing at a time. I changed the header slightly and now have it displaying the way I would like (in the test page below, not on the home page). The navbar, on the other hand, is causing me to lose hair and sleep. If you visit the home page I linked to above, you can at least see what the navbar is s'posed to do -- how the popup menus are positioned over the navbar.

Now look at my test page:

As you can see, the popups are waaaay off, no matter what size window you view it in. The navbar is supposed to be centered and falls 15px above the bottom of the header background graphic. It seems to be positioned correctly and centered. The popup menus also at least popup on the right horizontal plane. They just don't position themselves over the buttons like they should (see the )

Not only that, Macromedia Fireworks, which I used to make the navbar, wrote the code using tables (the popup code is in divs/css though). I was hoping someone could help me fix the alignment problem and also help me change the code to div/css.

The css code is too lengthy, but you can download it . The navbar related code is near the bottom. Viewing the page source, of course, will show you the pertinent XHTML.

I hope someone can help. Thank you for any suggestions.

Grump

  • 2 Contributors
  • 4 Replies
  • 249 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by bkendall

Dani AI

Generated

Short diagnosis: the popups are most likely absolutely positioned with fixed left offsets instead of being positioned relative to each menu item. That makes them sit where Fireworks (or the original table layout) placed them, not where a centered, fluid navbar needs them to be. ’s symptoms (popups appear on the correct horizontal plane but not over each button) point to the same root cause that hinted at: use relative positioning rather than hard-coded pixel offsets.

A simple, robust pattern is: put each submenu inside its parent menu item, make that menu item position: relative, and make the submenu position: absolute so its left/top are calculated from the button itself. Example markup and CSS:

<ul id="nav">
  <li>
    <a href="#">Item</a>
    <div class="submenu">...</div>
  </li>
</ul>

#nav { text-align: center; list-style: none; margin: 0; padding: 0; }
#nav li { display: inline-block; position: relative; }
#nav li .submenu { position: absolute; left: 0; top: 100%; display: none; }
#nav li:hover .submenu { display: block; }

Practical checklist while you rebuild or fix the exported code:

  • Move any popup DOM nodes so they are children of the corresponding <li> (not floating elsewhere).
  • Remove pixel-based left offsets that were baked into the export.
  • Verify no ancestor has unexpected position or CSS transforms; the nearest positioned ancestor is what the submenu will use.
  • Test resizing and different view widths; use left: 0 (or left: 50% plus transform: translateX(-50%) for a centered submenu) rather than page-wide pixels.
  • For legacy IE quirks, use floating <li> or the inline-block hacks (or simply float:left and center the container) if needed.

Use the Fireworks/CSS export only as a starting point. Rebuild the nav with semantic UL/LI and the relative/absolute pattern above to get fluid, resolution-independent popups that stay aligned over each button.

Member Avatar for Grump

Does no one have any suggestions for this? Is it in the wrong forum?

Grump

Member Avatar for bkendall

Does no one have any suggestions for this? Is it in the wrong forum?

Grump

It looks like you just have the positioning off for the popup menus. I would find the section of code that deals with the popups and there should be some pixel dems there and play with the numbers to see if you can move the position of the popps around.

Another solution, if you have FW 8 is to change the export setting in the export dialog to css layers which will convert all of your tables to css for you and may give you a start on understanding layers better.

Member Avatar for Grump

Thanks for your reply, bkendall.

The output from the css layers export positions the whole navbar on the left side. There is also no javascript with it, so the buttons don't roll over or pop up. I know where the previous export's code is governing the popup positioning, but adjusting it will not make the navbar fluid. A visitor with a different browser resolution will have the popups in the wrong position again.

I posted here hoping someone could help me learn how to position the popups in a centered navbar in a fluid design -- so they popup correctly in any browser at any resolution. Maybe someone else will offer a suggestion.

Thank you,

Grump

Member Avatar for bkendall

First of all you need to have a little patience, I will do my best to give you a hand and I am sure there others around as well.

It sounds like you are looking for relative positioning and for that you need to use some layers. The best way to do this is with CSS this is a good place to start with CSS menus http://www.meyerweb.com/eric/css/edge/menus/demo.html

Also you can google css menus and come up with some good examples. Post your code as you go along and we will give you a hand.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.