470,596 Members | 1,145 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,596 developers. It's quick & easy.

Create a graphical button with img and text?

I'm trying to create a graphical button with custom images and text on it. My approach was to split the generic button image into 3 parts:

(Note: I stored these locally as 'button_left.gif', 'button_middle.gif' and 'button_right.gif')

Then create a borderless table with these images as background, and put the desired content (text and/or images such as this random icon.gif) in the middle.

Below is what I got so far. Three questions:
  1. Am I on the right track, or should I do this completely differently? (e.g. no tables at all, and just div/span or something?)
  2. On Firefox and Opera, it looks OK. On IE6, there's two white bars in the button. How do I fix that?
  3. Is there a way to not make the table break to a new line? I.e. could I put this button thing somewhere between regular text?

Thanks a lot in advance!

Here's my current HTML:
Expand|Select|Wrap|Line Numbers
  1. <html><head>
  3. <style type="text/css">
  4. <!--
  5.  a { text-decoration: none; } 
  6.  table { border-spacing: 0; }
  7.  td.ButtonMain { vertical-align: center; font-family: Arial; font-weight: bold; color: #ffffff; }
  8.  img.ButtonImg { border: 0; vertical-align: middle; }
  9. -->
  10. </style>
  12. </head>
  13. <body text='#000000' bgcolor='#ffffff'>
  15. <a href='some/other/page'>    
  16. <table><tr class='ButtonRow' height='68px'>
  17. <td background='button_left.gif' width='36px'></td>
  18. <td background='button_middle.gif' class='ButtonMain'>
  20. <img src='icon.gif' class='ButtonImg'> Click here for something wonderful to happen!
  22. </td>
  23. <td background='button_right.gif' width='36px'></td>
  24. </tr></table>
  25. </a>
  27. </body></html>
Nov 30 '08 #1
2 2612
I was just going to write a sample code, but made a quick google search and found this nice tutorial:

How to make sexy buttons with CSS

I hope you like it.
Dec 1 '08 #2
hi Bram2,

you are in right way for implementation. you can use CSS with div but that need a lot more coding and its a lot of fuss. right now your implementation is pretty neet.

For fixing the bars on you can make the border of the table to be ZERO and use CSS "border-collapse:collapse " property to make the border collapse..

yes there is a way to make table to be in same line in the "td" of the random text use nowrap="nowrap" .. this is an HTML property for "td" to not break the content to new line...

enjoy brother... happy coding
Dec 1 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

reply views Thread by Jesper | last post: by
8 posts views Thread by Justin Sane | last post: by
4 posts views Thread by Fabrizio | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.