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] Link to comment https://forums.phpfreaks.com/topic/246483-drawing-a-line/ 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. Link to comment https://forums.phpfreaks.com/topic/246483-drawing-a-line/#findComment-1265708 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> Link to comment https://forums.phpfreaks.com/topic/246483-drawing-a-line/#findComment-1265712 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? Link to comment https://forums.phpfreaks.com/topic/246483-drawing-a-line/#findComment-1265748 Share on other sites More sharing options...
voip03 Posted September 5, 2011 Author Share Posted September 5, 2011 - Link to comment https://forums.phpfreaks.com/topic/246483-drawing-a-line/#findComment-1265759 Share on other sites More sharing options...
voip03 Posted September 5, 2011 Author Share Posted September 5, 2011 - I am sorry, typing error. Link to comment https://forums.phpfreaks.com/topic/246483-drawing-a-line/#findComment-1265771 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. Link to comment https://forums.phpfreaks.com/topic/246483-drawing-a-line/#findComment-1265772 Share on other sites More sharing options...
manuelV Posted September 8, 2011 Share Posted September 8, 2011 Can you use the <hr> tag? Link to comment https://forums.phpfreaks.com/topic/246483-drawing-a-line/#findComment-1266697 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 Link to comment https://forums.phpfreaks.com/topic/246483-drawing-a-line/#findComment-1266722 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> Link to comment https://forums.phpfreaks.com/topic/246483-drawing-a-line/#findComment-1270186 Share on other sites More sharing options...
voip03 Posted September 17, 2011 Author Share Posted September 17, 2011 Amit20,cssfreakie ,manuelV,wright67uk ! Thank you. Link to comment https://forums.phpfreaks.com/topic/246483-drawing-a-line/#findComment-1270226 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.