voip03 Posted September 5, 2011 Share Posted September 5, 2011 I would like to draw a line next to g( small letter ), am I able to use CSS to draw a line . ( enclosing a image ) Thank you [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted September 5, 2011 Share Posted September 5, 2011 you can draw lines with html5 canvas. With css, you require a background image (and than position it so it just touches the 'o') if you want to come close to what you have in your attachment. otherwise text-decoration or border-bottom could work, but that would create a greater gap. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted September 5, 2011 Share Posted September 5, 2011 Oh i just played abit with css3 boxshadow and that is a possibility too, it seems. try it: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> .line { box-shadow: 0 3px 1px -3px #000; display: inline-block; line-height: 10px; width: 50%; } </style> </head> <body> g<span class="line">o</span> </body> </html> Quote Link to comment Share on other sites More sharing options...
voip03 Posted September 5, 2011 Author Share Posted September 5, 2011 thank u cssfreakie. no line at all? Quote Link to comment Share on other sites More sharing options...
voip03 Posted September 5, 2011 Author Share Posted September 5, 2011 - Quote Link to comment Share on other sites More sharing options...
voip03 Posted September 5, 2011 Author Share Posted September 5, 2011 - I am sorry, typing error. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted September 5, 2011 Share Posted September 5, 2011 I am not sure what you meant to say with the previous 3 responses. but if it didn't work. make sure your browser is ready for box-shadow. All recent versions of firefox chrome and IE support it. Quote Link to comment Share on other sites More sharing options...
manuelV Posted September 8, 2011 Share Posted September 8, 2011 Can you use the <hr> tag? Quote Link to comment Share on other sites More sharing options...
wright67uk Posted September 8, 2011 Share Posted September 8, 2011 That's what i was thinking and then play around with .hr css Quote Link to comment Share on other sites More sharing options...
Amit20 Posted September 17, 2011 Share Posted September 17, 2011 You can try it out with <hr>. I tried it. Not so neat but u can play with a bit of css <html> <head> <title></title> <style type="text/css"> .left { position:absolute; top:15px; left:25px; width: 15%; } .go { width:20px; float:left; } </style> </head> <body> <div class="go"> go</div> <div class="left"><hr></div> </body> </html> Quote Link to comment Share on other sites More sharing options...
voip03 Posted September 17, 2011 Author Share Posted September 17, 2011 Amit20,cssfreakie ,manuelV,wright67uk ! Thank you. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.