centering javascript menu w/CSS

Discussion in 'CSS' started by jake7363, Jan 14, 2013.

  1. #1
    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
     
    jake7363, Jan 14, 2013 IP
  2. goliath

    goliath Active Member

    Messages:
    308
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    60
    #2
    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.
     
    goliath, Jan 15, 2013 IP
  3. spyderfx

    spyderfx Greenhorn

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #3
    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.
     
    spyderfx, Jan 15, 2013 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    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.
     
    deathshadow, Jan 15, 2013 IP
  5. goliath

    goliath Active Member

    Messages:
    308
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    60
    #5
    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...
     
    goliath, Jan 15, 2013 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    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.
     
    deathshadow, Jan 16, 2013 IP