SitePoint Sponsor |
|
User Tag List
Results 1 to 14 of 14
Thread: Quick question
-
Oct 14, 2004, 18:15 #1
- Join Date
- Sep 2002
- Location
- Atlanta, GA
- Posts
- 562
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Quick question
I have the following:
.linktable{
color: #5c1d07;
font-family: verdana;
font-size: 10pt;
font-weight: bold;
text-decoration: underline;
}
For my text that uses this class, if it happens to be a link, how can I use the same code, but a different color for the hover state? I'm just figuring out CSS if you couldn't tell
Thanks!
-
Oct 14, 2004, 18:20 #2
- Join Date
- Oct 2003
- Location
- Canada
- Posts
- 324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You need to define <a> classes separately I believe, just like this following:
A:link {
color:#000000;
text-decoration:none;
}
A:visited {
color:#000000;
text-decoration:none;
}
A:hover {
color:#000000;
text-decoration:underline;
}
A:active {
color:#000000;
text-decoration:none;
}
Then just make your wanted changes to the hover state ... hope that helps.Personal Portfolio
Paul O'B is the CSS god
-
Oct 14, 2004, 18:22 #3
- Join Date
- Feb 2004
- Location
- Scottsdale, Arizona
- Posts
- 909
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
How exactly are you using this?
Like this?
HTML Code:<table class="linktable">
You can use the hover pseudo class of the a element to style hover states for links
Code:/* CSS */ a:link{ color: #00f; } a:hover{ color: #f00; }
-
Oct 14, 2004, 18:22 #4
- Join Date
- Sep 2002
- Location
- Atlanta, GA
- Posts
- 562
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ok thanks, that helps...the problem is that I don't want ALL links to use the same class, only ones that I specify...using code similar to yours, how can that be done?
-
Oct 14, 2004, 18:25 #5
- Join Date
- Oct 2003
- Location
- Canada
- Posts
- 324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Just define another <a> class, like so:
a.differentLink:link {
color:#000000;
text-decoration:none;
}
a.differentLink:visited {
color:#000000;
text-decoration:none;
}
a.differentLink:hover {
color:#000000;
text-decoration:underline;
}
a.differentLink:active {
color:#000000;
text-decoration:none;
}
Then in the <a> tag, call that class.
<a class="differentLink">A link</a>
Does that work for ya?Personal Portfolio
Paul O'B is the CSS god
-
Oct 14, 2004, 18:26 #6
- Join Date
- Feb 2004
- Location
- Scottsdale, Arizona
- Posts
- 909
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Well there are a lot of ways really, but one that I'd use is something like this...
Code:.linktable{ /* all of your styles here */ } .linktable a:link{ /* styles for all links in this class */ } .linktable a:hover{ /* hover styles */ }
-
Oct 14, 2004, 18:27 #7
- Join Date
- Sep 2002
- Location
- Atlanta, GA
- Posts
- 562
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by RamsayX
-
Oct 14, 2004, 18:28 #8
- Join Date
- Feb 2004
- Location
- Scottsdale, Arizona
- Posts
- 909
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You can save yourself a lot of typing and use the method I posted above.
-
Oct 14, 2004, 18:36 #9
- Join Date
- Sep 2002
- Location
- Atlanta, GA
- Posts
- 562
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ok, this is odd - the regular links work, but the hover state isn't...I'm using:
<STYLE type="text/css">
.linktable{
color: #5c1d07;
font-family: verdana;
font-size: 9pt;
font-weight: bold;
text-decoration: underline;
}
.linktable a:link{
color: #5c1d07;
font-family: verdana;
font-size: 10pt;
font-weight: bold;
text-decoration: underline;
}
.linktable a:hover{
color: #B4370E;
font-family: verdana;
font-size: 10pt;
font-weight: bold;
text-decoration: underline;
}
</STYLE>
and then down in my page I have (it's PHP):
printf("<td width=300 bgcolor=%s align=center><FONT face=arial size=2><a class=\"linktable\" href=drink.php?drinkid=%s>%s</a></font></td>", $rowcolorhex, $myrow["drinkid"], $myrow["title"]);
Am I missing something?
-
Oct 14, 2004, 18:39 #10
- Join Date
- Oct 2003
- Location
- Canada
- Posts
- 324
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Try taking out the underline from the link state, see if it switches to underline on rollover. Does that work?
I would also use css to style your characters instead of the font tag.Personal Portfolio
Paul O'B is the CSS god
-
Oct 14, 2004, 18:45 #11
- Join Date
- Sep 2002
- Location
- Atlanta, GA
- Posts
- 562
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Nope - that didnt seem to do anything - this is very odd...
-
Oct 14, 2004, 18:51 #12
- Join Date
- Feb 2004
- Location
- Scottsdale, Arizona
- Posts
- 909
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
What element are you using the .linktable class for? Is it a table of links as the name suggests?
-
Oct 14, 2004, 18:57 #13
- Join Date
- Sep 2002
- Location
- Atlanta, GA
- Posts
- 562
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sure is - if you have a minute - you can view the source:
It's at http://www.drunkdrinks.com/
I have gone over everything multiple times and I don't see anything wrong...
-
Oct 14, 2004, 19:16 #14
- Join Date
- Sep 2002
- Location
- Atlanta, GA
- Posts
- 562
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ok, fixed - I needed to specify a class for my visited links - thanks for all your help!
Bookmarks