remove padding from navbar UL css

Russia · August 28, 2014

Hey guys, I am working on something and keep getting some padding on my css navabar, its pretty simple but I cant figure out where it grabbing the padding from pushing it about 5 pixels to the right.

jsfiddle live preview is a demo

and here is a picture of the hover over.

Notice the little gray space in between the hovered over Update Profile?

I cant seem to find the code anywhere that would cause that. Anyone notice anything in my code?

                                                                                                

                                                            <head>

<title>2 Column CSS Layout</title>



<style type="text/css">

body {

margin: 20px;



font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;

        background-color: #555;

}

#nav {

    text-align:center;

}



   /* Begin Navigation Bar Styling */

   #nav ul {

 text-align: center;

      font-size: 11px;

      width: 100%;

    margin: 0;

    padding: 0;

    display:inline-block;

      padding: 0;

      list-style: none;

      background-color: #f2f2f2;

      border-bottom: 1px solid #ccc;

      border-top: 1px solid #ccc; }

   #nav li {

    display:inline-block;

 }

   #nav li a

 {

      display: block;

      padding: 8px 15px;

      text-decoration: none;

      font-weight: bold;

      color: #069;

      border-right: 1px solid #ccc; }

   #nav li a:hover {

      color: #c00;

      background-color: #fff; }

   /* End navigation bar styling. */





div {

text-align:center;

}

div#page {

    background-color: white;

    margin: 0 auto;

    text-align: left;

    width: 755px;

padding:0px 10px 0 10px;

}



div#header {

  border-bottom:1px solid black;

    height: 30px;

    line-height: 30px;

}



div#content {

  background: none repeat scroll 0 0 none;

  border:0px solid blue;

  width:100%;

line-height: 500px;

  min-height:500px;

    _height:500px

}



div#footer {

  border:0px solid red;

    height:30px;

    line-height: 30px;

  border-top:1px solid black;

font-size: 9pt;

}



</style>

<body>



<div id="page">

 <div id="header">



<div style="float: left;">Welcome Admin</div>

<div style="float: right;">LOGOUT</div>

   <div id="nav">



   <ul id="nav">

      <li><a href="#">Home Page</a></li>

      <li><a href="#">My Account</a></li>

      <li><a href="#">Update Profile</a></li>

      <li><a href="#">Change Avatar</a></li>

      <li><a href="#">Change Password</a></li>

      <li><a href="#">Support</a></li>



   </ul>

</div>

</div>

 <div id="content">Content</div>

 <div id="footer"><div style="float: right;">copyright 2014</div></div>

</div>





</body>

WebOutGateway · August 29, 2014

Hi, Russia!

Try, moving your

border-right: 1px solid #ccc;

from #nav li a to #nav li.

And add this to your #nav li

margin:0px 0px 0px -2px;

That would remove the margin in the left side.

I hope this helps. Thank you!

Digitizer · August 29, 2014

and for a more simple version of WebOutGateway for you is here

nav li {
    display:inline-block;
    margin: 0 -2px 0 0;
    border-right: 1px solid #ccc;
 }
   #nav li a
 {
      display: block;
      padding: 8px 15px;
      text-decoration: none;
      font-weight: bold;
      color: #069;
      }

Sign In

remove padding from navbar UL css

Recommended Posts

Russia

Link to comment

Share on other sites

WebOutGateway

Link to comment

Share on other sites

Digitizer

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information