yabbadabba
New Member
I am new to web pages and i'm creating a simple web site in which I have some page selector buttons.The web site uses a master page and asp.I want the button selected to change color when clicked to identify the currently selected page.The button should change from Pink to Grey basically and stay that way until another button is clicked.I have tried all the usual options but nothing seems to work, and I know it is my ignorance!HTML snippet\[code\]<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MailTest.SiteMaster" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head runat="server"><title></title><link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'/><link href="http://stackoverflow.com/questions/13880670/~/Styles/Site.css" rel="stylesheet" type="text/css" /><asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder></head><body><form id="Form1" runat="server"> <div id="wrap"> <div id="header"> <img src="http://stackoverflow.com/questions/13880670/images/logo.gif" alt="Whamm Logo" /> </div> <div id="wrap2"> <div id="menu"> <ul> <li><a href="http://stackoverflow.com/questions/13880670/Default.aspx" onclick="this.classname='cClick'" class="button cColour">HOME</a></li> <li><a href="http://stackoverflow.com/questions/13880670/About.aspx" onclick="this.classname='cClick'" class="button cColour">ABOUT US</a></li> <li><a href="http://stackoverflow.com/questions/13880670/Services.aspx" onclick="this.classname='cClick'" class="button cColour">OUR SERVICES</a></li> <li><a href="http://stackoverflow.com/questions/13880670/Quotes.aspx" onclick="this.classname='cClick'" class="button cColour">REQUEST A QUOTE</a></li> <li><a href="http://stackoverflow.com/questions/13880670/Contact.aspx" onclick="this.classname='cClick'" class="button cColour">CONTACT US</a></li> <li><a href="http://www.mailbigfile.com/whamm" target="_blank" class="button cColour">UPLOAD A FILE</a></li> </ul> </div> <div id="main"> <asp:ContentPlaceHolder ID="MainContent" runat="server"/> <!-- #BeginEditable "content" --> <!-- #EndEditable --> </div> </div> <div id="footer"> <a href="mailto: [email protected]" target="_blank">[email protected] 01509 646553</a> </div> </div></form></body></html>\[/code\]CSS snippet\[code\]html, body { margin: 0,0,0,0; font-family: 'Ropa Sans', sans-serif;} #wrap { margin: 0 auto; margin-top:10px; width: 800px;} #header { width:800px; height:145px; } img { max-height:100%; -ms-interpolation-mode: bicubic; float:right; } #wrap2 { clear:both; margin:0; width:780px; } #menu { margin: 0; float:left; width:200px;} #main {margin: 0; float:right; width:580px;}ul { list-style-type:none; margin: 0; padding: 0; margin-left:5px; text-indent:6px; } h2 {border
; margin:0;font-size:20px; color:#e5007e; }/* button ---------------------------------------------- */.button{ display:block; width: 130px; height:16px; line-height:16px; margin-bottom:3px; margin-left:0; outline:none; cursor
ointer; text-align:left; border: solid 1px #da7c0c; font-size: 10px; text-decoration:none; -webkit-border-radius: .4em; -moz-border-radius: .4em; border-radius: .4em;}#footer {clear:both;margin: 0;} #footer a { float:right; text-decoration:none; font-size:13px; color:#e5007e;}.button:hover { text-decoration: none; position: relative; left: 2px;}.button:active { text-decoration: none; background-color:#9c9b9b;}.button.selected { text-decoration: none; background-color:#9c9b9b; }/* colour */.cColour { color:white; background-color:#e5007e;}.cColour:hover { color:white; background-color:green;}.cColour:active { color:white; background-color:#9c9b9b;}\[/code\]
; margin:0;font-size:20px; color:#e5007e; }/* button ---------------------------------------------- */.button{ display:block; width: 130px; height:16px; line-height:16px; margin-bottom:3px; margin-left:0; outline:none; cursorointer; text-align:left; border: solid 1px #da7c0c; font-size: 10px; text-decoration:none; -webkit-border-radius: .4em; -moz-border-radius: .4em; border-radius: .4em;}#footer {clear:both;margin: 0;} #footer a { float:right; text-decoration:none; font-size:13px; color:#e5007e;}.button:hover { text-decoration: none; position: relative; left: 2px;}.button:active { text-decoration: none; background-color:#9c9b9b;}.button.selected { text-decoration: none; background-color:#9c9b9b; }/* colour */.cColour { color:white; background-color:#e5007e;}.cColour:hover { color:white; background-color:green;}.cColour:active { color:white; background-color:#9c9b9b;}\[/code\]