[SOLVED] Breadcrumbs link colour

[volcanoboy]

Hey,

i'm having some problems changing the color of the links in my breadcrumbs. I'm sure i've done this before but can't get it to work now. My breadcrumbs are on a gradient red/orange background and i need them to be white. The Div is called Navigation.

Cheers

[Dr.CSS]

It's div id="Navigation" then you have the breadcrumb tag?...

[volcanoboy]

like this yes

Code: Select all

 <!-- Begin Naviagtion -->
         <div id="navigation">You are here: {breadcrumbs}</div>
		 <!-- End Naviagtion -->
		 

I don't have a live link for the finnished project but here is an early devolopment template that is pretty much the same.
http://www.adreklame.no/testcms/index.p ... le-oftedal

The problem is that my red links doesn't show very well if there are subpages.

[Dr.CSS]

You have the CSS, uh backwards...

a.navigation:link { color: #333 ; font-weight: normal; text-decoration: none; }
a.navigation:visited { color: #333 ; font-weight: normal; text-decoration: none; }
a.navigation:hover { color: #fff ; font-weight: normal; text-decoration: none; }
a.navigation:active { color: #d3351b ; font-weight: normal; text-decoration: none; }

Should be...
#navigation a, a:link, a:visited { color: #333 ; font-weight: normal; text-decoration: none; }

Once you make a declaration in the first one you only need to declare the changes, no need to repeat calls...

There is no a class of navigation, it works on the footer because there is an a class of footer...

post@****

[volcanoboy]

ah,

thanks for the adcive. It does work. However it also changes the colour on my relational links. Which i don't really understand.

I removed:

Code: Select all

a.navigation:link { color: #333 ; font-weight: normal; text-decoration: none; }
a.navigation:visited { color: #333 ; font-weight: normal; text-decoration: none; }
a.navigation:hover { color: #fff ; font-weight: normal; text-decoration: none; }
a.navigation:active { color: #d3351b ; font-weight: normal; text-decoration: none; }

and added:

Code: Select all

#navigation a:link, a:visited { color: #fff ; font-weight: normal; text-decoration: none; }

After trying this and that, moving the statements up and down in my stylesheet I did find something that works. But i'm not sure it's the right way to do it. Anyway, my stylesheet now looks like this:

Code: Select all

body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; background-color: #4e555e; }
#wrapper { 
 margin: 0 auto;
 width: 922px;
}
#menu { color: #fff; width: 602px; background-image: url(uploads/images/Sitepics/MOYO_header-1.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: 0 0; text-align: right; height: 35px; overflow: hidden; margin: 10px 0 5px; padding-top: 15px; padding-left: 320px; }
#header { width: 922px; height: 260px; margin-right: 0; margin-bottom: 5px; margin-left: 0; }
#navigation { width: 902px; color: #fff; font-size: 90%; padding: 7px 10px; margin: 0 0 5px; background: 
#4e555e url(uploads/images/Sitepics/MOYO_bgRepeat-1.gif) repeat-y; text-align: right; overflow: hidden; }
#footer { width: 902px; color: #333; font-size: 80%; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; text-align: right; margin: 5px 0 10px; padding: 10px; }
#relational { width: 902px; color: #333; font-size: 90%; background: #fff; text-align: right; padding: 10px; }
#relational a, a:link, a:visited { color: #D3351B ; font-weight: normal; text-decoration: none; }
#relational a:hover { color: #000 ; font-weight: normal; text-decoration: none; }
a,
a:link 
a:active { color: #d3351b; text-decoration: none; }
a:visited { color: #d3351b; text-decoration: none;                /* a different color can be used for visited links */
}
a:hover {
   text-decoration: underline;
   color: #000;
}
a.footer:link { color: #333 ; font-weight: normal; text-decoration: none; }
a.footer:visited { color: #333 ; font-weight: normal; text-decoration: none; }
a.footer:hover { color: #fff ; font-weight: normal; text-decoration: none; }
a.footer:active { color: #d3351b ; font-weight: normal; text-decoration: none; }
img {
   border: 0;
}
#navigation a:link, a:visited { color: #fff ; font-weight: normal; text-decoration: none; }
#navigation a:hover { color: #000 ; font-weight: normal; text-decoration: none; }

Any advice?

[Dr.CSS]

That's fine, most times you will want to declare a base link style like you did then from there any other link you want diff. you call it out...

[volcanoboy]

ok,

thanks alot
The finnished pages can be found at www.moyo.no (if interested)