newcoder1010 Posted July 9, 2016 Share Posted July 9, 2016 Hello, I have this html: <table class="socialmedia"> <tr> <td><a href="http://www.facebook.com/davis"> F</a></td> <td><a href="http://www.twitter.com/davis">T </a></td> </tr> </table> How can I replace the F and T by some colors as shown in image. Thanks. Link to comment Share on other sites More sharing options...
newcoder1010 Posted July 9, 2016 Author Share Posted July 9, 2016 Actually, I like to put the text F and T inside the circle. How can I do it? Link to comment Share on other sites More sharing options...
Ingolme Posted July 9, 2016 Share Posted July 9, 2016 CSS is unaware of the content that's on your page. Make your structure like this instead: <table class="socialmedia"> <tr> <td><a class="facebook" href="http://www.facebook.com/davis"> F</a></td> <td><a class="twitter" href="http://www.twitter.com/davis">T </a></td> </tr> </table> Then your CSS can target the elements with .socialmedia .facebook and .socialmedia .twitter selectors. Link to comment Share on other sites More sharing options...
davej Posted July 9, 2016 Share Posted July 9, 2016 I deleted your table, but maybe something like this... <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>title</title> <style> .socialmedia{ width:200px; border:1px solid #ddd; } .facebook,.twitter{ display:inline-block; height:40px; width:40px; border-radius:20px; background-color:#06c; vertical-align:middle; text-align:center; } .twitter{ background-color: #50d; } .facebook a,.twitter a{ color:#000; font-weight:bold; text-decoration:none; vertical-align:middle; line-height:40px } </style> </head> <body> <h2>Text</h2> <div class="socialmedia"> <span class="facebook"><a href="http://www.facebook.com/davis">F</a></span> <span class="twitter"><a href="http://www.twitter.com/davis">T</a></span> </div> </body> </html> Link to comment Share on other sites More sharing options...
dsonesuk Posted July 9, 2016 Share Posted July 9, 2016 (edited) <!DOCTYPE html> <html> <head> <style> .socialmedia a { display: inline-block; padding: 10px; width: 20px; height: 20px; border-radius: 20px; color: #fff; text-decoration: none; text-align: center; line-height: 20px; } .socialmedia a[href*='twitter'] {background: skyblue; } .socialmedia a[href*='facebook'] {background: blue; } </style> </head> <body> <table class="socialmedia"> <tr> <td><a href="http://www.facebook.com/davis">F</a></td> <td><a href="http://www.twitter.com/davis">T</a></td></tr></table></body></html> Edited July 10, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
newcoder1010 Posted July 9, 2016 Author Share Posted July 9, 2016 You are all wonderful. I will give a try. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 10, 2016 Share Posted July 10, 2016 Adding text through css instead of html <!DOCTYPE html> <html> <head> <style> .socialmedia a { display: inline-block; font-weight: bold; padding: 10px; width: 20px; height: 20px; border-radius: 20px; color: #fff; text-decoration: none; text-align: center; line-height: 20px; } .socialmedia a[href*='twitter']:before {content:"T";} .socialmedia a[href*='twitter'] {background: skyblue; } .socialmedia a[href*='facebook']:before {content:"F"; } .socialmedia a[href*='facebook'] {background: blue; } </style> </head> <body> <table class="socialmedia"> <tr> <td><a href="http://www.facebook.com/davis"></a></td> <td><a href="http://www.twitter.com/davis"></a></td></tr></table></body></html> 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