Links in Tables, need advice

liunx

Guest
Okay, I'm a bit confused. I'm trying to create a page with a table, and make the link colors different for the different frames. I can't figure out how to go about this, so I'd really appreciate some help.<!--content-->Table and frame based layouts are not the best way to go... but to change link colors on the same page you can use css and a class<br />
This would go in your head, these are all of your link declarations for each of the two classes.<br />
<br />
<style type="text/css"><br />
a.link1:link {color:#ffffff;text-decoration:none;}<br />
a.link1:visited {color:#ffffff;text-decoration:none;}<br />
a.link1:hover {color:#ffffff;text-decoration:none;}<br />
a.link1:active {color:#ffffff;text-decoration:none;}<br />
a.link2:link {color:#000000;text-decoration:none;}<br />
a.link2:visited {color:#000000;text-decoration:none;}<br />
a.link2:hover {color:#000000;text-decoration:none;}<br />
a.link2:active {color:#000000;text-decoration:none;}<br />
</style><br />
<br />
<br />
your links<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.com" class="link1">One stlye of link</a><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.foxnews.com" class="link2">Another style</a><!--content-->If you are going to use the same styles for all pseudo-classes, just define your CSS like this:<br />
<br />
<style type="text/css"><br />
a.link1 {<br />
color:#ffffff;<br />
text-decoration:none;<br />
}<br />
a.link2 {<br />
color:#000000;<br />
text-decoration:none;<br />
}<br />
</style><!--content-->Mine I just listed all of the pseudo-classes just incase. Like pyro said if you are doing the same hover link color or active or visited link colors you can leave those out or just specify them one time like this<br />
<br />
a:visited {color:#ffffff;text-decoration:none;}<br />
a:hover {color:#ffffff;text-decoration:none;}<br />
a:active {color:#ffffff;text-decoration:none;}<br />
<br />
Then you could do something like adding in pyros section of code, this way you can specify colors for the visited hover and active links still.<!--content-->Well, thanks for the advice. But, considering this is for a class for school, and we're only on frames, I think the teacher would be mighty suspicious if I were putting in scripting that I didn't really understand. Well, I think I'll just ask him anyways, but thanks!<!--content-->Your teacher gets mad when you do independent study? I would give extra credit for something like that if I were a teacher (then again I would try to get the kids using ASP.NET as soon as possible so they can come here and help me protest for .net forum :D )<!--content-->Style sheets are not that hard to understand,<br />
<br />
They are defined in the following tags,<br />
<br />
<style> and </style><br />
<br />
Inside these brackets you can place Classes. In next example .mystyle is the class...<br />
<br />
e.g.<br />
<br />
<style><br />
.mystyle {<br />
Styles Go Here..<br />
}<br />
</style><br />
<br />
So far we have defined the stylesheet brackets and a class,<br />
<br />
Now we need to define some styles, as you are colouring links i will show you some text styles...<br />
<br />
"font-family:" is the command that defines font face e.g arial, times new roman etc...<br />
<br />
Fonts can be listed and the browser will choose which ever is available in order,<br />
<br />
E.g.<br />
<br />
<style><br />
.mystyle {<br />
font-family: Arial, Times New Roman, Serif; <br />
}<br />
</style><br />
<br />
Will make the browser look for the Arial font. If it is not available it then looks for the Times new roman font and so on...<br />
<br />
The next one is fontsize. Fontsizes can be defined from, x-small to x-large or in Pt sizes. I suggest you avoid the x-small to x-large sizes as they do not relate to anything.<br />
<br />
To define 10pt text you would write,<br />
<br />
<style><br />
.mystyle {<br />
font-size: 10pt;<br />
}<br />
</style><br />
<br />
Or 25pt,<br />
<br />
<style><br />
.mystyle {<br />
font-size: 25pt;<br />
}<br />
</style><br />
<br />
Simple enough?<br />
<br />
The last one is color:. This defines the font color when used on a block of text.<br />
<br />
e.g.<br />
<br />
<style><br />
.mystyle {<br />
color: red;<br />
}<br />
</style><br />
<br />
This would give red text.<br />
<br />
To apply more than one style to a block of text you set it out like this,<br />
<br />
<style><br />
.mystyle {<br />
font-size: 10pt;<br />
color: red;<br />
font-family: arial;<br />
}<br />
</style><br />
<br />
Really easy...<br />
<br />
To aply this to a block of text you need to put class="mystyle" into the surrounding tags,<br />
<br />
e.g.<br />
<br />
<font class="mystyle">I am Red, Arial Text</font><br />
<br />
or<br />
<br />
<span class="mystyle">I am Red, Arial Text</font><br />
<br />
Or<br />
<br />
<p class="mystyle">I am Red, Arial Text</font><br />
<br />
Really easy. You just have to rmember to put thestyle sheet in the same document as the text being formatted.<br />
<br />
Pseudo classes were explained slightly earlier so you shouldn't have too much touble.<br />
<br />
If you need any more info, check out, <br />
<br />
<!-- m --><a class="postlink" href="http://cita.rehab.uiuc.edu/....lec08/">http://cita.rehab.uiuc.edu/....lec08/</a><!-- m --> (<!-- m --><a class="postlink" href="http://cita.rehab.uiuc.edu/courses/2002-02-REHAB711NC/lec08/">http://cita.rehab.uiuc.edu/courses/2002 ... 1NC/lec08/</a><!-- m -->) <br />
<br />
Hope that helps, Spyke.<!--content-->The FONT element is depricated--use either P or SPAN, and don't end it with </font>. End it with </p> or </span> (whichever you've chosen). ;)<br />
<br />
[J]ona<!--content-->Quite a few things that need to be pointed out with the above post, though...<br />
<br />
1: <style> needs to be <style type="text/css">.<br />
<br />
2: With your font-family example, fonts that contain whitespace need to be quoted: <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/fonts.html#value-def-family-name">http://www.w3.org/TR/REC-CSS2/fonts.htm ... amily-name</a><!-- m --><br />
<br />
3: Pt sizes for fonts are about your worst choice, as they can very greatly. You'd be better off using percentages, em, or pixel sizes. Also, the x-small though x-large are fine, as they are defined in relation to the users default font size. For more info on font-size see <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/fonts.html#font-size-props">http://www.w3.org/TR/REC-CSS2/fonts.htm ... size-props</a><!-- m --><br />
<br />
3: When a color is specified, one should also specify a background-color...<br />
<br />
4: In your last example, you set a font-family, but no default font (such as serif, sans-serif, etc).<br />
<br />
5: And lastly, you used the depreciated font tag. You should use valid HTML...<!--content-->Granted i missed out the type but i assumed that the reader had some knowledge of text types.<br />
<br />
What really is wrong with pt sizes? they match things like Word documents and so forth so users allready know what they look like... Yex Px probably would have been better but the x-small to x-large are like 1-5 in the font tag, useless unless you know what they look like off by heart.<br />
<br />
Gimme a break anyway. I only started using CSS myself yesterday and i think it is brilliant!<br />
<br />
So much abuse... ;) <br />
<br />
Spyke.<br />
<br />
<style type="text/css"><br />
.mystyle{<br />
font-family: Arial<br />
color: white<br />
background: black<br />
}<br />
</style><br />
<br />
<span class="mystyle">Hello</span><br />
<br />
any better?<!--content-->I don't think you guys are answering the question.<br />
<br />
<br />
<br />
I'm trying to create a page with a table, and make the link colors different for the different frames. <br />
<br />
If I understand the question, my answer would be:<br />
<br />
<html><br />
<table><br />
<tr><td><a href=http://www.webdeveloper.com/forum/archive/index.php/""><font color="red">red text</font></a></td></tr><br />
<tr><td><a href=http://www.webdeveloper.com/forum/archive/index.php/""><font color="blue">blue text</font></a></td></tr><br />
<tr><td><a href=http://www.webdeveloper.com/forum/archive/index.php/""><font color="yellow">yellow text</font></a></td></tr><br />
</table><br />
</html><br />
This is not intended to be the full code, everybody, but it will give her different-colored links in her table.<!--content-->Originally posted by spykemitchell <br />
<style type="text/css"><br />
.mystyle{<br />
font-family: Arial<br />
color: white<br />
background: black<br />
}<br />
</style><br />
<br />
<span class="mystyle">Hello</span><br />
<br />
any better? <br />
<br />
A little, but...<br />
<br />
<br />
<style type="text/css"><!--<br />
.mystyle{<br />
font-family: Arial, sans-serif;<br />
color: white;<br />
background-color: black;<br />
--></style><br />
<br />
<span class="mystyle">Hello</span><br />
<br />
<br />
[J]ona<!--content-->
 
Back
Top