Jump to content

to label a button


visitor
 Share

Recommended Posts

Hi there

 

I would like to label a button but so far I failed terribly. I tried the following...

 

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td style="background-image(url:round_corner.gif)" width="116px" height="21px" align="center"><b>Home</b></td>

</tr>

</table>

 

<input type="image" src="round_corner.gif" width="116px" height="21px" value="Home" onclick='return verify();'/>

 

Has anyone got an idea how this can be done properly?

 

cheers,

 

visitor

 

[attachment deleted by admin]

Link to comment
Share on other sites

I am not sure what you mean with label a button, but if you want to set your own background image to a submit button (which is independent of javascript)

 

try the following:

<!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">
.fancybutton{
    display:block; /* use inline block if you want it to behave inline */
    width:116px;
    height:21px;
    border:none;
    cursor:pointer; /* little hand to show it's a button */
    background: url('round_corner.gif') no-repeat;
}
</style>
</head>
<body>
    <form action="" method="post">        
        <input type="submit" name="submit" class="fancybutton"/>
    </form>
</body>
</html>

notice I gave submit a class and in css I set the properties for it instead of in the html itself. That way you separate concerns.

 

Ones you played with this and want a something more advanced, like a stretching button. Google for css sliding doors.

 

-edit: if you also validate your html/css most basic errors can easily be fixed

Link to comment
Share on other sites

Great!

 

Thank you very much cssfreakie, I really appreciate your help!

 

visitor

 

Before I forget. <input> is an inline element, to give it dimensions other than by adding a value. You need to display it block or inline-block. Ones you've done that you can style it the way you want. So that is what i did in the example given above.

good luck!

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.