1 Replies - 1143 Views - Last Post: 02 December 2008 - 08:59 AM

#1 Bram2   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 30-November 08

Create a graphical button with img and text?

Posted 30 November 2008 - 04:42 PM

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:

Posted Image Posted Image Posted Image
(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:
<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>


Is This A Good Question/Topic? 0
  • +

Replies To: Create a graphical button with img and text?

#2 Smurphy   User is offline

  • D.I.C Regular
  • member icon

Reputation: 35
  • View blog
  • Posts: 367
  • Joined: 07-July 08

Re: Create a graphical button with img and text?

Posted 02 December 2008 - 08:59 AM

Ok I hope I get what your saying right but anyway there is a tutorial on here that teaches you to make cool buttons. But one thing I thing I can say is that if you put your buttons in a list it would help keep them on one line. Unfortunately I am in class and can not find the tutorial but it is here and should help.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1