Forum Moderators: not2easy
Basically i'd like for it to fit all the parameters below :
1) Something that is compatible with IE , FireFox and Google Chrome is a must.
2) Something that will change just the color of the text link when Hovered over. (and not the text background color)
3) Something that will also not have the underline bar on my links.
4) And something so that I can specify which links on my page will have this effect and which wont. I don’t want all the links on the page to have the color change effect.
If someone could help i'd much appreciate it. I'm even willing to pay a small fee for the script..if its too difficult to find has to be made.
appreciate it much,
MB
a {
color: #000; /* Using black here */
text-decoration: none; /* eliminates underline */
}
a:hover {
color: #00F; /* Using blue here */
text-decoration: none; /* eliminates underline */
}
If you are looking to affect specific links -
a.black {
color: #000; /* Using black here */
text-decoration: none; /* eliminates underline */
}
a.black:hover {
color: #00F; /* Using blue here */
text-decoration: none; /* eliminates underline */
}
Marshall
I thought I need something particular after each link so that only those links are affected.
<style type-"text/css">
a {
color: #000; /* Using black here */
text-decoration: none; /* eliminates underline */
}
a:hover {
color: #00F; /* Using blue here */
text-decoration: none; /* eliminates underline */
}
If you are looking to affect specific links -
a.black {
color: #000; /* Using black here */
text-decoration: none; /* eliminates underline */
}
a.black:hover {
color: #00F; /* Using blue here */
text-decoration: none; /* eliminates underline */
}
</style>
As for applying a class to a specific link, you need to do the following -
<a href="..." class="black">text link</a>
Since it is apparent you are new to CSS, I suggest you check the W3 Schools on CSS [w3schools.com] to learn the basic. you can also do a web search for CSS link styles.
Marshall
In <head> I added
p.arial {font-family: arial}
</head>
And for the link itself -
<a href="http://www.google.com" class="black"><p class="arial"><font size="4"><b>text link</font></b></a>
Not sure if thats the proper way to do it, but it worked fine !
thanks again. I need to really spend time to learn this stuff completely someday.
.arial { font-family: Arial, sans-serif;}
a.black {color #000; text-decoration: none;}
.large {font-size: 1em;} /*1em = 100% = 14px (I think it's 14)*/
Then your link would look like this -
<p><a href="" class="black arial large"><strong>Link Text</strong></a></p>
And <strong> is the new <b>. That, I think is silly.
Marshall
P.S. By not designating an element before the pseudo class, e.g. p.arial, but rather just have .arial, you can use the class in any element.
[edited by: Marshall at 5:32 am (utc) on Sep. 4, 2008]
.large {font-size: 1em;} /*1em = 100% = 14px (I think it's 14)*/
Im trying to figure out how to turn that into font size="2". Thats basically all I need is arial font size 2 and <strong>.
and would it be possible to have all links on a page to have the effect without having to put the "class" stuff between each link? I know...im asking completely opposite now then in my first post of the thread. But for the other pages on my site I would like to have the effect take place on all links. Its just on my home page where i'd like to specify the links.
Once again , Marshall. I appreciate this greatly.
<style type="text/css">
a {
color: #000; /* I used black */
font-size: 14px; /* see chart below for sizes */
text-decoration: none; /* no underline */
}
a:visited {
color: #999 /* dark gray */
text-decoration: none; /* kind of redundant with a{} declaration */
}
a:hover {
color: #00F; /* blue */
text-decoration: none; /* kind of redundant wth a{} declaration */
}
</style>
Equivalent font sizes -
Size 2 = 14px
Size 3 (medium) = 16px = 1em
Size 4 = 18px
If you want the linked bold, add font-weight: bold; to the a{}. If, say, you want the font weight normal on the visited link, add font-weight: normal; to a:visited{}. You can also do text-decoration: underline on the a:hover for an added effect.
Marshall
Looks so much cleaner this way. mmmmmm, I love it already.
thanks again Marshall.
<head><style type-"text/css">
a {color: #FFFFFF; text-decoration: none;}
a.white:hover {color: #EFFFAF; text-decoration: none;}
a.arial {font-family: arial; font-size: 16; font-weight: bold;}
</style>
</head><a href="http://www.google.com" class="white arial">Google</font></a>
You still seem to have a </font> too many in there.
I doubt code will validate that way.
As for naming your classes: I the long run it's far better to name a class for where you apply it than to name them for what they look like.
e.g.: name a class menu and you can change color schemes all you want.
name a class "white" and it'll haunt you if you need to change the color scheme.
font size (and nearly any other size in css should indicate the unit it is in except when it's 0). So that font size could be 16em, 16ex, 16pt, 16px
It is much more friendly too visitors to use their base font size as a start to size yours on. e.g. by using 1.6em for something large or 0.8 em for small print. That way somebody on a high res screen can increase their browser's default font size if they need to. Similarly it'll work in the advantage of visitors with certain disabilities.
font families should be a list of families ending in a generic one for those visitors not having your preferred font installed (I think you might end up with courier or something like that otherwise.)
And no Arial isn't one of them, despite Microsoft putting it on many if not all windows boxes.
Some make that e.g.:
font-family: Arial, helvetica, sans
Helvetica is the font Arial resembles most, and sans is the sans serif fallback the browser should know. You could add other fonts in there too, the first the browser knows is the one that's going to get used.
I did change the 16 to 16px though. thanks for that.
Most of the stuff your referring to seems to be for much older browsers though.
It's also about being future proof. There will be new versions of browsers, there will be new OSes that become popular, there will be changes to your content, ...
Doing it now properly will cause less trouble down the road.
Font sizes is also future proofing things: display resolutions constantly go up, 16pt will get at one point under the readable size of some people with not 20/20 eyesight and a high resolution monitor. Let alone those needing huge fonts today to be able to read the text.
font families should be a list of families ending in a generic one for those visitors not having your preferred font installed (I think you might end up with courier or something like that otherwise.)
And no Arial isn't one of them, despite Microsoft putting it on many if not all windows boxes.
Some make that e.g.:
font-family: Arial, helvetica, sans
arghhh.. I guess your right. Could you tell me how to set that up. I guess generally what your saying is I need Arial and Sans..so that if it doesnt recognize Arial, it goes to Sans ?
If you use a two or more word(s) font, the words have to be in quotes
font-family: Times, "Times New Roman", serif;
Marshall
so this would be ok ?
a.arial {font-family: arial, helvetica, verdana, sans-serif; font-size: 16; font-weight: bold;}
Marshall
