Any idea how i would make this menu with csss? :\

I know how to do the background and the logo on the left, but how would i do the menu bar on the right? How would i even start this? With all the different colours for the background???? Someone thats smart, please help me!!!!!!

 

Something like this:

<ul>
    <li class="purple"><a href="#">Home</a></li>
    <li class="blue"><a href="#">About</a></li>
    <li class="green"><a href="#">Privicy</a></li>
    <li class="yellow"><a href="#">Gallery</a></li>
....
</ul>

Code (markup):

CSS:

.purple {
  background: # ;
}
...

Code (markup):

 

code:

<link href="css1.css" rel="stylesheet" type="text/css" />
<table width="890" height="35" border="0" cellspacing="0">
<tr>
<td class="white">Logo and Sample</td>
<td class="purple"><font color="#FFFFFF">Home</font></td>
<td class="blue"><font color="#FFFFFF">About</font></td>
<td class="green"><font color="#FFFFFF">Privacy</font></td>
<td class="yellow">Gallery</td>
<td class="orange1">contactus</td>
<td class="orange">sitemap</td>
</tr></table>

 

css

.purple
{
background-color:#CC00FF;

}
.blue
{
background-color:#000099;
}
.green
{
background-color:#336600;
}
.yellow
{
background-color:#FFFF00;
}
.white
{
background-color:#9900FF;
}
.orange
{
background-color:#FF0000;
}
.orange1
{
background-color:#FF8040;
}

 

If you don't mind IE8/lower getting them all the same color, you could rip out the classes and use nth-child.

<ul id="mainMenu">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Privicy</a></li>
	<li><a href="#">Gallery</a></li>
	<li><a href="#">Contact</a></li>
	<li><a href="#">Sitemap</a></li>
</ul>

Code (markup):

#mainMenu li a {
	/* IE8/earlier will use this coloration for all buttons */
	color:#FFF;
	background:#449;
}

#mainMenu li:nth-child(2) a { background:#08D; }
#mainMenu li:nth-child(3) a { background:#8C1; }
#mainMenu li:nth-child(4) a { background:#FC0; }
#mainMenu li:nth-child(5) a { background:#F70; }
#mainMenu li:nth-child(6) a { background:#D01 }

Code (markup):

If you want it working back to IE7, you could use the sibling selector.

#mainMenu li a {
	/* IE6/earlier will use this coloration for all buttons */
	color:#FFF;
	background:#449;
}

#mainMenu li+li a { background:#08D; }
#mainMenu li+li+li a { background:#8C1; }
#mainMenu li+li+li+li a { background:#FC0; }
#mainMenu li+li+li+li+li a { background:#F70; }
#mainMenu li+li+li+li+li+li a { background:#D01 }

Code (markup):

Also functionally identical with no classes needed. You only really 'need' classes these days if you still care about IE6/lower... and less classes means smaller markup and more you can cache across pages in the external stylesheet.

*NOTE* I'd style the Anchors, not the LI -- probably make the LI display:inline (to avoid staircase bug), the UL float:right, and the anchors float:left;

 

Oh, and @sathwi_nk -- tables for layout and the FONT tag? What is this, 1997?