logo-dw

Go Back   Dreamweaver Club Forums > Graphic Design > Fireworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 05-04-2010, 04:42 PM   #1
cradl
cradl's Avatar
 
Join Date: Oct 2008
Posts: 96
Question Button question

How do I make a button stay highlighted when you are on that specific page...I made buttons in fireworks.

Last edited by cradl; 05-04-2010 at 04:43 PM.. Reason: spelling
cradl is offline   Reply With Quote
Old 05-04-2010, 06:07 PM   #2
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

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?
domedia is offline   Reply With Quote
Old 05-04-2010, 06:12 PM   #3
cradl
cradl's Avatar
 
Join Date: Oct 2008
Posts: 96
Default

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 is offline   Reply With Quote
Old 05-04-2010, 06:34 PM   #4
cradl
cradl's Avatar
 
Join Date: Oct 2008
Posts: 96
Default

Here is my code I have...

Code:
<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 -->

Last edited by Corrosive; 05-04-2010 at 07:33 PM..
cradl is offline   Reply With Quote
Old 05-04-2010, 07:35 PM   #5
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

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/
gentleone is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:55 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com