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??? Link to comment https://forums.phpfreaks.com/topic/185964-buttons-without-using-ul-or-input-sliding-door-technique/ 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. Link to comment https://forums.phpfreaks.com/topic/185964-buttons-without-using-ul-or-input-sliding-door-technique/#findComment-982010 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> Link to comment https://forums.phpfreaks.com/topic/185964-buttons-without-using-ul-or-input-sliding-door-technique/#findComment-982016 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 Link to comment https://forums.phpfreaks.com/topic/185964-buttons-without-using-ul-or-input-sliding-door-technique/#findComment-982026 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.