CSS Pseudo Classes

10/04/2008, 19h49

:confused;

Hello. I am hoping you can me with a problem that I have been struggling
with for the past couple of weeks. I am attempting to create a webpage using
Cascading Style Sheets and I need to create two sets of hyperlinks colors using
the Selectors for a:link, a:visited and a:hover.

Here is an example of the type of effect that I am trying to create:

http://www.plantation.org/web/residents.html - This page has a set of
hyperlinks are black, that switch to the color white on hover, and another set
of hyperlink colors that are blue.

Here are the two classes that I need to design:
First Class:

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
font-weight: bold;
color: #FFFF33;
text-decoration: underline;
}

Second Class:
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFF33;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFF33;
font-size: 10px;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFF33;
text-decoration: underline;
}

Can you explain how to do this using Dreamweaver? I know how to create two
seperate style sheets using CSS and attach them to a page but when I do one
sheet overrides the other. I haven't had much luck in locating any information
on the Internet and I confirmed with Customer Support over the phone that there
isn't any documentation either in the forum or the guide on how to do this.
Thanks in advance for your

10/04/2008, 20h05

>> I need to create two sets of hyperlinks colors using the Selectors for
>> a:link, a:visited and a:hover.

http://www.projectseven.com/tutorial...sses/page3.htm

--
Regards

John Waller

10/04/2008, 21h44

On Thu, 10 Apr 2008 18:49:37 +0000 (UTC), "slyboy69er"
<webforumsuser@macromedia.com> wrote:

>:confused;
>
> Hello. I am hoping you can me with a problem that I have been struggling
>with for the past couple of weeks. I am attempting to create a webpage using
>Cascading Style Sheets and I need to create two sets of hyperlinks colors using
>the Selectors for a:link, a:visited and a:hover.
>
> Here is an example of the type of effect that I am trying to create:

Why use two style sheets - just create two classes with different
pseudo selectors and select the one you need.

Also greatly simplified the css - you have a lot of redundant code.

is this what you mean ??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

