Evenly space navbar.

  • digitalruse

    (@digitalruse)


    19 years, 1 month ago

    I have used the navbar template provided by the Codex, except adding in a background image as opposed to a flat color.

    What I am trying to do now is make it so that the “buttons” are evenly spaced across the top. Wether that be center justified or left justified, I haven’ decided.

    I assume it is a trick in the padding for the css, but setting it on auto makes everything all scunched together.

    CSS for navbar:

    #navmenu {
    text-align: right;
    }

    #navmenu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    }

    #navmenu li {display: inline; }

    #navmenu ul li a {
    font-family: "impact", "arial black";
    font-size: 150%;
    font-weight: ;
    margin: 4px;
    padding: 5px 15px 5px 15px;
    color: black;
    background: url("/images/cubes.gif") no-repeat center;
    }

    #navmenu ul li a:hover {
    text-decoration: none;
    color: #06c;
    }

    Code calling Navbar: (Apostrophes used to prevent the anchors from getting eaten)

    <div id="navmenu">

    • <'a href="<?php echo get_settings('home'); ?>">news
    • <'a href="/links">links
    • <'a href="/gaming">gaming
    • <'a href="/about">about
    • <'a href="/?page_id=190">downloads
    • <'a href="/archives">archives
    • <'a href="/wp-gal">gallery

    </div>

    Thanks
    -DR
    http://www.theruse.net

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter digitalruse

    (@digitalruse)

    19 years, 1 month ago

    It ate the <‘li>s, so here is the code again:


    <div id="navmenu">
    <'ul>
    <'li><'a href="<?php echo get_settings('home'); ?>">news<'/a><'/li>
    <'li><'a href="/links">links<'/a><'/li>
    <'li><'a href="/gaming">gaming<'/a><'/li>
    <'li><'a href="/about">about<'/a><'/li>
    <'li><'a href="/?page_id=190">downloads

    <'li><'a href="/archives">archives<'/a><'/li>
    <'li><'a href="/wp-gal">gallery<'/a><'/li>
    </'ul>
    </div>

    Sorry for the apostrophes, again, to stop the forums from eating tags.

    -DR

    jinsan

    (@jinsan)

    19 years, 1 month ago

    you could use nbsp at the end of each li or just set a defined value instad of auto. just play with the settings. you could try changeing your nevmenu from text-align right to center and then adding padding/margin to the left and right hand side.

    Thread Starter digitalruse

    (@digitalruse)

    19 years, 1 month ago

    I just tried that (the centering and padding) you can see the result on my site.

    A quick and VERY dirty way might be to put enough nbsp’s around shorter titles so that they are as “long” as the longest one. That seems fairly counter intuitive though.

    I also tried using “justified” and that didn’t seem to so anything. :/

    -DR

    Thread Starter digitalruse

    (@digitalruse)

    19 years, 1 month ago

    The ghetto nbsp thing does work, but I think it makes the code sloppy… there has to be a better way! >.<

    -DR

    Thread Starter digitalruse

    (@digitalruse)

    19 years, 1 month ago

    It is almost like I need to find a way, aside from using nbsp, to make it so that every LI has a ‘set’ width, sort of like a table cell, that is totally independant of how long the LI’s text is.

    -DR

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Evenly space navbar.’ is closed to new replies.