Jump to content


Photo

Having more than one a:link


  • Please log in to reply
7 replies to this topic

#1 turbocueca

turbocueca
  • Members
  • PipPipPip
  • Advanced Member
  • 62 posts

Posted 04 April 2006 - 09:52 PM

I want to know if it is possible to have two or more a:link on the css styles, 'cause I want to make two different colors for the links of my website.

#2 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 04 April 2006 - 11:17 PM

It is, if you use a descending selector. Just use the parent element, (#element, .element) and then put in a:whatever. Like this: #element a:whatever.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#3 turbocueca

turbocueca
  • Members
  • PipPipPip
  • Advanced Member
  • 62 posts

Posted 05 April 2006 - 08:52 AM

where am I supposed to put that?
What's that #?

#4 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 05 April 2006 - 11:17 AM

With CSS there three selectors class (.), id (#) and html tag name (body, html etc)

Now what moberemk meant was to give your anchor tag the id of elementname like so:
<a href="home.html" id="navlink">Home</a>
Now to style any anchor tag with the id of navlink you use the following CSS:
#navlink a:link, #navlink a:active, #navlink a:visited {
    color: #FF0000;
}
#navlink a:hover {
    color: #00FF00;
}
Say that you want another link but want it different you'll just change the id value to different one such as "bodylink":
<a href="home.html" id="bodylink">Home</a>
Then with your css you'll do this:
#navlink a:link, #navlink a:active, #navlink a:visited {
    color: #FF0000;
}
#navlink a:hover {
    color: #00FF00;
}

#bodylink a:link, #bodylink a:active, #bodylink a:visited {
    color: #0000FF;
}
#bodylink a:hover {
    color: #FF0000;
}

Have a read on CSS syntax over at [a href=\"http://www.w3schools.com/css/css_syntax.asp\" target=\"_blank\"]w3schools.com[/a] for a better understanding of CSS selectors.

#5 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 05 April 2006 - 01:56 PM

Another, probably better way of doing it, would be to use the (.) selector and create a class that you can use over and over again.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#6 turbocueca

turbocueca
  • Members
  • PipPipPip
  • Advanced Member
  • 62 posts

Posted 05 April 2006 - 02:40 PM

I understand +/-, but whats the problem in here, it doesnt work correctly:

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
#navlink a:link, #navlink a:active, #navlink a:visited {
    color: #FF0000;
}
#navlink a:hover {
    color: #00FF00;
}
-->
</style>
</head>
<a href="home.html" id="navlink">Home</a>
<body>
</body>
</html>


#7 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 05 April 2006 - 06:30 PM

Change this:
<a href="home.html" id="navlink">Home</a>
to
<div id="navlink"><a href="home.html">Home</a></div>
Your CSS should now work.

#8 turbocueca

turbocueca
  • Members
  • PipPipPip
  • Advanced Member
  • 62 posts

Posted 05 April 2006 - 06:36 PM

thanks people for everything, i finally could implement two link styles at my website:

[a href=\"http://infocenter.awardspace.com/inter/news2.php\" target=\"_blank\"]http://infocenter.awardspace.com/inter/news2.php[/a]




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users