Page 1 of 1
CSS Menu bar help
Posted: Wed May 26, 2010 4:08 am
by HDWWEClips
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?
Re: CSS Menu bar help
Posted: Wed May 26, 2010 7:52 pm
by Chris
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.