Links / Iframes

Jack2003 · 09-07-2003, 11:24 AM

Hi,

A have developed a webpage in dreamweaver-mx. This page contains 2 iframes.
In each frame a different html-page is beeing displayed. I defined a css sheet with the following propperties:

a:link {color: #000000; text-decoration: none; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px;}
a:visited {color: #000000; text-decoration: none; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px;}
a:active {color: #FF0000; font-weight : bold; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px;}
a:hover {color: #FF0000; font-weight : bold; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px;}

When I click on a link in the first frame this link is displayd red (#FF0000) but when I click on a link in the second frame the selected link in the first frame is reset to the default clour black (#000000).

What should I do to keep the selected link in the first frame the colour red (#FF0000) when I click on a link in the second frame.
To use the property 'visited' is not good because then all the selected links will turn red as the are activated in the past.

I hope my question is not confusing.

Thanks in advance,
Jack

mzanimephp · 09-08-2003, 03:00 PM

No, not at all.

I assume the (first) frame on the left is for navigation or something correct? To make them appear always as red I would suggest that you make a new pseudo class.

Currently you have this:

Code:

a:link {color: #000000; text-decoration: none; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px;} 
a:visited {color: #000000; text-decoration: none; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px;} 
a:active {color: #FF0000; font-weight : bold; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px;} 
a:hover {color: #FF0000; font-weight : bold; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px;}

You might want to modify this though, because it isn't all that great to put your font speicifications inside your pseudo selectors.

Try this...

Code:

/* define default fonts for every block-level element up here */

td, th, tr, p, div, ol, li, ul, dt, dd  {  
   font-family:Verdana, Arial, Helvetica, sans-serif; 
   font-size: 11px;
} 

/* Then define your pseudo selectors seperately here. */
/* They will inherit the same font's if enclosed in a block level element like <p> or <td> */

a:link    { color: #000000; text-decoration: none; }
a:visited { color: #000000; text-decoration: none; } 
a:active  { color: #FF0000;  text-decoration: underline; } 
a:hover   { color: #FF0000;  text-decoration: underline; } 

/* Now for your links on the left (first frame) we create a custom pseudo selector class, calling it "nav" */

.nav:link    { color: #FF0000; text-decoration: none; }
.nav:visited { color: #FF0000; text-decoration: none; } 
.nav:active  { color: #FF0000;  text-decoration: underline; } 
.nav:hover   { color: #FF0000;  text-decoration: underline; }

If your calling to all of your pages via a single CSS file, then you must use <a href="whatever.htm" class="nav"> for the links in the first frame to always appear red.

Hope this helps.

-Mike.