Forum Moderators: not2easy
e.g
Football ¦ Basketball ¦ Baseball ¦ Badminton.
All are hyperlinked to their page and all have a background color of white.
When football is clicked I want the link football to have a blue background and the rest white. The same goes for when baseball is clicked - baseball to have a blue background and the rest white etc
I have tried using a:link, a:active, a:hover and a:visited but I have had no luck.
background. Is this possible by using just CSS?
<body id="footballBody">
<body id="basketballBody">
<body id="baseballBody">
<body id="badmintonBody">
Then give each of your list items an id as well:
<li id="footballNavLink">
<li id="basketballNavLink">
<li id="baseballNavLink">
<li id="badmintonNavLink">
Then your style rules would be something like:
#footballBody #footballNavLink,
#basketballBody #basketballNavLink,
#baseballBody #baseballNavLink,
#badmintonBody #badmintonNavLink {
/* Put your styles here */
}
Hope that helps.
Giving the <body> tag a specific ID has never actually crossed my mind when making any website - it's nice to learn new things that can be tweaked.
I can now get back to progressing after this little niggle,
Cheers!
<body id="mainBody"><li id="mainNavLink">
CSS:
#mainBody #mainNavLink a {background-color: #810201; }
It works great in IE6 though.
The styles I have on the div surrouding the LI's are:
#navcontainer ul{margin: 0;padding: 0;list-style-type: none;}
#navcontainer li { margin: 0 0 0 0; float:left}
#navcontainer a:link, #navcontainer a:visited
{
display: block;
color: #FFF;
background-color: #3e3e3e;
width: 90px;
padding: 3px 13px;
text-decoration: none;
text-align:center;
border-right:2px solid #000;
font-weight:bolder;
}
#navcontainer a:hover, #navcontainer a:active{background-color: #810201;color: #FFF;}for this code:
<div id="navcontainer">
<ul>
<li id="mainNavLink"><a href="index.php">HOME</a></li>
</ul>
</div>
