/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] centering navigation bar

Copy linkTweet thisAlerts:
Jan 16.2013

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

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@grumpyOleManJan 16.2013 — 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;}
[/CODE]
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.
Copy linkTweet thisAlerts:
@pdiddles03Jan 16.2013 — 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;
    }
    [/CODE]
    Copy linkTweet thisAlerts:
    @jake7363authorJan 17.2013 — 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
    ×

    Success!

    Help @jake7363 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.1,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...