This is Interesting: Free Magazines for Graphics designers and webmasters  


Home > Archive > Dreamweaver > April 2004 > CSS - HYPERLINKS effects





You are viewing an archived Text-only version of the thread. To view this thread in it's original format and/or if you want to reply to this thread please [click here]

Author CSS - HYPERLINKS effects
Ramin_85

2004-04-21, 2:37 pm

hi

i put a CSS style sheet for my pages, and for the hyperlinks I put a
[i]underline[/i] effect, so when I move mouse over the links it'll be
underlined. but the prob is for the second time when go over them the underline
won't work (probebly I should do something about the [i]visited[/i] style).
anybody can help?

ZhongQiang

2004-04-21, 2:37 pm

hi.. the most possible reason is that you placed the "link" and "hover" tag but
not the "visited" tag. following is something which you could refer at. i have
tested this out and there shdn't be a prob with that.. hope that helped you a
little.. =) (for my version of css, you would have to place the class element
in the a href tag for the effect to work. however, if you do not wana do as
such, you could juz make a copy of what you had for the "link" and place the
"visited" instead, so that you could have all 3 tags)

a.hyperlink:link {color: #666666; text-decoration: none}
a.hyperlink:visited {color: #666666; text-decoration: none}
a.hyperlink:hover {color: #959595; text-decoration: underline}

lorrainedavis

2004-04-21, 2:37 pm

check you line height if it's not high enough you can't see the line.
lorrainedavis

2004-04-21, 2:37 pm

check you line height if it's not high enough you can't see the line.
lorrainedavis

2004-04-21, 2:37 pm

check you line height if it's not high enough you can't see the line.
lorrainedavis

2004-04-21, 2:37 pm

check you line height if it's not high enough you can't see the line.
lorrainedavis

2004-04-21, 2:37 pm

check you line height if it's not high enough you can't see the line.
Murray *TMM*

2004-04-21, 2:38 pm

The real answer is this -

You should make the order of your pseudo-classes always be LINK - VISITED -
HOVER/ACTIVE because of the cascade of styles. The way I have listed them
above implies that the order of hover and active is not so important (since
some browsers never show you the active state anyhow), but the order of link
and visited is critical to the proper function of your pseudo-classes.

In fact the method shown below is not the ideal way of doing things, since
it requires that each line be explicitly styled, e.g.,

<a href="foo.html" class="hyperlink">foo</a>

While this may be useful in a specific case, there is a much more efficient
and general methodology that would work better -

..hyperlink a:link { ... }

Using this method only requires that you style the link's container not the
link itself, e.g.,

<div class="hyperlink"><a href="foo.html">foo</a></div>

In the latter event, ALL links within that <div> would receive the
"hyperlink" style.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
ANSWERS
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"ZhongQiang" <webforumsuser@macromedia.com> wrote in message
news:c5ihn8$i02$1@forums.macromedia.com...
> hi.. the most possible reason is that you placed the "link" and "hover"

tag but
> not the "visited" tag. following is something which you could refer at. i

have
> tested this out and there shdn't be a prob with that.. hope that helped

you a
> little.. =) (for my version of css, you would have to place the class

element
> in the a href tag for the effect to work. however, if you do not wana do

as
> such, you could juz make a copy of what you had for the "link" and place

the
> "visited" instead, so that you could have all 3 tags)
>
> a.hyperlink:link {color: #666666; text-decoration: none}
> a.hyperlink:visited {color: #666666; text-decoration: none}
> a.hyperlink:hover {color: #959595; text-decoration: underline}
>



Ramin_85

2004-04-21, 2:42 pm

Hi lorrainedavis.

ok... lorrainedavis, i have to say my .css has those lines already.
and for the second post, Zhong i'm sorry but I didn't really catch on what you
said.
but anyway, please take a look at my .css and put an answer here. or if you
could fix it for me, that'd be great.

thanks anyway

ZhongQiang

2004-04-21, 2:47 pm

attatched is smth i did.. hope that helped a little.. correct me if i'm wrong..
=)

Original Code

--------------------------------------------------------------------------------
------------------
A:hover {
COLOR: #003399;
text-decoration: underline overline;


}
A:active {
COLOR: #003399; TEXT-DECORATION: underline overline;
}
A:visited {
COLOR: #FFFFFF;
}
A {
COLOR: #FFFFFF;
TEXT-DECORATION: none;
}


--------------------------------------------------------------------------------
------------------
Corrected code

--------------------------------------------------------------------------------
------------------
a:link {color: #FFFFFF; text-decoration: none}
a:visited {color: #FFFFFF; text-decoration: none}
a:hover {color: 003399 text-decoration: underline overline}

Ramin_85

2004-04-21, 2:48 pm

wow! .. ok thanks alot Zhong :D

I'm happy again :D !
ZhongQiang

2004-04-21, 2:53 pm

you're most welcomed.. all the best in your project.. =) cheers!
Sponsored Links


Copyright 2003 - 2009 forum4designers.com  Software forum  Computer Hardware reviews