Forum Moderators: not2easy
I'm a bit of a newbie at styles, and dont seem to find a good reference to put the elements that I want together just yet... The question I have may be a sinch... but then to me it just isnt that obvious just yet.
I have/am working on a site. It is basically one huge bunch of tables, rows and coloms (for liquidity) and I want some tables to have links in white (bold, no underline) as in both the left nav menu as well as a top side menu. [no, I'm not using a drop menu with Javascript this time, imo it is easier on the eye to use one menu across the top, and per each of those pages (sections) I want a menu on the left]
Now the top and and side nav menu, I want links in white, whereas I want the text in the main content table to be in blue with underline, and also the newscolom ....blah blah.
Anyway, this trick will get a change for links in all the page...
<BODY LINK="#0000FF"
VLINK="#006699"
ALINK="#CC0000">
but not in seperate sections, in my example tables.
This ...
<style type="text/css">
<!--A:link, a:visited, a:active {text-decoration: none;}-->
</style>
will get my underline away, but only for the whole document.
and
<style fprolloverstyle>A:hover {color: #FF0000; font-family: Verdana; font-weight: bold}
</style>
will get the hover to do nice things, but only for the whole document.
Now somebody in the newby forum gave me advice to use the <div> command to attempt to create different link styles on one page.
I found this which does the trick, but....
<head>
<style type="text/css">
a.one:link {color: #FFFFFF; text-decoration: none}
a.one:visited {color: #0000ff; text-decoration: none}
a.one:hover {color: #ff0000; text-decoration: none;}
a.two:link {color: #ffffff}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}
a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}
a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: fixedsys}
a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}
</style>
</head>
<body>
<bodybgcolor="#006666">
<p>Mouse over the links to see them change layout.</p>
<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>
</body>
(source w3schools.com)
.... it seems not very nice to have to define each link seperately...
Any suggestions?
The suggestion you got about enclosing you links in a <div> (or a table cell, since that's how you have it layed out) sounds like your best bet.
First, you'll want to set your basic link style. Sounds like that's blue with an underline? You've already got the basic idea here:
a.one:link {color: #FFFFFF; text-decoration: none}
a.one:visited {color: #0000ff; text-decoration: none}
a.one:hover {color: #ff0000; text-decoration: none;}
If you then create a class for table cells where the links will be white
(HTML: <td class="whiteLinks">, CSS: td.whiteLinks)
you can simply define all links within table cells of that class like:
td.whiteLinks a:link {color: #FFFFFF; text-decoration: none}
td.whiteLinks a:visited {color: #0000ff; text-decoration: none}
td.whiteLinks a:hover {color: #ff0000; text-decoration: none;}
Does that help?
g.
Hi garann,
Putting it all together....
I got to just trying it now, works fine. Made a stupid mistake with two times the ## sign, so color issue, but all works now.
I'm using it like this
<style type="text/css">
.specialLink { color:#FFFFFF; }
a.specialLink:link {font-size:10px; color: #FFFFFF; font-weight:bold; text-decoration: none;font-family: Verdana;}
a.specialLink:visited {font-size:10px; color: #00FF00;font-weight:bold; text-decoration: none; font-family: Verdana;}
a.specialLink:hover {font-size:11px; color: #FF0000; font-weight:bold; text-decoration: none; font-family: Verdana;}
body{top:0;left:0;bottom:0;margin:0;padding:0; font-family: Verdana;}
</style> </head>
with
<a class="specialLink" href="page2.html">link</a>
</td>
and it works like a charm. Thanks garann and legster on the other side for explaining.
It works, finally, as I want it.
regards
