www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] centering navigation bar

Hybrid View

  1. #1
    Join Date
    Oct 2008
    Posts
    11

    resolved [RESOLVED] centering navigation bar

    hello,
    I have a javascript navigation bar I am trying to center in a <div>. Because I don't want to fix a width to the div, I am using percentages which -from what I read- makes it impossible to use CSS to center the bar. I have tried all the methods mentioned in CSS forums to find out for myself.
    It has been a while (a few years) since I did any web developing, my Dreamweaver is out of date (and I am out of touch) with HTML 5 and CSS3. Prior to that, the software I used to create the menu had a plug-in for DW and it centered it automatically. Now, I need to do it manually and can only believe that it is a function of javascript.
    To keep it simple, here is my example:

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

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

    I tried using "ul {display:inline-block;}", but that didn't work, either.

    Any help is appreciated.

    Jake

  2. #2
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    Your experience with using Dreamweaver should have taught you that those kinds of programs have a very big flaw. We become lazy and do not learn the intricacies of web development.

    Now your question is how to centre a navigation bar which is in a div.

    The css for the divís class=navbar can be removed as it does nothing beneficial as presented.

    As for the unordered listís css, surely you mean to apply it to the list items.
    Code:
    li{display:inline-block;}
    To centre them try text-align on the unordered list and then the result will depend on how many list items you eventually have within the div.

  3. #3
    Join Date
    Dec 2010
    Posts
    60
    First off, I would suggest not using Javascript for a navigation. This is not a good idea because:

    1. Spiders cannot parse Javascript
    2. If spiders cannot parse Javascript, Google has trouble
    3. People who have no javascript, or disabled javascript cannot use the links.

    As for centering your list if you don't want the circles for the ul use this css

    Code:
    .navbar ul{
    list-style-type: none;
    }
    #.navbar ul li{
    float: left;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
    }
    MY BLOG:
    HTML Code:
    <a href="http://teststuff.freehostingcloud.com">click here to read my game progress</a>

  4. #4
    Join Date
    Oct 2008
    Posts
    11
    Thanks guys, but none -of-the-above worked.

    To the comment about the "lesson," it might be helpful to realize that I don't portend (nor is it my aspiration) to be a web-developer guru. For me, the pages I am creating are purely utilitarian and not a goal, in and of themselves; hence, I've no need of being more technical than time allows. I do want the pages to be free of errors while serviceable.. While I tip my hat to those proficient ones, for my purposes I am working smarter, not harder.

    And I do have a means to support non-javascript users, as well.

    To that end, my resolution came with just a short, simple markup line within the div that solved the problem. But I sincerely do appreciate your responses and attempts to be helpful.

    Blessings,
    Jake

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles