|
|
|||||||||
|
Cascading style sheets part 7 - Different coloured links on a pageThis is the end of the basic tutorial - but I can't resist showing you one little trick. On this page the links are green because I did control-click in the css editor and defined a new element - I chose a:link, and defined it that way. On the other pages you get the default link colour of blue, right? On this page you get: home page I chose decoration to be none, so no underlines. I chose red for the a:visited (another new element), and made a:hover the same as a:link, but with an underline. So when you hover over a link, the underline appears - try 'home page' in the previous paragraph. Make sure your 'a' elements are in the right order - link, visited, hover - if you've been duplicating they may not be, but you can scoot them up and down in the css editor, select one and use the arrows at the bottom. NB 'hover' does not work in Netscape 4 and there's no way you can make it.But what if you want links a different colour on parts of the page, say on a coloured background? Jeff Seal has done an excellent tutorial on this - go to http://www.stochasticaphelion.com/Tutorials/csslinks/csscolorlinks.html. |
||||||||
| Here's a link to Jeff's tutorial - see how I have yellow links in here, to show up on the green background ? This whole paragraph is a link to Jeff's tutorial. | |||||||||
| Read Jeff's tutorial for the full explanation and illustration, but it's fairly straightforward.
In your style sheet, you'll probably have defined these elements:
or at least the first one. To make a second set of links, to use on part of the page, make a new class (that's by clicking the big-dot icon) - call it something like .newlink or .altlink. Then make some more classes, being very careful about dots, spaces etc. - like this:
You don't need to use any of these other than .newlink and .newlink a:link unless you want to. Define them in the inspector according to how they should look on the parts of the page where you want them different. Now go to the text that is on a different coloured background, where you want it to be the alternative style of link. Make the link. Now select it, and apply .newlink as Span. Be careful - if you are using a version of Golive before version 6, your sub-classes (like .newlink a:link) will show up as being available for you to apply - don't. In Golive 6 you will see the only one you want or need, which is .newlink. It's important that the tags for the class end up outside the ones for the link, so to make sure, select a space either side of the linked text if you can, and apply the class to the whole lot. If our new class isn't working properly, you may have to tweak the code to get it all in the right order. ... and if you want a third set of links, for yet another part of the page? Easy, just make a new set of classes. Don't be tempted to start any of the names with a number, though, won't work. You might have:
.. define those the way you want them, then select some text, make the link and apply .greenlink via the css palette (use Span). Very important:Please look at the lists above. The order is crucial, you have to get it correct or the style won't work.
Or make up your own. |
|||||||||
 |
|||||||||