I have a web site with a white background and a dark strip down the left side. Using cascading style sheets, how can I get white links on the dark strip and dark links on the white background?<br />
<br />
<!-- w --><a class="postlink" href="http://www.cnn.com">www.cnn.com</a><!-- w --> is a good example of what I'm talking about. I looked at their source code, and they're using CSS, so it must be possible.<!--content-->I am pretty new to css myself so I'm hoping you're okay with creating the actual style sheet itself, but you would need to create one that specifies 2 different classes - one for white links that turn black on mouse over, and one for black links that turn white on mouse over.<br />
<br />
Then you'd create your page using tables setting the background of the left hand column to the dark color and the rest to white (or use a background image).<br />
<br />
Then in your table code you would use <td class="class1"> or <td class="class2"> for each cell depending on what color you want the links to be in that section.<br />
<br />
I believe this is how they have done it on the CNN site. If you're stuck with creating the stylesheets themselves then I will help you later when I have a bit more time, or else maybe someone else can throw one together for you. I know it's pretty easy, I'm just a bit rusty!
<!--content-->Try this:<br />
<br />
In the css file<br />
a.black { color:#000000; }<br />
a.white { color:#FFFFFF; }<br />
<br />
In the html file you have to call this classes like this:<br />
<br />
<a class=black href=http://www.htmlforums.com/archive/index.php/"url">your text here!!!</a><br />
<a class=white href=http://www.htmlforums.com/archive/index.php/"url">your text here!!!</a><br />
<br />
If you are using frames you can do different css files and load the respective css in the respective frame. <br />
<br />
1. css file<br />
<br />
a:link { color:#000000; }<br />
<br />
2. css file<br />
<br />
a:link { color:#FFFFFF; }<!--content-->If you want to read/learn more about CSS, you can do so here:<br />
<br />
<!-- m --><a class="postlink" href="http://www.wdvl.com/Authoring/Style/Sheets/">http://www.wdvl.com/Authoring/Style/Sheets/</a><!-- m --><!--content-->You can use a.class but that means you have to apply the class to every link.<br />
<br />
For this kind of design I prfer to scope them, which is what I think golilocks is suggesting.<br />
<br />
<style><br />
.white a {color:white}<br />
.black a {color:black}<br />
</style><br />
<br />
Then just apply the class to a container span, div, td etc:<br />
<br />
<td class="white"><br />
<br />
If you want mouse effect you can add this to the style sheet:<br />
<br />
.black a:hover{color:red}<br />
<br />
But hover is not support by Netscrap 4.x<!--content-->
<br />
<!-- w --><a class="postlink" href="http://www.cnn.com">www.cnn.com</a><!-- w --> is a good example of what I'm talking about. I looked at their source code, and they're using CSS, so it must be possible.<!--content-->I am pretty new to css myself so I'm hoping you're okay with creating the actual style sheet itself, but you would need to create one that specifies 2 different classes - one for white links that turn black on mouse over, and one for black links that turn white on mouse over.<br />
<br />
Then you'd create your page using tables setting the background of the left hand column to the dark color and the rest to white (or use a background image).<br />
<br />
Then in your table code you would use <td class="class1"> or <td class="class2"> for each cell depending on what color you want the links to be in that section.<br />
<br />
I believe this is how they have done it on the CNN site. If you're stuck with creating the stylesheets themselves then I will help you later when I have a bit more time, or else maybe someone else can throw one together for you. I know it's pretty easy, I'm just a bit rusty!
<!--content-->Try this:<br /><br />
In the css file<br />
a.black { color:#000000; }<br />
a.white { color:#FFFFFF; }<br />
<br />
In the html file you have to call this classes like this:<br />
<br />
<a class=black href=http://www.htmlforums.com/archive/index.php/"url">your text here!!!</a><br />
<a class=white href=http://www.htmlforums.com/archive/index.php/"url">your text here!!!</a><br />
<br />
If you are using frames you can do different css files and load the respective css in the respective frame. <br />
<br />
1. css file<br />
<br />
a:link { color:#000000; }<br />
<br />
2. css file<br />
<br />
a:link { color:#FFFFFF; }<!--content-->If you want to read/learn more about CSS, you can do so here:<br />
<br />
<!-- m --><a class="postlink" href="http://www.wdvl.com/Authoring/Style/Sheets/">http://www.wdvl.com/Authoring/Style/Sheets/</a><!-- m --><!--content-->You can use a.class but that means you have to apply the class to every link.<br />
<br />
For this kind of design I prfer to scope them, which is what I think golilocks is suggesting.<br />
<br />
<style><br />
.white a {color:white}<br />
.black a {color:black}<br />
</style><br />
<br />
Then just apply the class to a container span, div, td etc:<br />
<br />
<td class="white"><br />
<br />
If you want mouse effect you can add this to the style sheet:<br />
<br />
.black a:hover{color:red}<br />
<br />
But hover is not support by Netscrap 4.x<!--content-->