GoldSoft Posted August 15, 2014 Share Posted August 15, 2014 hi i have this code for making 3 buttons <style> .ui-grid-b .ui-input-btn { font-size: 12px; text-align: center; padding: 18px; } </style> <fieldset class="ui-grid-b" style="margin:5px;"> <div class="ui-block-a" > <input type="button" value="OpenALL" onclick="OpenALL();"> </div> <div class="ui-block-b" > <input type="button" value="OpenHash" onclick="OpenHash();"> </div> <div class="ui-block-c" > <input type="button" value="OpenBUG" onclick="OpenBUG();"> </div> </fieldset> i need to add image to the button (under the text) I tried all kinds of ways, but the Result was always ugly and not centered I need the picture to be below the text and everything will be centered. thanks Link to comment Share on other sites More sharing options...
newseed Posted August 15, 2014 Share Posted August 15, 2014 Use background-image for the buttons. Use background-position to set the image at the bottom. Link to comment Share on other sites More sharing options...
happycodings Posted August 28, 2014 Share Posted August 28, 2014 (edited) <!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" dir="ltr" lang="en-US" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Anchor background-image</title><style rel="stylesheet" type="text/css">#meta { display: block; float: right; padding: 20px 0 0 0;}#meta li { display: block; float: left; padding: 0 20px 0 0;}#meta a { display: block; float: left; font-family: Courier New; font-size: 12px; color: pink; text-decoration: none; padding: 0 0 0 13px; background-position: 0px 2px; background-repeat: no-repeat;}.meta1 { background-image: url(images/background-image1.gif)}.meta2 { background-image: url(images/background-image2.gif)}.meta3 { background-image: url(images/background-image3.gif)}</style></head><body> <div> <ul id="meta"> <li><a href="www.example.com" class="meta1">Home</a></li> <li><a href="Resources.html" class="meta2">Resources</a></li> <li><a href="Contacts.html" class="meta3">Contacts</a></li> </ul> <div id="search"> <input type="text" class="search" /> <input type="button" value="Search" class="search" /> </div> </div></body></html> Edited August 30, 2014 by Ingolme Advertising 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