Member Avatar for Bram2

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:

(The img tag doesn't seem to work (?) so here are links to the 3 images)
- -

Then create a borderless table with these images as background, and put the desired content (text and/or images such as this random ) 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?
  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:

<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>
  • 3 Contributors
  • 2 Replies
  • 109 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by crisane_love

Dani AI

Generated

Good start, — slicing a graphic into left/middle/right parts is the classic sliding-doors approach. was right to suggest moving away from table markup: using a single inline element styled with CSS keeps the control inline with text, improves accessibility, and avoids the rendering quirks tables can introduce in older IE.

A modern, compact solution uses CSS multiple backgrounds so a single anchor becomes the whole button:

<a href="/some/other/page" class="btn">
  <img src="icon.png" alt="" class="btn-icon"> Click here for something wonderful to happen!
</a>
.btn {
  display: inline-block;
  vertical-align: middle;
  padding: 14px 40px; /* adjust for cap widths */
  color: #fff;
  text-decoration: none;
  font: bold 14px/1 Arial, sans-serif;
  background:
    url("cap-right.png") right center no-repeat,
    url("center.png") center center repeat-x,
    url("cap-left.png") left center no-repeat;
}
.btn-icon { vertical-align: middle; border: 0; margin-right: 8px; }

For environments where multiple backgrounds or pseudo-elements are not available, a reliable fallback is to use the middle slice as the element background and inject left/right caps with absolutely positioned pseudo-elements (or small inline spans). Remember to add left/right padding equal to the cap widths so text does not overlap the caps.

A few practical notes: make the anchor display:inline-block to place it inside text; preserve focus outlines (or provide an accessible focus style) instead of removing them; and prefer CSS3 techniques (gradient/border-radius or border-image) when images are unnecessary. For reference on the CSS properties used, see MDN’s pages on display and using multiple backgrounds.

Recommended Answers

All 2 Replies

Member Avatar for blocblue

Okay, firstly, to fix the white lines in IE, I believe you'd need to add the following to your css stylesheet for the button table.

table {
[INDENT]border-collapse: collapse;[/INDENT]
}

Secondly, I think you're going about this the wrong way. The use of background images are correct, but not the table. Have a look at the following link, as I think that will answer your questions.

http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/

Best,

R.

Member Avatar for crisane_love

how to work this program in java?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.