473,224 Members | 1,334 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,224 software developers and data experts.

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 2713
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

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

Similar topics

by: Jesper | last post by:
I know that user interface library questions come up on this list every now and then. I've lurked here for a while and also searched google for anything that would fit my needs but haven't found...
by: RL | last post by:
Hello Perl gurus, 1. I have a web page where I can push a button (dospawn.html). 2. This button calls a CGI script (spawnboss.cgi) 3. spawnboss.cgi calls a forking perl script (forkme.pl) 4....
by: Bil Muh | last post by:
Esteemede Developers, I would like to Thank All of You in advance for your sincere guidances. I am developing a software using Visual C++ .NET Standard Edition with Windows Form (.NET)...
by: Justin Sane | last post by:
I have bought a book to learn C++, I bought Jesse Liberty's thick book, and so far I haven't seen how I can create simple applications for Windows with buttons, checkboxes, text areas, etc......
by: Fabrizio | last post by:
HI, I need to create a form that shows a planner (with employees and working days ) where i can use a different colors for "busy" days and "available" days (i'll read the data from a Database)....
by: BIOSMonkey | last post by:
I am trying to develop a drop down menu control. I know there are many other scripts out there but I need to develop our own in house for licensing purposes. Anyway, I am in the beginning stages...
by: Brian Blais | last post by:
Hello, I was wondering what the approximate minimum age to learn python is. Has anyone had experience teaching middle school students, or elementary school students Python? What brought this up...
by: ADezii | last post by:
Rather than using CurrentProject.Connection or entering your own Connection information, ADO supports storing Connection information in an external file called a Data Link File (which normally has a...
by: MaryamSh | last post by:
Hi, I am creating a Dynamic Search in my application. I create a user control and in Page_load event I create a dynamic dropdownlist and 2 dynamic button (Add,Remove) By pressing Add button...
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.