Page 1 of 1
[SOLVED] Breadcrumbs link colour
Posted: Wed May 21, 2008 6:08 am
by 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
Re: Breadcrumbs link colour
Posted: Wed May 21, 2008 8:13 pm
by Dr.CSS
It's div id="Navigation" then you have the breadcrumb tag?...
Re: Breadcrumbs link colour
Posted: Fri May 23, 2008 11:19 am
by 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.
Re: Breadcrumbs link colour
Posted: Fri May 23, 2008 6:23 pm
by 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@****
Re: Breadcrumbs link colour
Posted: Mon May 26, 2008 7:47 am
by 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?
Re: Breadcrumbs link colour
Posted: Mon May 26, 2008 4:23 pm
by 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...
Re: Breadcrumbs link colour
Posted: Tue May 27, 2008 1:11 pm
by volcanoboy
ok,
thanks alot
The finnished pages can be found at
www.moyo.no (if interested)