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 (www.jmfloorcovering.com).

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: http://www.jmfloorcovering.com/test/header_with_nav/header_nav.html

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 home page)

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 HERE. 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
  • 239 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by bkendall
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.