How to Fix this CSS and Center the Menu Horizontally?


Tags: css,list,html-lists,centering,navbar

Problem :

I'm trying to remove the vertical line in the menu just to the right of the "Contact Us" link, then center the entire menu bar. Here's the code (a JSFiddle link is at the bottom). Thanks in advance for your assistance :)

HTML:

<body>

<div id="page_wrapper">
<div class="page_padding">

<div id="header">
<div class="inner_padding">

</div>
</div>

<div id="menu_container">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Registration</a></li>
  <li><a href="#">User Programs</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Calendar</a></li>
  <li><a href="#">FAQ</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>
<div class="spacer"></div>
</div>

</body>

CSS:

body{
     margin:15px 0 15px 0;
     padding:0;
     line-height: 1.7em;
     text-align: center;
     font-family: verdana, arial, sans-serif;
     font-size: 75%;     
}


#page_wrapper {
     width: 890px;
     border:1px solid #8A837D;
     background-color: #FFFFFF;
     margin: 0 auto;
     padding:0;
     text-align: left;
}

#header {
     background: #999E8A url('../img/#.jpg') top right no-repeat;
     height: 135px;
     padding-top:25px;
     margin:0;
}


#content_wrapper {
     float: left;
     width: 100%;
}

.inner_padding {
     margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
}

.page_padding {
     margin: 15px; /*Margins for inner DIV inside each column (to provide padding)*/
}


#menu_container {
     margin:0;
     padding: 0;
}

#menu_container ul {
     padding-left: 0;
     margin: 0;
     background-color: #CC6600;
     color: White;
     float: left;
     width: 100%;
     font-family: verdana, arial, helvetica, sans-serif;
     font-size: 1.2em;
     font-weight: bold;
}

#menu_container ul li { display: inline; line-height: 1em;}

#menu_container ul li a {
     padding: 1em 1em 1em 1em;
     background-color: #CC6600;
     color: White;
     text-decoration: none;
     float: left;
     border-right: 1px solid #fff;
}

#menu_container ul li a:hover {
     background-color: #FF9933;
     color: #fff;
}

 .spacer {clear:both;}

>>>> See example of above on JSFiddle



Solution :

You could use the CSS rules display: table on the <ul> and display: table-cell on the <li>. This will cause the menu to fit perfectly into the horizontal space. I removed the display: inline and added display: block to the <a> tags.

To remove the border, you can use the :first-child or :last-child CSS selector. I'd recommend using the :first-child, and then putting the border on the left of the <a>. This is just because :first-child is supported in more browsers.

Here's a fiddle: http://jsfiddle.net/davidpauljunior/94PsT/2/


    CSS Howto..

    How to make a horizontal list start in the center of the page?

    How to over ride the transparency aspect in CSS

    Selenium: how to define css if webpage has mutiple elements with same name

    jQuery: How to get DIV to slide-off the screen and another to slide in?

    How to set a menu hover delay

    How to increase a CSS value by the value of a JS variable?

    How come the exact same version of Google Chrome shows different layout?

    How to invoke a “tooltip” when hovering over ID'd HTML elements in a Browser?

    How to extend width and height automatically when the data gets increased

    how can i add class to errorsummay without remove header message

    How to make CSS zig-zag borders? [duplicate]

    How to come back to original state with a toggle button in jQuery?

    how to increase border line from the center using css animation

    How to apply rounded borders to highlight/selection

    How to use a lower resolution image for mobile?

    how can i create true loop?

    How to modify twitter widget in css

    how to make html email look exactly the same as previewed just in browser?

    How can I align centered inline-block elements correctly?

    how can I apply css based on parent div class

    How to apply icons to links using css?

    HTML/CSS - How do I make divs to size according to their contents?

    How to remove and override CSS attribute from parent class?

    CSS Layout. Can not get idea how to fix it

    How to identify element using link name in a onclick html tag?

    how to do 3d menu in css 3 with that effect like on page [closed]

    How to have complex shadow background on variable height content area via CSS?

    how to know about the font information in a psd file?

    How to style a particular paragraph element in css without effecting the other paragraphs in the same class?

    Show/Hide tr elements based on multiple CSS classes and input from multiple checkboxes