how do yuo do this?

Printable View

Mar 12, 2001, 19:05
IanMFT

How do you do this?

If you go to http://www.arstechnica.com/ with IE 5.5, the links on the left have a specific underline color that is different from the actual text color (or link color to be more specific)....is this aCSS trick? and if it is, how is it accomplished?
Mar 12, 2001, 20:31
dominique

This is acheived with CSS.
(Everything in blue is code)

[1] This is how Ars Technica did it:

<HEAD>
<LINK REL=STYLESHEET HREF="/includes/masterstyle.css" TYPE="text/css">
</HEAD>

<A href="http://arstechnica.com/guide/index.html"><span class="mlink">Buyer's Guide</span></A>

masterstyle.css is a plain text file with the following line of code:
.mlink { font-family: verdana, helvetica; font-size: 13px; line-height: 11pt; color: #FFFFFF; }
Simply add the line of code into notepad and save the file with a '.css' extension.

[2] Or you can do it this way:

Using the <HEAD>...</HEAD> from [1], repace the link line with:
<A href="http://arstechnica.com/guide/index.html" class="mlink">Buyer's Guide</A>

[3] Option [1] and [2] allow you to call the masterstyle.css file from every page, but you could do this too. Replace the <HEAD>...</HEAD> from [1] with:

<HEAD>
<style type="text/css">

</style>
</HEAD>

With this you should be able to use the link technique from either [1] or [2]. Note however that you will have to put this code on every page you want the effect on.

I hope this is what you were looking for, sorry if the colors make it a little confusing, I was actually trying to make it clearer. :D
Mar 12, 2001, 21:32
IanMFT

thank you very much!!! :D
Mar 13, 2001, 11:17
dominique

Just glad to help! :)
Mar 13, 2001, 18:53
IanMFT

hrrmmmm....is there any way to incorporate this into a hover effect?

I want the text to be #CCCCCC and not underlined, and SMALL CAPS

then, on hover: text color #FFFFFF underlined and the underline color to be #6699CC and SMALL CAPS

any ideas? I have seen it done before soooo

btw, here is what i have now

My style sheet:

Code:

<style type="text/css">  </style>

where i need to use the code:

Code:

<td align="center" valign="middle"><font size="-2" color="#6699CC"><img src="img/spacer.gif" width="1" height="15">[<a href="#" class="navbar">Home</a>] [<a href="#" class="navbar:>Forums</a>] [<a href="#" class="navbar">Reviews</a>] [<a href="#" class="navbar">Articles</a>] [<a href="#" class="navbar">Price Guide</a>] [<a href="#" class="navbar">Misc</a>] [<a href="#" class="navbar">Contact</a>] [<a href="#" class="navbar">Links</a>]</font></td>

and here is a link to my test page:
http://www.mainframetech.net/temp
Mar 13, 2001, 19:48
dominique

I've tried and tried, but I can't figure out how to make the underline a different color from the text. Personally I've never seen it done before. I might be able to figure it out if you point out an example where you've seen it before.

BTW, you're new layout looks cool! :)
Mar 13, 2001, 19:58
IanMFT

thanks for the complement :) im going to forget about it because I just realized that I'm making a big deal over a feature that only IE 5.5 supports.....but thank you for that help, i really appreciate it
Mar 13, 2001, 20:30
dominique

No problem, just ask anytime! :)
Mar 13, 2001, 21:27
IanMFT

ok, i found an example of it

http://www.****edcompany.com/
( the f word goes in the stars...sorry about that, it was the only example i could find)

any ideas? im stumped...
Mar 14, 2001, 00:14
dominique

You really got me here. I don't have IE5.5, never took the time to upgrade, but looking at the code for just over half an hour now I just don't see what it could be. This goes beyond my css knowledge, sorry. :(

I couldn't find any mention of it either on the CSS and DHTML sites I checked...
Mar 14, 2001, 05:57
KeithMcL

It's down to the "a href" tag having the "span" tag around them.

Here's the code I used to created it:

Code:

<style>  </style> <body bgColor=000000 text=ffffff alink=ff6600 vlink=ffffff link=ffffff leftmargin="0" topmargin="0"> <br><br>   <a href="http://www.aol.com"><span class=navlink>AOL</span></a> | <a href="http://www.aol.com"><span class=navlink>AOL</span></a> </body>

Simply change the hex colors to whatever you want them to be.

rgds,
Mar 14, 2001, 14:43
IanMFT

ROCKIN! THANKS! :D
Mar 16, 2001, 07:09
lynlimz

just about using the css style hover effect.
it works for mozilla ( netscape 6 ) and ie.

make sure you specify the links accordingly..like
a:links {}
a:visited {}
a:hover {}
a:active {}