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:

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?)
On Firefox and Opera, it looks OK. On IE6, there's two white bars in the button. How do I fix that?
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

 <html><head>
 
<style type="text/css">

<!--

 a { text-decoration: none; } 

 table { border-spacing: 0; }

 td.ButtonMain { vertical-align: center; font-family: Arial; font-weight: bold; color: #ffffff; }

 img.ButtonImg { border: 0; vertical-align: middle; }

-->

</style>
 
</head>

<body text='#000000' bgcolor='#ffffff'>
 
<a href='some/other/page'>    

<table><tr class='ButtonRow' height='68px'>

<td background='button_left.gif' width='36px'></td>

<td background='button_middle.gif' class='ButtonMain'>
 
<img src='icon.gif' class='ButtonImg'> Click here for something wonderful to happen!
 
</td>

<td background='button_right.gif' width='36px'></td>

</tr></table>

</a>
 
</body></html>

Nov 30 '08 #1

Subscribe Post Reply

2721

serdar

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

clain

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

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

Python

Win32 - forked process doesn't create a Window

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

Perl

Create Dynamic Controls and Displaying Page by Page on the form

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)...

.NET Framework

How can I create simple applications for Windows?

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

C / C++

Create a graphical planner

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)....

C# / C Sharp

DHTML dropdown menu, IE and visibility graphical glitch

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

Javascript

minimum age to learn python (a.k.a graphical vs text languages)

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

Python

How to Create a Data Link File

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

Microsoft Access / VBA

Create Dynamic Dropdownlist Controls and related event - ASP.NET

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

.NET Framework

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Create a graphical button with img and text?

Similar topics