PDA

View Full Version : Button question


cradl
05-04-2010, 05:42 PM
How do I make a button stay highlighted when you are on that specific page...I made buttons in fireworks.

domedia
05-04-2010, 07:07 PM
You have to assign it a certain class or ID.
For example <a href="thisPage.html" id="current">

And then style it how you need the 'highlighted' state to be.

Did someone say there was something built in in DW for this?

cradl
05-04-2010, 07:12 PM
Could you give me an example of the code...new to code but can understand it. So there is no way to assign this in fireworks when you build the navbar or buttons?

cradl
05-04-2010, 07:34 PM
Here is my code I have...

<style type="text/css">
<!--
a:link {
text-decoration: none;
color: #397FBD;
}
a:visited {
text-decoration: none;
color: #397FBD;
}
a:hover {
text-decoration: none;
color: #A03025;
}
a:active {
text-decoration: none;
color: #000;
text-align: center;
}
a#red {
text-decoration: underline;
color: #A03025;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
a#rednoline {
text-decoration: none;
color: #A03025;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #397FBD;
}
.oneColLiqCtrHdr #container {
width: 80%; /* this will create a container 80% of the browser width */
background: #397FBD;
margin: 0 auto;
text-align: center;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
.oneColLiqCtrHdr #header {
background-color: #FFF;
padding: 0;
}
.oneColLiqCtrHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
background-color: #FFF;
text-align: center;
}
.oneColLiqCtrHdr #mainContent {
background: #FFFFFF;
text-align: left;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
}
.oneColLiqCtrHdr #footer {
background-color: #FFF;
font-size: 10px;
padding-top: 10;
padding-right: 2px;
padding-bottom: 0;
padding-left: 2px;
}
.oneColLiqCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
text-align: left;
}
.oneColLiqCtrHdr #container #header table tr td .tiptitle {
font-size: 80%;
}
.oneColLiqCtrHdr #container #footer td .style12 {
font-size: 10px;
}
.Bottom_Nav {
color: #397FBD;
}
.Cal_Link {
font-size: 70%;
color: #397FBD;
font-weight: bold;
}
.style32a { font-size: 12px;
font-weight: normal;
color: #000;
text-align: left;
padding-left: 0px;
padding-right: 10px;
}
.Text {font-weight: normal;
font-size: 12px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
</head>

<body class="oneColLiqCtrHdr" onload="MM_preloadImages('../images/NavBar/Final/Home_f3.gif','../images/NavBar/Final/Home_f2.gif','../images/NavBar/Final/Home_f4.gif','../images/NavBar/Final/About_f3.gif','../images/NavBar/Final/About_f2.gif','../images/NavBar/Final/About_f4.gif','../images/NavBar/Final/Lending_f3.gif','../images/NavBar/Final/Lending_f2.gif','../images/NavBar/Final/Lending_f4.gif','../images/NavBar/Final/Calendar_f3.gif','../images/NavBar/Final/Calendar_f2.gif','../images/NavBar/Final/Calendar_f4.gif','../images/NavBar/Final/Parent_U_f3.gif','../images/NavBar/Final/Parent_U_f2.gif','../images/NavBar/Final/Parent_U_f4.gif','../images/NavBar/Final/Resorces_f3.gif','../images/NavBar/Final/Resorces_f2.gif','../images/NavBar/Final/Resorces_f4.gif','../images/NavBar/Final/Parent_W_f3.gif','../images/NavBar/Final/Parent_W_f2.gif','../images/NavBar/Final/Parent_W_f4.gif','../images/NavBar/Final/Website_f3.gif','../images/NavBar/Final/Website_f2.gif','../images/NavBar/Final/Website_f4.gif','../images/NavBar/Final/Contact_f3.gif','../images/NavBar/Final/Contact_f2.gif','../images/NavBar/Final/Contact_f4.gif')">

<div id="container">
<div id="header">
<table width=100%">
<tr>
<th height="200" scope="col"><p><img src="../images/logo/KYPIRC Top Logo 790x195.jpg" alt="" name="Logo" width="790" height="195" border="0" usemap="#LogoMap" id="Logo" /></p></th>
<br />
&nbsp; </tr>
</table>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><a href="../testindex.htm" target="_top" onclick="MM_nbGroup('down','group1','Home','../images/NavBar/Final/Home_f3.gif',1)" onmouseover="MM_nbGroup('over','Home','../images/NavBar/Final/Home_f2.gif','../images/NavBar/Final/Home_f4.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/NavBar/Final/Home.gif" alt="Home Botton" name="Home" border="0" id="Home" onload="" /></a></td>
<td><a href="../Abouthome.html" target="_top" onclick="MM_nbGroup('down','group1','About','../images/NavBar/Final/About_f3.gif',1)" onmouseover="MM_nbGroup('over','About','../images/NavBar/Final/About_f2.gif','../images/NavBar/Final/About_f4.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/NavBar/Final/About.gif" alt="About_Us_Button" name="About" border="0" id="About" onload="" /></a></td>
<td><a href="../Lendinghome.html" target="_top" onclick="MM_nbGroup('down','group1','Lending','../images/NavBar/Final/Lending_f3.gif',1)" onmouseover="MM_nbGroup('over','Lending','../images/NavBar/Final/Lending_f2.gif','../images/NavBar/Final/Lending_f4.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/NavBar/Final/Lending.gif" alt="Lending_Library_Button" name="Lending" border="0" id="Lending" onload="" /></a></td>
<td><a href="../TrainingCalendar.htm" target="_top" onclick="MM_nbGroup('down','group1','Training','../images/NavBar/Final/Calendar_f3.gif',1)" onmouseover="MM_nbGroup('over','Training','../images/NavBar/Final/Calendar_f2.gif','../images/NavBar/Final/Calendar_f4.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/NavBar/Final/Calendar.gif" alt="Calendar_Button" name="Training" border="0" id="Training" onload="" /></a></td>
<td><a href="../ParentUniversityHome.html" target="_top" onclick="MM_nbGroup('down','group1','Parent','../images/NavBar/Final/Parent_U_f3.gif',1)" onmouseover="MM_nbGroup('over','Parent','../images/NavBar/Final/Parent_U_f2.gif','../images/NavBar/Final/Parent_U_f4.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/NavBar/Final/Parent_U.gif" alt="Parent_University_Button" name="Parent" border="0" id="Parent" onload="" /></a></td>
<td><a href="../ResoursesHome.html" target="_top" onclick="MM_nbGroup('down','group1','Resources','../images/NavBar/Final/Resorces_f3.gif',1)" onmouseover="MM_nbGroup('over','Resources','../images/NavBar/Final/Resorces_f2.gif','../images/NavBar/Final/Resorces_f4.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/NavBar/Final/Resorces.gif" alt="Resources_Button" name="Resources" border="0" id="Resources" onload="" /></a></td>
<td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','Parentworkshop','../images/NavBar/Final/Parent_W_f3.gif',1)" onMouseOver="MM_nbGroup('over','Parentworkshop','../images/NavBar/Final/Parent_W_f2.gif','../images/NavBar/Final/Parent_W_f4.gif',1)" onMouseOut="MM_nbGroup('out')"><img name="Parentworkshop" src="../images/NavBar/Final/Parent_W.gif" border="0" alt="Parent_Workshop_Button" onLoad="" /></a></td>
<td><a href="../WebsiteLinksHome.html" target="_top" onclick="MM_nbGroup('down','group1','Website','../images/NavBar/Final/Website_f3.gif',1)" onmouseover="MM_nbGroup('over','Website','../images/NavBar/Final/Website_f2.gif','../images/NavBar/Final/Website_f4.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/NavBar/Final/Website.gif" alt="Website_Links_Button" name="Website" border="0" id="Website" onload="" /></a></td>
<td><a href="../Contact.htm" target="_top" onclick="MM_nbGroup('down','group1','Contact','../images/NavBar/Final/Contact_f3.gif',1)" onmouseover="MM_nbGroup('over','Contact','../images/NavBar/Final/Contact_f2.gif','../images/NavBar/Final/Contact_f4.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/NavBar/Final/Contact.gif" alt="Contacu_Us_Button" name="Contact" border="0" id="Contact" onload="" /></a></td>
</tr>
</table>
</div>
<div id="mainContent"><!-- TemplateBeginEditable name="Main Content" -->
<p>&nbsp;</p>
<!-- TemplateEndEditable -->

gentleone
05-04-2010, 08:35 PM
If you have PHP installed on your webserver than it's much easier to do this with PHP. Especially if you have a lot of pages it's better to include a menu.php file and creating on every page above the DocType a varible called $thisPage.

This article explains:
http://www.alistapart.com/articles/keepingcurrent/