Create a graphical button with img and text? [Archive]

View Full Version : Create a graphical button with img and text?

Bram2

Dec 1st, 2008, 12:49 AM

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:

http://img520.imageshack.us/img520/8263/buttonleftdg8.gif http://img520.imageshack.us/img520/4167/buttonmiddlecz4.gif http://img520.imageshack.us/img520/8982/buttonrightnp6.gif
(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 (http://img208.imageshack.us/img208/1548/iconfm1.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:

<html><head>

<style type="text/css">

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

drhowarddrfine

Dec 1st, 2008, 01:36 AM

I have to say it. Using a table for that is the most ridiculous thing I have ever heard of. Learn the <button> element.

Excavator

Dec 1st, 2008, 01:56 AM

Hello Bram2,
Dr Howard is right, as blunt as he is. There are better ways than using tables to accomplish that.
I have a demo (http://nopeople.com/CSS/menu_centered/index.html) up that shows how to do something similar to what your trying but it only uses one image.

Here's an example with 2 images (http://nopeople.com/CSS/menu%20tabs/).

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?

-Definitely divs or a ul... not tables
-Gotta love IE6. That gap should go away if you float your images...
-not sure, have to see the code to see why it's breaking.

Major Payne

Dec 1st, 2008, 08:42 AM

This worked just fine for me:
<head>
<style type="text/css">
div#button {
width: 87px;
height: 68px;
margin: 1% auto;
background: transparent url(http://img234.imageshack.us/img234/5577/buttonredww4.gif) no-repeat center scroll;
}

div#text {
width: 87px;
height: 68px;
text-align: center; /* For IE */
margin: 0 auto;
padding-top: 25px;
font-family: verdana;
font-size: 0.75em;
font-weight: bold;
color: #0f0;
</style>
</head>
<body>
<div id="button"><div id="text">Text Here</div></div>
</body>Looked ok in Firefox and IE. Play with it and see how you want it. BTW, download the button image if you want it:

http://img234.imageshack.us/img234/5577/buttonredww4.gif (http://img234.imageshack.us/img234/5577/buttonredww4.gif)

abduraooft

Dec 1st, 2008, 09:07 AM

This ALA article may help you, http://www.alistapart.com/articles/slidingdoors/

Bram2

Dec 1st, 2008, 08:00 PM

I have to say it. Using a table for that is the most ridiculous thing I have ever heard of. Learn the <button> element.
Hehe, no offence taken :)

The idea behind using table was that I could use my button part as a repeating background, and put whatever I wish on top of it. Wasn't aware that this could also be done with menu lists and divs.

What is the <button> element? (Or do you mean just using a custom 'button' class and then apply some css with that as Major Payne demonstrated?)

Hello Bram2,
Dr Howard is right, as blunt as he is. There are better ways than using tables to accomplish that.
I have a demo (http://nopeople.com/CSS/menu_centered/index.html) up that shows how to do something similar to what your trying but it only uses one image.

Here's an example with 2 images (http://nopeople.com/CSS/menu%20tabs/).
Excellent, that's really helpful to me. Thanks a lot!

VIPStephan

Dec 1st, 2008, 08:13 PM

What is the <button> element?

http://w3schools.com/tags/tag_button.asp

However, in my opinion the button element should only be used in conjunction with forms (if at all) since it has no default action and isn’t very useful in terms of progressive enhancement (http://en.wikipedia.org/wiki/Progressive_enhancement) when used randomly in a document.

Another useful article: http://particletree.com/features/rediscovering-the-button-element/

Bram2

Dec 4th, 2008, 12:01 AM

Thanks again for all the help. Much appreciated.