CSS Menu bar help

HDWWEClips · Post by **HDWWEClips** » Wed May 26, 2010 4:08 am

Can someone help me make a menu bar in CSS?
I 'd like it too have 6 areas for links, have nice rounded corners and for the tables have a nice black to it...
But I just don't know how to do it! I have never used CSS before.
Also does anyone know of a side chat I can use?

Chris · Post by **Chris** » Wed May 26, 2010 7:52 pm

Tables? You don't use tables for menus.

Here's the xHTML. You'll need a xHTML 1 transitional or strict doc type for the rounded corners to work:

Code: Select all

<div id="menu">
    <ul>
        <li> <a href="#">Area 1</a> </li>
        <li> <a href="#">Area 2</a> </li>
        <li> <a href="#">Area 3</a> </li>
        <li> <a href="#">Area 4</a> </li>
        <li> <a href="#">Area 5</a> </li>
        <li> <a href="#">Area 6</a> </li>
    </ul>
</div>

this obviously goes in between the <body> tags.

Now for the CSS. You might notice I gave my div an id; "menu". To style elements by their id in CSS, you put a # infront of the id, so in our case "#menu".

Code: Select all

<style type="text/css">
#menu {
    background: #000;
    width: 960px;
    height: 40px;
    margin: auto;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: #000 1px solid;
}
#menu ul {
    padding: 0px;
    margin: 0px;
}
#menu ul li {
    float: left;
    list-style: none;
}
#menu ul li a {
    font-size: 14px;
    text-decoration: none;
    padding-top: 13px;
    padding-bottom: 13px;
    width: 160px;
    text-align: center;
    display: block;
    color: #FFF;
}
#menu ul li a:hover {
    color: #AAA;
}
</style>

This goes between the <head> tags.

CSS Menu bar help

CSS Menu bar help

Re: CSS Menu bar help