0

Here I have my website: http://gyazo.com/56e069ebf8b5bd61ee30523886180b88

There are a number of issues with the nav bar.

  1. You can see that the text or nav bar is not horizontally centered, as indicated by the hover (which is equal on top and bottom)

  2. There is to much space in between the text, (and this spacing is the only way I've found works without the text moving around when highlighting or hovering.

  3. The <.br> spacing on the drop down menu is too spaced apart.

So for 1. is there a way I can make the text or the nav bar (not sure what is the cause) centre so the hover looks more equal (horizontally)

For 2. Is there a way I can close the gap between the text, while still keeping the same padding settings, and so it doesn't move the text around when I use the hover function.

And 3. Is there a way to make the <.br> have half the space it currently uses

I've also added a jsfiddle if that helps: http://jsfiddle.net/d1a5eshs/

HTML code for the nav bar:

<!--TOP NAV BAR SECTION-->
            <div id="nav_bar">
                <ul>
                    <li><a href="index.html">HOME</a>
                    </li>
                    <li><a href="status.html">STATUS</a>
                    </li>
                    <li><a href="info.html">INFO</a>
                    </li>
                    <li><a href="#">GAMEMODES</a>

                        <ul>
                            <li><a href="survival.html">SURVIVAL</a>
                            </li>
                            <li><br><a href="pure-pvp.html">PURE-PVP</a>
                            </li>
                            <li><br><a href="gamesworld.html">GAMESWORLD</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="rules.html">RULES</a>

                    </li>
                    <li><a href="vote.html">VOTE</a>

                    </li>
                    <li><a href="contact.html">CONTACT</a>

                    </li>
                </ul>
            </div>

And the CSS for the nav bar:

/*TOP NAV BAR SECTION*/
#nav_bar {
    background-color: #a22b2f;
    padding:1px;
    box-shadow: 0px 2px 10px;
    height:45px;
    }         
#nav_bar ul li {
    display: inline-block;    
}
#nav_bar ul li a {
    color: white;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    margin-left:10px;
    padding-bottom:13px;
    padding-top:17px;
    padding-left:10px;
    padding-right:10px;
    margin-bottom:30px;
}
#nav_bar ul li ul {
    display: none;   
}
#nav_bar>ul>li>a:hover {
    background:#8c1b1f;
    padding-bottom:13px;
    padding-top:13px;
    padding-left:10px;
    padding-right:10px;   
}
#nav_bar>ul>li>ul>li>a:hover {
    background:#c9c9c9;
    padding-bottom:5px;
    padding-top:5px;
    padding-left:5px;
    padding-right:5px;      
}
#nav_bar ul li:hover ul {
    display: block;
    position: absolute;
    padding: 0px;
    background: #e2e2e2;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:0px;
    padding-right:10px;
    border: 1px solid black;
    border-radius:5px;
}
#nav_bar ul li:hover ul li {
    display: block;

}
#nav_bar ul li:hover ul li a {
    color: black;
    font-size:12px;
    font-weight:bol;
    margin-left:-20px;
    padding-bottom:5px;
    padding-top:5px;
    padding-left:5px;
    padding-right:5px;
}
  • http://jsfiddle.net/9058vefk/ is it something like this you were looking for? – Sai Oct 24 '14 at 19:15
  • I'm afraid that breaks the entire website. –  Oct 24 '14 at 20:35
  • you dont have to use the
    in your inner list. adjust line-height to get desired result     – Sai Oct 24 '14 at 20:38
  • Ahh thats one issue fixed at least. Could you tell me how I could do that, cause I'm not so sure. –  Oct 24 '14 at 20:40
  • as far as centering the main ul li , divide the entire div (nav_bar) into 7 equal smaller divs and apply that space to each nav item – Sai Oct 24 '14 at 20:40
  • That sounds a bit advanced for me, would you mind altering y code perhaps> If it's not to much to ask. I wouldn't even no where to start doing that. –  Oct 24 '14 at 20:42

1 Answers1

0

you dont have to use the
in your inner list. adjust line-height to get desired result. http://www.jsfiddle.net/9058vefk 

 #nav_bar ul li:hover ul {
  display: block;
  position: absolute;
  padding: 0px;
  background: #e2e2e2;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:10px;
  padding-right:10px;
  border: 1px solid black;
  border-radius:5px;
  line-height:1.5em; /* added this- you can change it th=o what you want */
  height:5em;
}

as far as centering the main ul li , divide the entire div (nav_bar) into 7 equal smaller divs and apply that space to each nav item.

Sai
  • 1,889
  • 5
  • 18
  • 26
  • check these out http://stackoverflow.com/questions/1203910/css-horizontal-menu-equally-spaced and http://css-tricks.com/forums/topic/how-to-equally-divide-the-width-of-menu/ – Sai Oct 24 '14 at 20:47
  • start there to get an idea . sorry I cannot sit and work on your code, I do have my own job that I have to do. But glad to be of help and good luck – Sai Oct 24 '14 at 20:48