Sign in with
Sign up | Sign in
Your question
Closed

Doing +1 hyperlinks in a single CSS file.

Last response: in Apps General Discussion
Share
July 24, 2011 9:28:13 PM

Hi everyone!

So I'm sort of new on CSS.

I have a perhaps easy questions for you guys.

So I'm starting doing a general .CSS file for merging it (or invoking) into an HTML one.
Thing is, I'm supposed to do different styles for each hyperlinks , or at least, +1 style
like when you have a hyperlink
a.link {yyyyy}


& then when you point on it you get it different by doing

a:hover {yyyyX}

(& with doing yyyyX I mean, changing for instance font-weight:y or anything you will)


Well, thing is, I've making different changes into a:hover & a:visited, like to make it somehow animated w/o having to get deep into other things. Since I'm supposed to do +1, I've tagged first one as a.one:link & so one, a.one:hover; a.two:link & a.two:visited...

bad thing is, I get nothing but the mere links once I've tagged them like that.

Why?

Thanks for your replies, I'll be glad to read & consider them :) 
a b L Programming
July 29, 2011 9:14:02 PM

The missing part is how are you declaring the +1 links in your HTML? And while you are at it, post the actual CSS entries also.
Score
0
July 30, 2011 4:02:34 AM


Here it is the one .CSS part for the links (so far, I set two links only, thinking it wouldn't do sense do more):

a.one:link /* unvisited link */
{
#FFFF99;
display:block;
background-color:#FF0999;
width:300px;
text-align:center;
padding:5px;
}

a.one:visited
{
#FFFF99;
display:block;
background-color:#FF0999;
width:300px;
text-align:center;
padding:5px;
}

a.one:hover
{
font-weight:bold;
background-color:#FF0000; /*something darker than the visited/unvisited one*/

padding:7px;
}

a.one:active
{
font-weight:bold;-
background-color:#FF0000;
}


a.two:link /* unvisited link */
{
#FFFF99;
display:block;
background-color:#FF0999;
width:300px;
text-align:center;
padding:5px;
}

a.two:visited
{
#FFFF99;
display:block;
background-color:#FF0999;
width:300px;
text-align:center;
padding:5px;
}

a.two:hover
{
font-weight:bold;
background-color:#FF0000; /*something darker than the visited/unvisited one, too */

padding:7px;
}

a.two:active
{
font-weight:bold;-
background-color:#FF0000;
}

******


But if I make:

a:link
{
...
}

I will indeed, get what I look for. It's just when I tried to "tag" them (a.one:link / a.two:link) when I get this.



Thnx for replying PhilFrisbie!!!
Score
0
Related resources

Best solution

a b L Programming
July 31, 2011 12:02:16 AM

I did not see any HTML examples, but I will take a stab at this.

Are you declaring a class like this: <a class=""one" href="". . .

Or are you declaring the class some other way?
Share
July 31, 2011 3:07:55 AM

Hi there!

I've been doing it like this:

<a href="default.html">Back to homepage</a> for one of the links

<a href="gallery.html">Some extra stuff here...</a> for the second one.

But, for what your declaration shows, I guess I'm doing wrong... :S


In the mean time I tried changing some things in my .CSS,
& it somehow worked:

I did a:link {...} for the first one,
& then a.one:link for the other one,
weird thing is that, the first link
will be the only one showing the block all of the time,
second one will do it only when hovered.


Thanks for your replies!
Score
0
July 31, 2011 3:32:24 AM

Update... I just opened the .CSS, to start working on it... realized that, now both links have the color block on them.... strange thing... but both have the same first a:link's color :S

Edit: There was a typo: a.one.visited... instead of :

But now block works. & I'm trying what you mentioned before...
Score
0
August 7, 2011 7:54:04 PM

Best answer selected by Al Man.
Score
0
August 7, 2011 9:43:33 PM

This topic has been closed by Area51reopened
Score
0
!