vmars316 Posted June 7, 2013 Share Posted June 7, 2013 I have a page of 100 links, that looks like this:<br>[~Most-Used]<a href="www.hotmail.com/?">hotmail.com</a><br>[~Most-Used]<a href="http://alternativeto.net/">AlternativeToSoftwares</a><br>[~Most-Used]<a href="http://jsdo.it/vmars316/asdf/edit">jsdo.it javascript</a><br>[~Most-Used]<a href="http://www.portablefreeware.com/?">portablefreeware.com/</a><br>[Arduino]<a href="http://arduino.cc/forum/index.php#2">~arduino.cc/forum</a><br>[Arduino]<a href="http://arduino.cc/playground/">~arduino.cc/playground</a> And I want to color text and text-background different colors: [~Most-Used] text = black, text-background = blue >hotmail.com</a> text = red, text-background = lightGreen I suppose <span> would work. Or could i use "<br>[" and '">' as style tags ? Is there a better way than span ? Thanks Link to comment Share on other sites More sharing options...
newseed Posted June 7, 2013 Share Posted June 7, 2013 Just wrap a div around the set of links you have like this: <div class="mylinks"><br>[~Most-Used]<a href="www.hotmail.com/?">hotmail.com</a>< br>[~Most-Used]<a href="http://alternativeto.net/">AlternativeToSoftwares</a>< br>[~Most-Used]<a href="http://jsdo.it/vmars316/asdf/edit">jsdo.it javascript</a>< br>[~Most-Used]<a href="http://www.portablefreeware.com/?">portablefreeware.com/</a><br>[Arduino]<a href="http://arduino.cc/forum/index.php#2">~arduino.cc/forum</a>< br>[Arduino]<a href="http://arduino.cc/playground/">~arduino.cc/playground</a></div> Now the CSS: div#mylinks {background: blue;}div#mylinks a {background: lightgreen;} Adjust to suit. 1 Link to comment Share on other sites More sharing options...
MarkT Posted June 7, 2013 Share Posted June 7, 2013 Or simply,create an a class in your CSS. a:link{color: #colourcode;background-color: #Colourcode;}a:hover {color: #colourcode;background-color: #Colourcode;}a:active{color: #colourcode;background-color: #Colourcode;}a:visited{color: #colourcode;background-color: #Colourcode;} 1 Link to comment Share on other sites More sharing options...
vmars316 Posted June 7, 2013 Author Share Posted June 7, 2013 (edited) edit in process: Edited June 7, 2013 by vmars316 Link to comment Share on other sites More sharing options...
vmars316 Posted June 7, 2013 Author Share Posted June 7, 2013 (edited) newseed,I couldn't get the following to work. [/size]<style type="text/css">div#mylinks {background-color: blue;}div#mylinks a {background-color: lightgreen;}</style></head>...............<div class="mylinks">..............</div class="mylinks"> Above, what am I doing wrong ?The following works but is painfully verbose: [/size]<br><span style="color:#E7A97E; font-weight:bold; background-color:#726B50">[~Most-Used] </span><a href="http://www.quickerthanaspark.com/BenghaziGame/BenghaziGame.html"><span style="color:#FFFFFF; background-color:#645E46 ">Benghazi Game Intro</span></a> <br><span style="color:#E7A97E; font-weight:bold; background-color:#726B50">[Arduino] </span><a href="http://www.manning-sandbox.com/forum.jspa?forumID=788&start=0"><span style="color:#FFFFFF; background-color:#645E46 ">~Arduino in Action Forum</span></a> Pls note, that the textColors and background-color are diff for Category([~Most-Used] and [Arduino]) and aLinks. Thanks Edited June 7, 2013 by vmars316 Link to comment Share on other sites More sharing options...
dsonesuk Posted June 7, 2013 Share Posted June 7, 2013 This below div#mylinks {background: blue;}div#mylinks a {background: lightgreen;} Should be div.mylinks {background: blue;}div.mylinks a {background: lightgreen;} '#' = id ref'.' = class ref 1 Link to comment Share on other sites More sharing options...
newseed Posted June 8, 2013 Share Posted June 8, 2013 OOPS! My bad! It should have been a period instead of a pound sign: div.mylinks {background-color: blue;}div.mylinks a {background-color: lightgreen;} Link to comment Share on other sites More sharing options...
dsonesuk Posted June 8, 2013 Share Posted June 8, 2013 Where i come from a pound sign is '£', hash (not smoking kind i might add) is the '#'. Link to comment Share on other sites More sharing options...
vmars316 Posted June 9, 2013 Author Share Posted June 9, 2013 Thanks Folks, here is the current code : <style type="text/css">.catg {style="border: 1px; border-style:solid; border-color:#BB96A8; background-color:#CCC2B6; color:#FFFFFF; font-size: 12pt; font-weight:bold;"} .desc {style="border: 1px; border-style:solid; border-color:#BB96A8; background-color:#CCC2B6; color:#FFFFFF; font-size: 14pt; font-weight: bold;"} a:link{color: #FFFFFF;} a:hover {color: #FFFFFF;} a:active{color: #FFFFFF;} a:visited{color: #FFFFFF;}</style> <table><!-- style="color:#F1E9DC;">[~Most-Used] --><tr><td class="catg">[~Most-Used]</td><td class="desc"><a href="http://alternativeto.net/">AlternativeTo Software</a></td></tr> <tr><td class="catg">[~Most-Used]</td><td class="desc"><a href="http://www.quickerthanaspark.com/BenghaziGame/BenghaziGame.html">Benghazi Game Intro</a></td></tr></td></tr> <tr><td class="catg">[~Most-Used]</td><td class="desc"><a href="http://www.hotmail.com/?">hotmail.com</a></td></tr> <tr><td class="catg">[~Most-Used]</td><td class="desc"><a href="http://jsdo.it/vmars316/8D5g/edit">jsdo.it javascript</a></td></tr> <tr><td class="catg">[~Most-Used]</td><td class="desc"><a href="http://www.portablefreeware.com/?">portablefreeware.com/</a></td></tr> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now