Home/ Questions/Q 6341937
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T20:08:26+00:00

I am using the following codes to create a layout, the issue is, the

  • 0

I am using the following codes to create a layout, the issue is, the navigation menu won’t center, the text centers, but the rest of the navigation bar doesn’t.

Here is my HTML: 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
    <div id="container">
    <h1>Test</h1>


    <ul id="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
    </ul>


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

    <div id="footer">
        <p>Test</p>
    </div>

    </div>
</body>

</html>

And here is my CSS:

/***** Body *****/
body {
    font-family: arial, helvetica;
    text-align:center;
}

div#container {
}

/***** Navigation Menu *****/

ul#navigation {
    margin: 20px;
    padding: 0;
    list-style: none;
    width: 525px;
}

ul#navigation li {
    display: inline;
}

ul#navigation a {
    text-decoration:none;
    padding: 5px 0;
    width: 100px;
    background: #485e49;
    color: #eee;
    float: left;
    text-align:center;
}

ul#navigation a:hover {
    background: #FF00FF;
    text-align:left;
}

ul#navigation a:active {
    text-align:right;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Change your ul#navigation to 

    ul#navigation {
    padding: 0;
    list-style: none;
    width:400px;
    margin:0 auto;    
}

    Example: http://jsfiddle.net/jasongennaro/3WS7B/

    What happened is your width was off. Once that was fixed to 400px, applying margin:0 auto worked.

    • 0