CSS menu

cbrams9 · #1 Aug 3rd, 2006, 15:22

Hi All,

I have created a css menu and I want to have each link to have a different coloured background when you hover over it. I have managed to get my first link to have a purple background but not sure how to define each link to have a different colour. Below is the code for the html & css -

css -

/* =-=-=-=-=-=-=-[main frame table]-=-=-=-=- */
#f_t {
width: 800;
border: 1 solid #333333;
}
#f_hc{
width: 790;
border: 1 solid #ffffff;
}
#body_c {
width: 790;
height: 270;
background: url(images/background.jpg) no-repeat;

}
#menu_c{
width: 200;
height: 125;
vertical-align: top;
}
#content_c{
width: 460;
text-align: left;
vertical-align: top;

}

/* =-=-=-=-=-=-=-[Menu Five]-=-=-=-=-=-=-=- */

#menu5 {
width: 225px;
border-style: none solid none solid;
border-color: #D0D0D0;
border-width: 1px;
margin: 0px;
}

#menu5 a {
height: 30px;
text-decoration: none;
padding: 8px 15px 0 10px
text-align: left;

}

#menu5 a:link, #menu5 a:visited {
color: #070707;
display: block;
background: url(images/linkoverstatic.jpg) no-repeat;

}

#menu5 a:hover {
color: #ffffff;
background: url(images/linkoverpurple.jpg) no-repeat 0 0px;

}

#menu5 a:active {
color: #fff;
background: url(images/linkoverover.jpg) no-repeat 0 -64px;

}
#menu5 #t{
font-family: Arial;
color: 333333;
font-size: 12;
padding: 10;
}
#menu5 p{
padding: 10 0 0 10;
margin: 0;
}

html -

<html>
<head>
<title>sfgroup | Home </title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body background="images/gradient.jpg">
<table id='f_t' border="1" align="center">
<tr>
<td id='f_hc'>
<a href='index.htm'>
<img src="images/banner.jpg" border='0' title='Home' alt='missing image'>
</a>
</td>
</tr>
<tr>
<td id='body_c' align='center'>
<table width="100%" height="270" border="0" style='border: 0 solid'>
<tr>
<td id='menu_c'>
<div id="menu5">

<a id='t' href="index.htm" title="Home">Home</a>
<a id='t' href="about.htm" title="About">About</a>
<a id='t' href="application.htm" title="Application Form">Application Form</a>
<a id='t' href="contact.htm" title="Contact Us">Contact</a>
<a id='t' href="faq.htm" title="FAQ">FAQ</a>
<a id='t' href="financialinfo.htm" title="Financial Information">Financial Information</a>
<a id='t' href="previousdonations.htm" title="Previous Donations">Previous Donations</a>

</div>

</td>
<td id='content_c'>

 
<img src="images/space.jpg" width="102" height="99" align="left"> 
Thank you for visiting SFGroup, a charitable fund for disabled people.
If you were to
place any updates, news, etc. for your guests, this information
will be placed here. 
 
 

<hr size="1" noshade>
News 
 - (13.06.2006) 
£865 for Sleep System Christopher has
profound physical and intellectual disabilities together with epilepsy.
He suffers to such an extent that he is unable to relax his limbs
at all. He is permanently tight and... <a href="test.htm">read more</a> 
 
- (13.01.2006) 
£1,468 for Standing Frame Chadsgrove School
is a special school for children with physical and learning difficulties.
The frame is used every day by several children aged 4 to 10. WHAT
DIFFERENCE HAS THIS MADE? - Se... <a href="test.htm">read more </a>
<hr size="1" noshade>

</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="images/footer.jpg" width="790" height="70"></td>
</tr>
</table>
</body>
</html>

Please can anyone help,

Thanks

craig · #2 Aug 3rd, 2006, 15:46

Have a look at the code on my site... it has different colored links at the top of the page,

http://www.designcreek.com
http://www.designcreek.com/style.css

Hope that helps to solve your problem.

Craig

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Menu Help!	RZX Developer	Web Page Design	5	Aug 14th, 2007 11:59
css menu	csun	PHP Forum	4	Aug 1st, 2007 20:37
I have a normal css menu, but want ot add drop down menu to it	multichild	Web Page Design	7	Jan 9th, 2007 16:07
Add Sub Menu	DannyP43	JavaScript Forum	10	Sep 3rd, 2006 19:47
Help with pop-up menu please!!!??	aseriouslyfunkydiva	Graphics and 3D	1	Nov 16th, 2005 15:11

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS menu