PDA

View Full Version : Links wrong colour - how do I do this - HELP!


macsolutions
01-24-2008, 12:05 PM
I have just uploaded my first website but I can't get the links to change to the correct colour. I would like them to be blue, then white as I hover, and white when I click on the link but when I choose another page I would like the previous link which was white to turn back to blue. mind boggling!

My only other problem, unless you see something else which I have done wrong, is my copy. I need to set an inline tab as I have a few pages with blocks of text on the left and right and I would like to tab the second block away from the first.

All help would be very much appreciated.

http://www.macsolutions.co.uk (http://www.macsolutions.co.uk/)


CSS CODE

@charset "UTF-8";
body {
background-image: url(Artwork/Gradient.jpg);
background-repeat: repeat-x;
background-color: #1b1b1b;
}
body,td,th {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #9ba0a7;
font-style: normal;
line-height: normal;
font-weight: lighter;
font-variant: normal;
text-transform: none;
}
p {
letter-spacing: 0.5px;
margin: 0px;
padding: 0px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: lighter;
font-variant: normal;
text-transform: none;
color: 9ba0a7;
line-height: 122%;
text-align: justify;
}
h1 {
letter-spacing: 1px;
font-size: 15px;
color: #00B0DC;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: lighter;
font-style: normal;
line-height: normal;
font-variant: normal;
text-transform: none;
}
h2 {
letter-spacing: 1px;
font-size: 9px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: lighter;
font-variant: normal;
text-transform: none;
text-decoration: none;
color: #AAAAAA;
}
h3 {
font-size: 9px;
color: #939393;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-style: normal;
line-height: 130%;
font-weight: lighter;
font-variant: normal;
text-transform: none;
}
h4 {
letter-spacing: 1px;
font-size: 9px;
color: #00AFDD;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: lighter;
font-variant: normal;
text-transform: none;
}
h5 {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
color: #E3E3E3;
font-weight: lighter;
}
a:link {
text-decoration: none;
font-family: Arial, Verdana, Helvetica, sans-serif;
color: #00B0DC;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
a:hover {
text-decoration: none;
color: #CCCCCC;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
a:active {
text-decoration: none;
color: #00B0DC;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
.emailpadding {
font-size: 10px;
color: #00B0DC;
padding-right: 5px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: lighter;
font-variant: normal;
text-transform: none;
}
.style1 {
font-size: 10px;
font-family: Arial, Verdana, Helvetica, sans-serif;
color: #9ba0a7;
font-weight: lighter;
}
.style2 {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 15px;
font-style: normal;
line-height: normal;
font-weight: lighter;
font-variant: normal;
text-transform: none;
color: #E3E3E3;
}



HTML CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/Macsolutions Template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Macsolutions | Productivity</title>
<!-- InstanceEndEditable -->
<link rel="Shortcut Icon" href="/favicon.ico" />
<link href="../styles.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>

<body>
<div align="center">
<table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#030000">
<!--DWLayoutTable-->
<tr>
<td width="66" height="47"></td>
<td colspan="6" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="667" height="47" valign="middle"><h2><a href="../index.html" target="_self">HOME</a><span style="color: #939393"> | </span><a href="../Support/support.html" target="_self">SUPPORT</a><span style="color: #939393"> | </span><a href="../Repairs/repairs.html" target="_self">REPAIRS </a><span style="color: #939393">| </span><a href="../Recovery/recovery.html">RECOVERY<span style="color: #939393"> |</span></a><a href="productivity.html"> PRODUCTIVITY<span style="color: #939393"> |</span></a> <a href="../IT Management/IT Management.html" target="_self">IT MANAGEMENT<span style="color: #939393"> | </span></a><a href="../Wireless Home/Wireless home.html">WIRELESS HOME<span style="color: #939393"> | </span></a><a href="../Ipod Repairs/ipod-repairs.html" target="_self">IPOD REPAIRS</a></h2></td>
</tr>
</table></td>
<td width="67"></td>
</tr>

<tr>
<td height="85">&nbsp;</td>
<td colspan="6" valign="top"><img src="../Artwork/Banner.gif" alt="banner" width="667" height="84" /></td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="34"></td>
<td width="14" valign="middle"><img src="../Artwork/Apple.gif" alt="apple" width="14" height="22" /></td>
<td colspan="3" align="left" valign="middle" class="style1">Apple Certified Service Engineer</td>
<td width="309">&nbsp;</td>
<td width="117"></td>
<td></td>
</tr>
<tr>
<td height="14"></td>
<td></td>
<td width="35"></td>
<td width="3"></td>
<td width="189"></td>
<td></td>
<td></td>
<td></td>
</tr>


<tr>
<td height="240">&nbsp;</td>

<!-- InstanceBeginEditable name="image" -->
<td colspan="6" valign="top"><img src="Productivity.jpg" alt="image" width="667" height="240" /></td>
<!-- InstanceEndEditable -->
<td>&nbsp;</td>
</tr>
<tr>
<td height="25"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="43"></td>

<!-- InstanceBeginEditable name="logo" -->
<td colspan="2" rowspan="2" align="center" valign="middle"><img src="Productivity.gif" alt="logo" width="33" height="33" /></td>
<!-- InstanceEndEditable -->
<td colspan="3" align="left" valign="middle"><!-- InstanceBeginEditable name="header" -->
<h1>Productivity | <span class="style2">Technical Advice</span></h1>
<!-- InstanceEndEditable --></td>
<td>&nbsp;</td>
<td></td>
</tr>

<tr>
<td height="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>


<tr>
<td height="5"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="232"></td>
<td></td>
<td></td>
<td></td>
<td colspan="2" valign="top"><!-- InstanceBeginEditable name="copy" -->
<p>Want to save time and money? Need help making informed decisions about technology? Looking for a way to maximize your investment? We can provide you with expert technical advice and services to implement these changes to your current infrastructure. </p>
<p>&nbsp;</p>
<p>We take a proactive approach, managing and maintaining your system and often solving problems before you even realise there were any. We can act as an arm to your existing IT infrastructure by choosing to outsource your IT requirements to us.</p>
<p>&nbsp;</p>
<p> Routine Maintenance Disaster Recovery<br />
Office Relocation Backup &amp; Storage Solutions<br />
Network Solutions Hardware &amp; Software Solutions<br />
System Security Networking &amp; System Administration</p>
<p>If you would like to discuss any issues or needs you may have, please contact us on 07896 875995 or alternatively email us at support@macsolutions.co.uk</p>
<p align="justify" class="style2 style3">&nbsp;</p>
<!-- InstanceEndEditable --></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="3"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div align="center">
<table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#1B1B1B">
<!--DWLayoutTable-->
<tr>
<td width="800" height="25" valign="top"><img src="../Artwork/Panel-Corners.gif" alt="panel corners" width="800" height="16" /></td>
</tr>
</table>
</div>
<div align="center">
<table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#1b1b1b">
<!--DWLayoutTable-->
<tr>
<td width="615" rowspan="3" valign="top"><img src="../Artwork/footer-p1.gif" alt="footerp1" width="615" height="42" /></td>
<td width="170" height="14" valign="top" bgcolor="#000000"><img src="../Artwork/Footer-p3.gif" alt="footerp3" width="170" height="13" /></td>
<td width="15" rowspan="3" valign="top"><img src="../Artwork/footer-p2.gif" alt="footerp2" width="15" height="42" /></td>
</tr>
<tr>
<td height="16" align="center" valign="middle" bgcolor="#000000"><div align="right"><a href="mailto:support@macsolutions.co.uk" class="emailpadding">support@macsolutions.co.uk</a></div></td>
</tr>
<tr>
<td height="12" valign="top"><img src="../Artwork/Footer-p4.gif" alt="footerp4" width="170" height="12" /></td>
</tr>
</table>
</div>

<div align="center">
<table width="802" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="24" height="5"></td>
<td width="251"></td>
<td width="196"></td>
<td width="331"></td>
</tr>
<tr>
<td height="14"></td>
<td valign="middle"><h3>Site Design and Build : MACSOLUTIONS 2007</h3></td>
<td colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="508" height="14" align="right" valign="top"><h2><a href="../Tuition/Tuition.html" target="_self">TUITION</a><span style="color: #939393"> | </span><a href="../Web Development/web_development.html" target="_self">WEB DEVELOPMENT </a><span style="color: #939393">| </span><a href="../Service Rates/service-rates.html" target="_self">SERVICE RATES <span style="color: #939393">| </span></a><a href="../About Us/about us.html" target="_self">ABOUT US<span style="color: #939393"> |</span></a><a href="../About Us/about us.html" target="_self"> </a><a href="../Contact Us/Contact Us.html" target="_self">CONTACT US</a></h2></td>
<td width="19"></td>
</tr>
</table> </td>
</tr>
<tr>
<td height="5"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="1"></td>
<td colspan="3" valign="top"><img src="../Artwork/base-line.gif" alt="baseline" width="759" height="1" align="middle" /></td>
</tr>
<tr>
<td height="3"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="25"></td>
<td colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->

<tr>
<td width="447" height="25" valign="top"><h3>Copyright 2007 Macsolutions. All rights reserved.<br />
Macsolutions.co.uk is not affiliated with Apple Inc. Apple or the Apple logo.</h3></td>
</tr>


</table></td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="24"></td>
<td>&nbsp;</td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
<!-- InstanceEnd --></html>

domedia
01-24-2008, 02:49 PM
I would like them to be blue, then white as I hover, and white when I click on the link but when I choose another page I would like the previous link which was white to turn back to blue.
a:link {color: blue;}
a:visited {color: blue;}
a:hover {color: white;}
a:active {color: white;}

macsolutions
01-25-2008, 08:20 AM
Thanks for the reply, maybe I wrote it down wrong. When I click on a link, the active link should stay white untill I click on another link and then the previous link changes blue.
Thanks, Tom

d a v e
01-25-2008, 10:50 AM
so you don't mean changing this to white
a:active {

text-decoration: none;
color: #00B0DC;
font-family: Arial, Verdana, Helvetica, sans-serif;
}

but you mean the link that reflects the page you're on should be white until you visit another page and then that should be white? : when you're on the 'service rates' page then that link should be white?

macsolutions
01-25-2008, 11:18 AM
YES! the page I am on stays white and you visit another page and then that should be white, and the pages that have BEEN visited go back to blue.

in other words all links stay blue except for the link I am on which is white.

domedia
01-25-2008, 01:17 PM
You cannot use a:active for this.
:active is the state of the link from it's been clicked until the new page loads.

tux
01-25-2008, 06:05 PM
macsolutions,

You could maybe try this.

Where you have this on your home page..

<a href="../index.html" target="_self">HOME</a><span style="color: #939393">

.. you could change the colour of the link to white like this...

<a href="../index.html" target="_self">HOME</a><span style="color: #FFFFFF">

Then do the same on your other pages for the relevent links.

If you want the links to turn white when you hover over them go to Page Properties/Links and make the rollover links white too (#FFFFFF)

Alternatively you could create images for the links and use rollovers.

Let me know if this helps.

Regards, Paul

domedia
01-25-2008, 06:35 PM
Except that span tag is outside the anchor tag, after the link.
You could set a class on the link you want active, and set seperate link colors for it:
<a href="currentpage.html" class="current">Current Page </a>
a.current:link {color: white;}
a.current:visited{color: white;}
a.current:hover {color: white;}
a.current:active {color: white;}

macsolutions
01-25-2008, 08:57 PM
Sorry, I don't fully understand, could you step it out for me. Could you tell me where the code. thanks

tux
01-25-2008, 09:04 PM
Noted Dom. Do you think this might work. The link for the current page is not needed so....

<span class="nolink">Home</span> <a href="link1.html">Link1</a> <a href="link2.html">Link2</a>

body {
background-color: #000000;
}
a:link {
color: #00B0DC;
text-decoration: none;
}
a:visited {
color: #00B0DC;
text-decoration: none;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
a:hover {
color: #CCCCCC;
text-decoration: none;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
a:active {
color: #00B0DC;
text-decoration: none;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
.nolink {
color: #CCCCCC;
font-family: Arial, Verdana, Helvetica, sans-serif;
}

So we get this.... home.html (http://www.photographybydantucker.com/home.html)

Is this what your after macsolutions.

tux
01-25-2008, 09:07 PM
Sorry macsolutions, didnt notice that you just posted. Is the above what you are after.

Regards, Paul

tux
01-25-2008, 10:42 PM
<span class="nolink">Home</span><a href="../Support/support.html">Support</a><a href="../Repairs/repairs.html">Repairs</a>

This would be the basis of your code for the home page. The home page would not need a link to the home page hence the <span class="nolink">Home</span>. You would have to continue it for the rest of your nav links.

Then on the Support page change it to this...

<a href="index.html">Home</a><span class="nolink">Support</span><a href="../Repairs/repairs.html">Repairs</a>

...and then for each page.

Then in your CSS code you put this....

a:link {
color: #00B0DC; /*links will be your blue colour*/
text-decoration: none; /*stops the links being underlined*/
font-family: Arial, Verdana, Helvetica, sans-serif;
}
a:visited {
color: #00B0DC;
text-decoration: none;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
a:hover {
color: #CCCCCC; /*changes the colour to grey when hovered*/
text-decoration: none;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
a:active {
color: #00B0DC; /*returns the link to blue*/
text-decoration: none;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
.nolink { /*this makes the link on the page you are on grey*/
color: #CCCCCC;
font-family: Arial, Verdana, Helvetica, sans-serif;
}

Let me know if it works okay.

macsolutions
01-26-2008, 09:20 AM
Hi Tux, That is exactly what I wanted, Cheers. What I failed to notice is that my pages are from a template and it wont let me change the code unless I detach from the template, which I don't want to do, anyway round this!

I am using DW CS3.

tux
01-26-2008, 02:27 PM
I'm not too sure about this as I dont use templates. If I need to I prefer Library Items.

Still you could try this. Open your template/page and detach it, Modify/Templates/Detach from Template.

Highlight the row containig your Navigation Bar. Then make an Editable Region of it. Insert/Template Objects/Editable Region.

Then re-apply your template, Modify/Templates/Apply Template To Page.

I'm not sure if you can do this to the template itself and all pages will release the Navigation or whether you have to do it to all pages individually.

As I said, I'm not sure if this is the way to go as I don't use Templates but I'm sure someone will come up with a solution if it doesn't work.

Make sure you have backed up your files just in case. Let me know how you get on, good luck.

Regards, Paul

d a v e
01-26-2008, 03:36 PM
just make the links an editable region, but don't detach it from the template

macsolutions
01-26-2008, 04:30 PM
Thanks, for that!

Could you tell me where to place the following code as I need to make a region of my template editable.

Does it matter where the code is placed?


<span class="nolink">Home</span><a href="../Support/support.html">Support</a><a href="../Repairs/repairs.html">Repairs</a>

<a href="index.html">Home</a><span class="nolink">Support</span><a href="../Repairs/repairs.html">Repairs</a>

Tom

tux
01-26-2008, 04:50 PM
Were you have this.....

<a href="../index.html" target="_self">HOME</a><span style="color: #939393"> | </span><a href="../Support/support.html" target="_self">SUPPORT</a><span style="color: #939393"> | </span><a href="../Repairs/repairs.html" target="_self">REPAIRS </a><span style="color: #939393">| </span><a href="../Recovery/recovery.html">RECOVERY<span style="color: #939393"> |</span></a><a href="productivity.html"> PRODUCTIVITY<span style="color: #939393"> |</span></a> <a href="../IT Management/IT Management.html" target="_self">IT MANAGEMENT<span style="color: #939393"> | </span></a><a href="../Wireless Home/Wireless home.html">WIRELESS HOME<span style="color: #939393"> | </span></a><a href="../Ipod Repairs/ipod-repairs.html" target="_self">IPOD REPAIRS</a>

... replace it with the new code. Remember you will have to complete the code with the other links and then do the same with each page, changing the span position etc. for each page.

macsolutions
01-27-2008, 02:25 PM
I edited the code but it seems that the pages dont see each other.

INDEX PAGE
<h2><span class="nolink">HOME</span> | <a href="../Support/support.html">SUPPORT</a> | <a href="../Repairs/repairs.html">REPAIRS</a> | <a href="../Recovery/recovery.html">RECOVERY</a> | <a href="../Productivity/productivity.html">PRODUCTIVITY</a> | <a href="../IT Management/IT Management.html">IT MANAGEMENT</a> | <a href="../Wireless Home/Wireless home.html">WIRELESS HOME</a> | <a href="../Ipod Repairs/ipod-repairs.html">IPOD REPAIRS</a></h2>


SUPPORT PAGE
<h2><span class="nolink">HOME</span> | <a href="../Support/support.html">SUPPORT</a> | <a href="../Repairs/repairs.html">REPAIRS</a> | <a href="../Recovery/recovery.html">RECOVERY</a> | <a href="../Productivity/productivity.html">PRODUCTIVITY</a> |</a> <a href="../IT Management/IT Management.html">IT MANAGEMENT</a> | <a href="../Wireless Home/Wireless home.html">WIRELESS HOME</a>> | <a href="../Ipod Repairs/ipod-repairs.html">IPOD REPAIRS</a></h2>

tux
01-27-2008, 09:01 PM
Your Index Page seems to be okay but your SUPPORT Page is wrong.

For the support page where you have this...

<h2><span class="nolink">HOME</span> | <a href="../Support/support.html">SUPPORT</a> | <a href="../Repairs/repairs.html">REPAIRS</a> | <a href="../Recovery/recovery.html">RECOVERY</a> | <a href="../Productivity/productivity.html">PRODUCTIVITY</a> | <a href="../IT Management/IT Management.html">IT MANAGEMENT</a> | <a href="../Wireless Home/Wireless home.html">WIRELESS HOME</a>> | <a href="../Ipod Repairs/ipod-repairs.html">IPOD REPAIRS</a></h2>

you should have this....

<h2><a href="index.html">HOME</a> | <span class="nolink">SUPPORT</span> | <a href="../Repairs/repairs.html">REPAIRS</a> | <a href="../Recovery/recovery.html">RECOVERY</a> | <a href="../Productivity/productivity.html">PRODUCTIVITY</a> | <a href="../IT Management/IT Management.html">IT MANAGEMENT</a> | <a href="../Wireless Home/Wireless home.html">WIRELESS HOME</a> | <a href="../Ipod Repairs/ipod-repairs.html">IPOD REPAIRS</a></h2>

then for the Repairs page this....

<h2><a href="index.html">HOME</a> | <a href="../Support/support.html">SUPPORT</a> | <span class="nolink">REPAIRS</span> | <a href="../Recovery/recovery.html">RECOVERY</a> | <a href="../Productivity/productivity.html">PRODUCTIVITY</a> | <a href="../IT Management/IT Management.html">IT MANAGEMENT</a> | <a href="../Wireless Home/Wireless home.html">WIRELESS HOME</a>> | <a href="../Ipod Repairs/ipod-repairs.html">IPOD REPAIRS</a></h2>

and so on for the other pages.

Let me know how you get on.

Oh! By the way, when you post code, highlight it and click the code button (#) to wrap it in code tags.

macsolutions
01-28-2008, 09:38 AM
Nearly There! I have uploaded my site http://www.macsolutions.co.uk (http://www.macsolutions.co.uk/) and all seems to be working except for the HOME link in the top menu and TUITION in the bottom menu.

macsolutions
01-28-2008, 10:31 AM
I have just noticed that if you click on HOME from the bottom menu it will work, also if you click on tuition from the top menu it will work.

But HOME will not work if you click it from the top menu and TUITION will not work if you click it from the bottom menu, very strange.

tux
01-28-2008, 11:54 AM
I just check your site and most of the links work as they should.

You do have a few problems with some of the links though which are probably typos. Check through your code on each one you have a problem with and compare it to a page that works correctly.

One problem I noticed is that the PRODUCTIVITY link has yet to be changed.

Another is on serveral pages... the home link has for example

../IPOD REPAIRS/index.html

it should only have

index.html

Regards, Paul

macsolutions
01-28-2008, 12:36 PM
I search my site but could not find ( ../IPOD REPAIRS/index.html )

I have changed the productivity page.

The bottom menus have the old code for the top menu and the top menu has the old code for the bottom menu. Does this matter!

macsolutions
01-28-2008, 03:15 PM
Many thanks Tux, I think we are there! All my links are working.

There is still one problem however until the site is fully finished.

So I have posted it seperately, hope you can help.