1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to I create a simple navbar for my site??

Discussion in 'HTML & Website Design' started by fishtail1776, Sep 24, 2008.

  1. #1
    I need to know how to create a simple navbar for my site. At the time being all I really want or need is just one that includes links on the right hand side of my site pages. I would like to create a navbar so I can create new page links as I need them without having to add them to each page of my site.

    I wasn't sure if I should use JavaScript Code, CSS, or What exactly. I have seen codes for navbars that use an unordered ("ul") code, but I really don't understand them very well. I have no clue how to go about designing them at all.

    I currently have an example page for you to view (gives you an idea of how I want my navbar to appear on the right hand side of the page):
    http://www.jabsfreelanceworld.com/indexdraft.html

    BTW, my site currently views best in IE 6.0 and 7.0 and FF 3.0 for now.
    SEMrush
     
    fishtail1776, Sep 24, 2008 IP
    SEMrush
  2. steve875

    steve875 Peon

    Messages:
    91
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Here is how I would do it. I might be a little excessive on some parts, but I think it should work.

    The css style:

    <style>
    a:link {
    text-decoration: none; <-= removes bullet points
    color: black;
    }

    a:visited { text-decoration: none; }
    a:hover { text-decoration: none; color: blue; }
    a:active { text-decoration: none; }

    #navigation {
    width: 220px; <-= width of the "box"
    float: right; <-= you want it on the right side
    text-align: left;<-= doesn't have to be left

    #navigation p {
    color: black; <-= font color
    font-style: normal;
    font-size: 11px;
    </style>

    Now for the coding:

    <div class="navigation">
    <ul>
    <li><a href="LINK HERE">LinkName</a>
    <li><a href="LINK2 HERE">LinkName2</a>
    </ul>
    </div>
     
    steve875, Sep 24, 2008 IP
  3. polop

    polop Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi there !
    What html editor are you using?
    Because:
    I am using Namo webeditor and when you start creating a website, you can use the site wizard and create an outline structure of your site. let´s say you create 7 pages in there.

    Then you save the structure and go and edit the pages for content you can insert a navigation bar wherever you want and include just the pages you want you can have vertical or horizontal navigation bars, have rollover effects, and much more. You insert that navagation bar onto every page you got. Just once!
    Then as you add pages in the site wizard they will automatically show in your navigation bar on every page.
     
    polop, Sep 26, 2008 IP
  4. modulis

    modulis Guest

    Messages:
    46
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    modulis, Sep 26, 2008 IP
  5. steve875

    steve875 Peon

    Messages:
    91
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thank you. :)
     
    steve875, Sep 26, 2008 IP
  6. fishtail1776

    fishtail1776 Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thank you very much for your help so far, everyone. I probably will try one of the options given to me via your replies. My goal is to be able to just include a navbar code on the pages of my site that I have so far, and then each time I add a new page all I need to do is add it once. Is that what this code given to me is for (given by Steve)? Or others?

    I mean, I wonder if once I add this code if then all I need to do is add new page navbar links to my index page or what? My goal is to not have to spend time adding it to every single new page I create, and/or having to keep copying and pasting code every time I create a new page. Is that what this code is for? Just wondering.

    I hope so because it would make adding new pages much easier. Otherwise, maybe perhaps I would ask a question about this in the Javascript section?? (or some other coding language).
     
    fishtail1776, Oct 6, 2008 IP
  7. submitmaster

    submitmaster Well-Known Member

    Messages:
    329
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    103
    #7
    just use blogger or wordpress and it creates your navbar already, plus you can update your site with just a few clicks ;)
     
    submitmaster, Oct 6, 2008 IP
  8. bob25

    bob25 Well-Known Member

    Messages:
    1,519
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    128
    #8
    You can use php includes. Just add the code to every page you create then all you need to do is update one txt file. You can add it to HTML pages, but you'll probably need to modify the htaccess file. Let me know if you're interested and I'll dig up the files and code.
     
    bob25, Oct 6, 2008 IP
  9. nicangeli

    nicangeli Peon

    Messages:
    828
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Im not really going to look at that code, just a few pointers.

    Your applying a class to a <div> so your css should be .navigation not #

    You use the # paired with id, e.g. <div id="navigation">
     
    nicangeli, Oct 6, 2008 IP
  10. typingmums

    typingmums Well-Known Member

    Messages:
    1,445
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    140
    #10
    typingmums, Oct 7, 2008 IP