Jarod Posted December 22, 2009 Share Posted December 22, 2009 how do I make a button without using unordered lists or inputs? I am using the sliding doors technique, which seems to not be working at all... I get a weird image like this: here is the code I used: <style> .category { background: url("images/button_slide.png") no-repeat top right; } .category a { background: url("images/button_door.png") no-repeat top left; display: inline-block; padding: 8px 15px; } </style> <span class="category"><a href="#">Link</a></span> Any reason why it's looking like the image above??? Quote Link to comment Share on other sites More sharing options...
haku Posted December 22, 2009 Share Posted December 22, 2009 First off, put your span inside the a tag, not the other way around. Then play with it from there. Quote Link to comment Share on other sites More sharing options...
Jarod Posted December 22, 2009 Author Share Posted December 22, 2009 still not working <style> a.category { background: url("images/button_slide.png") no-repeat top right; } a.category span { background: url("images/button_door.png") no-repeat top left; display: inline-block; padding: 8px 15px; } </style> <a class="category" href="#"><span>Category</span></a> btw I uploaded the images, maybe u can fix them?? <style> a.category { background: url("http://i47.tinypic.com/2zsp93m.png") no-repeat top right; } a.category span { background: url("http://i48.tinypic.com/1440a3c.png") no-repeat top left; display: inline-block; padding: 8px 15px; } </style> <a class="category" href="#"><span>Category</span></a> Quote Link to comment Share on other sites More sharing options...
vinpkl Posted December 22, 2009 Share Posted December 22, 2009 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style> p.category { background: url("http://i47.tinypic.com/2zsp93m.png") no-repeat top right; float:left } p.category span { background: url("http://i48.tinypic.com/1440a3c.png") no-repeat top left; padding: 8px 15px; float:left } a{cursor:hand;} p{margin:0px; padding:0px;} </style> </head> <body> <p class="category"><a href="#"><span>Category</span></a></p> </body> </html> vineet 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.