PDA

View Full Version : Top Navigational Bar II -> How to center the menu?



mikers
04-13-2005, 08:00 PM
http://www.dynamicdrive.com/dynamicindex1/topnavbar.htm,

Hi guys,

Please take a look at the setup of my new website and the problem will be clear right away (I think...): http://www.personaltraineronline.nl/test/

Maybe one of you can help me out with this strange 'problem':

As you could have seen, I recently implemented the Top Navigational Bar II script in my new website, but (when re-designing the visual appearing of the menu) it seems to be impossible to let the menu center into the browser-window so that it centers together with the rest of the website.

When reading the features at: http://www.dynamicdrive.com/dynamicindex1/topnavbar.htm, it says that deleting the two COMMENT-characters (//) from the setAlign-command in the line //myNavBar1.setAlign("center") will do the trick.

But infact nothing happens :(

The other lines that i've modified are:

- myNavBar1.resize(fullWidth);
- myNavBar1.moveTo(0, 50);
to
- myNavBar1.resize(780);
- myNavBar1.moveTo(7, 97)

Am I missing something or am I doing something wrong??

Uncomment //myNavBar1.setAlign("center") tomyNavBar1.setAlign("center") just won't do. I'm already 3 days looking for a solution...so I really hope someone can help me out :)

Thanks for the help guys!!!

PS. I'm using the navcond.js
PSS. Please feel free to download the website so you can take a closer look to all the scrips too (when necassery)

jscheuer1
04-14-2005, 07:52 AM
Well, there were several reasons:

1)That myNavBar1.setAlign("center") thing only centers the content of the menu within the menu. Good enough if the menu is not repositioned and spans the entire width of the page.

2) As mentioned in #1 your menu was repositioned, this introduces absolute positioning which is not very amenable to centering (get it right at one resolution/viewport size and it looks weird at another size/resolution.

3)The other elements on your page had absolute dimensions (widths) specified. This made it doubly hard to center anything in relation to them unless it was contained inside them, which this menu cannot be.

4) the widths you specified for the menu and sub menu items in the bar were too large to allow for much wiggle room when it came to centering the entire bar.

I've taken care of all these problems and will attach a .zip file with the updated (changed from absolute to relative widths) html page (navcent.htm) and your nav.js file - I had to alter the nav.js file to have less space per menu item and add a little bit of code that creates a true centering scheme for the bar. Use these two files with your navcond.js file and the two graphics. None of this will work in FF1.0.2 or NS7.2 as the original doesn't either. Good for IE6 and NS4.79 except your HTML code doesn't look so hot in NS4.79.

mikers
04-14-2005, 08:45 AM
Dear Jscheuer1,

I would like to thank you very much for your all time and help!! Appreciate it a lot!! Now I can go further with the site :D