centering javascript menu w/CSS

Hello,
It's been quite a long time since I did any web development and I have forgotten things, plus things have changed a bit. Apologies up front if I miss the obvious.

I have a javascript menu (3rd party) that I am trying to center in a div.

I am using the following:

HTML:

<div class="navbar">
<script type="text/javascript" src="navbars/navTop/myscript.js"></script>
</div>

CSS:

.navbar {
display: block;
width: 100%;
margin: 0 auto;
}

(I also tried using "text-align:center;" - but that didn't work, either.)

What am I missing??

Thanks,
Jake

 

If centering the generated menu with text-align didn't work you may have to go into the script that generates the menu and get the name of some objects from there so that you can write CSS for what is generated.

Your width and margin setting there are for the navbar div itself but don't affect how the content is displayed within the div.

If your menu is consistent (stays the same width) you can fix the width of the div to the width of the menu, instead of 100% container width, and then center the div before the menu is rendered.

 

Text-align only works on inline and inline-block elements. An element that has 100% width isn't going to have any margins to set either, so margin: 0 auto won't work the way you have it pasted in. I would suggest you use firebug (Firefox) or developer tools (Chrome, IE) to find out what elements are being generated by the script, then apply your CSS to that. You can usually access the tools by pressing f12.

 

My question would be why are you wasting javascript on doing CSS' job in the first place? Script generated menus were a bad idea a decade and a half ago... they have no place on a modern website. The only reason for scripting to even be present is to give IE6/lower a small boot in the patoot. (which a LOT of developers have stopped doing!)

Of course without seeing the script you are using, the menu you have designed, and the page it's on, ANYTHING we tell you will be little more than wild guesses... as spyderfx suggested you'd have to see the markup the script is making before you could figure on how to style it -- and if it's built with floats you aren't going to be centering jack.

... and yeah, that width:100% means it's the full width, making the auto side margins pointless as there's nowhere to PUT side margins.

 

If CSS can generate a dynamic menu I'm a noob too. IS that CSS 4? 7?

Credit where credit's due, though he tripped one of your hot buttons - he's got a styling issue and he's right there trying to fix it in the CSS...

 

If by "dynamic" you mean generated via code common to all pages (DHTML) -- for a menu that's as big a no-no as using flash for it. Search engines may not see it (google's gotten better about that, others not so much), screen readers probably won't see it -- the rather large portion of people out there who intentionally block scripting might not even know there is a menu.

Again why scripting should be used to enhance functionality, NOT SUPPLANT IT!

Pretty much if you need that type of functionality, that's server-side scripting's job -- not client-side.