body {background-color:#999999;}

..link1 a { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
font-weight: bold;
text-decoration: underline;
margin: 10px; }

..link1 a:link, .link1 a:visited { color: #FFFFFF; }
..link1 a:hover { color: #FFFF33; }

..link2 a { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
margin: 20px; }

..link2 a:link { color: #FFFF33; }
..link2 a:visited { color: #FFFF33; }
..link2 a:hover { color: #FFFF33; text-decoration: underline; }
</style>
</head>

<body>

<div class="link1">
<h1>Links 1</h1>
<a href="#">one</a>
<a href="#">two</a>
<a href="#">three</a>
<a href="#">four</a></div>
<div class="link2">
<h1>Links 2</h1>
<a href="#">one</a>
<a href="#">two</a>
<a href="#">three</a>
<a href="#">four</a>
</div>
 
</body>
</html>
--

~Malcolm~*...
~*

11/04/2008, 19h30

On Thu, 10 Apr 2008 18:49:37 +0000 (UTC), "slyboy69er"
<webforumsuser@macromedia.com> wrote:

>:confused;
>
> Hello. I am hoping you can me with a problem that I have been struggling
>with for the past couple of weeks. I am attempting to create a webpage using
>Cascading Style Sheets and I need to create two sets of hyperlinks colors using
>the Selectors for a:link, a:visited and a:hover.
>

>
> Can you explain how to do this using Dreamweaver? I know how to create two
>seperate style sheets using CSS and attach them to a page but when I do one
>sheet overrides the other. I haven't had much luck in locating any information
>on the Internet and I confirmed with Customer Support over the phone that there
>isn't any documentation either in the forum or the guide on how to do this.
>Thanks in advance for your

Did that ???
--

~Malcolm~*...
~*

11/04/2008, 20h00

slyboy69er

If you need to create two sets, ideally, either name the divs, tables,
whatever and put the parameters in there:

#xxx a {
xxx
}

or create classes

.pinklink a {
xxxx
}

.bluelink a {
xxxx
}

If you want the background to change color on link, hover, etc. you need this
within the curly brackets:

{
background-color: #xxxxxx;
display: block;
}

Then the background color will change on the rollover (once you change the
colour under the a:hover attribute... etc., etc.

Cheers

JJ

15/04/2008, 15h22

Thank you for your John. The document that you provided solved my problem!

15/04/2008, 15h24

Thanks for your John. The document you provided solved my problem

15/04/2008, 15h28

Hello Malcolm. Thak you for taking the time to contact me with your suggestion.
Another member provided me with some documentation that ed answer my
question but I used your suggestion about creating a single style sheet. Best
wishes!

15/04/2008, 15h29

:grin; It did - thank you very much for your !

15/04/2008, 15h31

:grin; Thanks for getting back to me. It worked! Best wishes.

10/04/2008, 19h49	#1
slyboy69er Messages: n/a Hébergeur:	CSS Pseudo Classes :confused; Hello. I am hoping you can me with a problem that I have been struggling with for the past couple of weeks. I am attempting to create a webpage using Cascading Style Sheets and I need to create two sets of hyperlinks colors using the Selectors for a:link, a:visited and a:hover. Here is an example of the type of effect that I am trying to create: http://www.plantation.org/web/residents.html - This page has a set of hyperlinks are black, that switch to the color white on hover, and another set of hyperlink colors that are blue. Here are the two classes that I need to design: First Class: a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-small; font-weight: bold; color: #FFFFFF; text-decoration: underline; } a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-small; font-weight: bold; color: #FFFFFF; text-decoration: underline; } a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-small; font-weight: bold; color: #FFFF33; text-decoration: underline; } Second Class: a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #FFFF33; } a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #FFFF33; font-size: 10px; } a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #FFFF33; text-decoration: underline; } Can you explain how to do this using Dreamweaver? I know how to create two seperate style sheets using CSS and attach them to a page but when I do one sheet overrides the other. I haven't had much luck in locating any information on the Internet and I confirmed with Customer Support over the phone that there isn't any documentation either in the forum or the guide on how to do this. Thanks in advance for your

10/04/2008, 20h05	#2
John Waller Messages: n/a Hébergeur:	Re: CSS Pseudo Classes >> I need to create two sets of hyperlinks colors using the Selectors for >> a:link, a:visited and a:hover. http://www.projectseven.com/tutorial...sses/page3.htm -- Regards John Waller

10/04/2008, 21h44	#3
Malcolm _ Messages: n/a Hébergeur:	Re: CSS Pseudo Classes On Thu, 10 Apr 2008 18:49:37 +0000 (UTC), "slyboy69er" <webforumsuser@macromedia.com> wrote: >:confused; > > Hello. I am hoping you can me with a problem that I have been struggling >with for the past couple of weeks. I am attempting to create a webpage using >Cascading Style Sheets and I need to create two sets of hyperlinks colors using >the Selectors for a:link, a:visited and a:hover. > > Here is an example of the type of effect that I am trying to create: Why use two style sheets - just create two classes with different pseudo selectors and select the one you need. Also greatly simplified the css - you have a lot of redundant code. is this what you mean ?? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> body {background-color:#999999;} ..link1 a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-small; font-weight: bold; text-decoration: underline; margin: 10px; } ..link1 a:link, .link1 a:visited { color: #FFFFFF; } ..link1 a:hover { color: #FFFF33; } ..link2 a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; margin: 20px; } ..link2 a:link { color: #FFFF33; } ..link2 a:visited { color: #FFFF33; } ..link2 a:hover { color: #FFFF33; text-decoration: underline; } </style> </head> <body> <div class="link1"> <h1>Links 1</h1> <a href="#">one</a> <a href="#">two</a> <a href="#">three</a> <a href="#">four</a></div> <div class="link2"> <h1>Links 2</h1> <a href="#">one</a> <a href="#">two</a> <a href="#">three</a> <a href="#">four</a> </div>   </body> </html> -- ~Malcolm~... ~

11/04/2008, 19h30	#4
Malcolm _ Messages: n/a Hébergeur:	Re: CSS Pseudo Classes On Thu, 10 Apr 2008 18:49:37 +0000 (UTC), "slyboy69er" <webforumsuser@macromedia.com> wrote: >:confused; > > Hello. I am hoping you can me with a problem that I have been struggling >with for the past couple of weeks. I am attempting to create a webpage using >Cascading Style Sheets and I need to create two sets of hyperlinks colors using >the Selectors for a:link, a:visited and a:hover. > > > Can you explain how to do this using Dreamweaver? I know how to create two >seperate style sheets using CSS and attach them to a page but when I do one >sheet overrides the other. I haven't had much luck in locating any information >on the Internet and I confirmed with Customer Support over the phone that there >isn't any documentation either in the forum or the guide on how to do this. >Thanks in advance for your Did that ??? -- ~Malcolm~... ~

11/04/2008, 20h00	#5
jhabrix Messages: n/a Hébergeur:	Re: CSS Pseudo Classes slyboy69er If you need to create two sets, ideally, either name the divs, tables, whatever and put the parameters in there: #xxx a { xxx } or create classes .pinklink a { xxxx } .bluelink a { xxxx } If you want the background to change color on link, hover, etc. you need this within the curly brackets: { background-color: #xxxxxx; display: block; } Then the background color will change on the rollover (once you change the colour under the a:hover attribute... etc., etc. Cheers JJ

15/04/2008, 15h22	#6
slyboy69er Messages: n/a Hébergeur:	Re: CSS Pseudo Classes Thank you for your John. The document that you provided solved my problem!

15/04/2008, 15h24	#7
slyboy69er Messages: n/a Hébergeur:	Re: CSS Pseudo Classes Thanks for your John. The document you provided solved my problem

15/04/2008, 15h28	#8
slyboy69er Messages: n/a Hébergeur:	Re: CSS Pseudo Classes Hello Malcolm. Thak you for taking the time to contact me with your suggestion. Another member provided me with some documentation that ed answer my question but I used your suggestion about creating a single style sheet. Best wishes!

15/04/2008, 15h29	#9
slyboy69er Messages: n/a Hébergeur:	Re: CSS Pseudo Classes :grin; It did - thank you very much for your !

15/04/2008, 15h31	#10
slyboy69er Messages: n/a Hébergeur:	Re: CSS Pseudo Classes :grin; Thanks for getting back to me. It worked! Best wishes.

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email