CSS - How to center a DIV menu


Tags: html,css

Problem :

As like the title, here is my case. The header part is ok for me, i manage to center it, but the menu part, i just cant figure it. This is the HTML Part:

<div id="container">
<div id="topcontain">
        <div id="header">

        <div id="logo">
                Logo Here
        </div>

        <div id="title">
            <h1> THE TITLE HERE</h1>
        </div>

    </div>
</div>

<div id="menu">

        <div id="menu_button">
            <a href="#"> HOME </a>
        </div>

        <div id="menu_button">
            <a href="#"> PRODUCTS </a>
        </div>

        <div id="menu_button">
            <a href="#"> GALLERY </a>
        </div>

        <div id="menu_button">
            <a href="#"> INFO </a>
        </div>

        <div id="menu_button">
            <a href="#"> ABOUT US </a>
        </div>
    </div>
</div>

Here is the CSS part:

@charset "utf-8";

html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}

#container {
width: auto;
margin: 0 auto;
padding: 0;
}

#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}


#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */


}

#container #topcontain #header #logo {

width:150px;
height:117px;
margin:auto;
float:left;
}

#container #topcontain #header #title {

width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}

#container #menu {

float:left;
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}


#container #menu #menu_button{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}

#container #menu #menu_button a:link, #container #menu #menu_button a:visited{
text-decoration:none;
color:inherit;
}


#container #menu #menu_button:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;  
}

Looking forward to your reply, thanks.



Solution :

  1. it is semantically better not to use div for menu (instead use followed by
  2. it's wrong to repeat many times an id (instead use classes, or combine css selectors - for your html #menu-button is the same as #menu div).

Here the html + css corrected with the centered menu

   <html>
<head>
<style>
@charset "utf-8";

html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}

#container {
width: auto;
margin: 0 auto;
padding: 0;
}

#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}


#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */


}

#container #topcontain #header #logo {

width:150px;
height:117px;
margin:auto;
float:left;
}

#container #topcontain #header #title {

width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}

#container #menu {
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}


#container #menu li{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}

#container #menu li a:link, #container #menu li a:visited{
text-decoration:none;
color:inherit;
}


#container #menu li:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;  
}

/*centered menu */
nav ul{
margin: 10px auto;
width: 755px;
}
</style>
</head>

<body
<div id="container">
<div id="topcontain">
        <div id="header">

        <div id="logo">
                Logo Here
        </div>

        <div id="title">
            <h1> THE TITLE HERE</h1>
        </div>

    </div>
</div>

<nav id="menu">
         <ul>
        <li>
            <a href="#"> HOME </a>
        </li>

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

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

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

       <li>
            <a href="#"> ABOUT US </a>
        </li>
        </ul>
   </nav>
</div>
</body>
</html>

The centering is obtained giving a specific width to the ul (it could have also been a div or whatever) and giving it an "auto" margin for right and left.


    CSS Howto..

    How do I get this div to cover flash control (jw player)?

    how to change collapse direction of a panel in bootstrap

    How to locate element inside css footer

    ExtJS how to remove grid row underline when selected and over

    How to keep height of parent div with absolute positioned img inside?

    How to 'clip away' part of a div using CSS?

    How to capture a CSS multiline comment block with JavaScript regex

    How can you do this in CSS

    How to create column with two divs one fixed above second that hides behind first when scrolling?

    resize/expanding slideshow (inside a div) overtakes content that follows below

    How to create border around jquery mobile webpage?

    How to property adjust table?

    Sidebar, Navigation and Content how to do it?

    Z-stacking CSS 3 Flex boxes : how to overlay DIVs that are flexbox items?

    How to underline groups of letters in HTML and CSS

    How to make a div inside a div while keeping same image background

    How to auto position sidenav in twitter bootstrap while sliding

    How to auto fit input field after dynamically added spans?

    How to style textbox using CSS in ASP.NET

    How do i add and remove an active class with jQuery?

    How to make font sharp in CSS?

    How to fire a new css animation when the element already has one?

    How to set css class to div area of ckeditor

    How to make nested divs appear as siblings with CSS?

    How to change the cursor icon when dragging in HTML5?

    How can I change my div box to a link?

    How to lazyload svg image given in css?

    Can someone help me to know how I can make my layout work in small screen using css , css3?

    How do I get two side by side divs displayed correctly inside a bordered, dynamic height content area?

    How to specify which element to change background color jquery