Preserved Topic: Really basic question (I think??) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=17842" title="Pages that link to Preserved Topic: Really basic question (I think??)" rel="nofollow" >Preserved Topic: Really basic question (I think??)\$

Author	Thread
TheTrixter Bipolar (III) Inmate From: Derbyshire, UK Insane since: Jul 2000	posted 09-20-2000 19:50 I've noticed on some web pages (for instance altavista, yahoo etc) that at the bottom of their pages they just have simple text links to other site etc. All well and good, what I can't figure out is how they make the "apparently" normal text (ie not a gif image) change colour on mouse over. I've had a brief look at the source code and can't see anything obvious (bearing in mind I'm still a beginner at HTML, I cheat and use Dreamweaver at the moment, sorry guys). I'm sure its something easy but I need a little help getting there.
DarkGarden Paranoid (IV) Inmate From: in media rea Insane since: Jul 2000	posted 09-20-2000 20:00 Well, it's sort of something easy...sort of not. What they're using is called a "hover" tag for CSS (Cascading Style Sheets) Style Sheets lay out the way tags, or classes look by using simplistic coding in the head of the HTML document, or right inline on the page where needed. In this case, the CSS applies to the <A> tag, but with a specialized class A.hover In the head of the document, you'd set your <A> tag properties by typing in code: a { font-family: "Arial", Helvetica, san-serif; font-size: 11px; color: #CCCCCC; text-decoration: none} This will set ALL the text links that you make, automatically in Arial or Helvetica, 11 pixels high, grey, with no underline (text-decoration: none is the property that removes the underline) Then right under that, set the hover properties code: a:hover { text-decoration: underline; color: #FFFFFF} This means that when you mouseOver the link, it will change to white, and underline itself. Now..the good news: Netscape 4.X and IE 4.X both accept many CSS properties, and if they aren't accepted, they're merely ignored, so there's no ERRORS that will show if you set your page properly. The Bad news: Netscape doesn't recognize the "hover" class until Communicator 6.0, so people using NS will only see the grey, non-underlined link that you set up for the <A> tag. Hope that helps a little...there should be tutorials on CSS very soon at http://gurusnetwork.com Checking them out could be very helpful for you. <img border=0 align=absmiddle src="http://www.ozones.com/forum/biggrin.gif"> Peter ICQ:# 10237808 [This message has been edited by DarkGarden (edited 20-09-2000).]
Reve Paranoid (IV) Inmate From: I own you at Quake Insane since: Aug 2000	posted 09-20-2000 22:22 http://www.serversideproductions.com if you look in the source, the first lines are <html> <head> <title>Server Side Productions</title> </head> <LINK REL=STYLESHEET TYPE="text/css" HREF="http://www.serversideproductions.com/style.css"> <body bgcolor="#999999" background="/images/mainbg2.gif"> the code <LINK REL=STYLESHEET TYPE="text/css" HREF="http://www.serversideproductions.com/style.css"> links to my css for the site, all thats in it is <style TYPE="text/css"> <!-- {font-family: arial} A:link { text-decoration: none; color: #0000CC;} A:visited { text-decoration: none; color: #0000CC;} A:active { text-decoration: none; color: #808080;} A:hover { text-decoration: none; color: #000099;} --> </style> the code to make it not underlined is A:hover { text-decoration: none; color: #000099;} and to change the color of your links, just edit the the hexdecimal color codes, i give you permission to use my template <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif"> hope i helped
TheTrixter Bipolar (III) Inmate From: Derbyshire, UK Insane since: Jul 2000	posted 09-20-2000 22:38 Hey, thanks you guys, I've heard of CSS before but never really got into them. I'll give that a try later (must get rid of Dreamweaver and learn moe of the code, just can't find enough time at present).
Steve Maniac (V) Inmate From: Boston, MA, USA Insane since: Apr 2000	posted 09-20-2000 22:51 Dreamweaver has some pretty potent CSS tools I think - look around in it. Learning code is a great idea, but in the meantime use the tools you have. DG - what a great post. Whew. What more needs to be said? <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif">
Jestah Maniac (V) Mad Scientist From: Long Island, NY Insane since: Jun 2000	posted 09-20-2000 23:55 Alright, Ill finsih my tut ...
TheTrixter Bipolar (III) Inmate From: Derbyshire, UK Insane since: Jul 2000	posted 09-25-2000 09:40 Hey, you guys are the best. I finally got a chance to try the CSS styles at the weekend, and it worked a treat. Once again, the great Ozone asylum has pulled another lost soul through to the other side. Seriously, thanks!

Preserved Topic: Really basic question (I think??)\$

Author

Thread

TheTrixter
Bipolar (III) Inmate

From: Derbyshire, UK
Insane since: Jul 2000

posted 09-20-2000 19:50

I've noticed on some web pages (for instance altavista, yahoo etc) that at the bottom of their pages they just have simple text links to other site etc. All well and good, what I can't figure out is how they make the "apparently" normal text (ie not a gif image) change colour on mouse over.
I've had a brief look at the source code and can't see anything obvious (bearing in mind I'm still a beginner at HTML, I cheat and use Dreamweaver at the moment, sorry guys).
I'm sure its something easy but I need a little help getting there.

DarkGarden
Paranoid (IV) Inmate

From: in media rea
Insane since: Jul 2000

posted 09-20-2000 20:00

Well, it's sort of something easy...sort of not.

What they're using is called a "hover" tag for CSS (Cascading Style Sheets)

Style Sheets lay out the way tags, or classes look by using simplistic coding in the head of the HTML document, or right inline on the page where needed.

In this case, the CSS applies to the <A> tag, but with a specialized class A.hover

In the head of the document, you'd set your <A> tag properties by typing in

code:

a {  font-family: "Arial", Helvetica, san-serif; font-size: 11px; color: #CCCCCC; text-decoration: none}

This will set ALL the text links that you make, automatically in Arial or Helvetica, 11 pixels high, grey, with no underline (text-decoration: none is the property that removes the underline)

Then right under that, set the hover properties

code:

a:hover { text-decoration: underline; color: #FFFFFF}

This means that when you mouseOver the link, it will change to white, and underline itself.

Now..the good news: Netscape 4.X and IE 4.X both accept many CSS properties, and if they aren't accepted, they're merely ignored, so there's no ERRORS that will show if you set your page properly.

The Bad news: Netscape doesn't recognize the "hover" class until Communicator 6.0, so people using NS will only see the grey, non-underlined link that you set up for the <A> tag.

Hope that helps a little...there should be tutorials on CSS very soon at http://gurusnetwork.com Checking them out could be very helpful for you.

<img border=0 align=absmiddle src="http://www.ozones.com/forum/biggrin.gif">

Peter

ICQ:# 10237808

[This message has been edited by DarkGarden (edited 20-09-2000).]

Reve
Paranoid (IV) Inmate

From: I own you at Quake
Insane since: Aug 2000

posted 09-20-2000 22:22

http://www.serversideproductions.com

if you look in the source, the first lines are

<html>
<head>
<title>Server Side Productions</title>
</head>
<LINK REL=STYLESHEET TYPE="text/css" HREF="http://www.serversideproductions.com/style.css">
<body bgcolor="#999999" background="/images/mainbg2.gif">

the code

<LINK REL=STYLESHEET TYPE="text/css" HREF="http://www.serversideproductions.com/style.css">

links to my css for the site, all thats in it is

<style TYPE="text/css">

</style>

the code to make it not underlined is

A:hover { text-decoration: none; color: #000099;}

and to change the color of your links, just edit the the hexdecimal color codes, i give you permission to use my template <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif">

hope i helped

TheTrixter
Bipolar (III) Inmate

From: Derbyshire, UK
Insane since: Jul 2000

posted 09-20-2000 22:38

Hey, thanks you guys, I've heard of CSS before but never really got into them. I'll give that a try later (must get rid of Dreamweaver and learn moe of the code, just can't find enough time at present).

Steve
Maniac (V) Inmate

From: Boston, MA, USA
Insane since: Apr 2000

posted 09-20-2000 22:51

Dreamweaver has some pretty potent CSS tools I think - look around in it. Learning code is a great idea, but in the meantime use the tools you have.

DG - what a *great* post. Whew. What more needs to be said?
<img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif">

Jestah
Maniac (V) Mad Scientist

From: Long Island, NY
Insane since: Jun 2000

posted 09-20-2000 23:55

Alright, Ill finsih my tut ...

TheTrixter
Bipolar (III) Inmate

From: Derbyshire, UK
Insane since: Jul 2000

posted 09-25-2000 09:40

Hey, you guys are the best. I finally got a chance to try the CSS styles at the weekend, and it worked a treat. Once again, the great Ozone asylum has pulled another lost soul through to the other side.
Seriously, thanks!