Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 402
  • Last Modified:

Placing a text box on a image... c#

As shown below, there is an image filling the entire  <td> tag.
	<td class="middleButton fontAndBackgroundColor">
         <img src="images/Button.png" width="200px" height="60px" />
        <!-- <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>-->
    </td>

Open in new window


How can a text box, label, or anything else could sit on the same <td> tag show a date?

--------------------------------------------------------
|            Button Caption here                     |<-- this is Button.png with a fixed caption on it.
|                                                                   |     (the caption is a part of the image)
|                                                                   |
|                   July 19, 2014  <-----------------|------ this date will have to change once in a while.                         |
--------------------------------------------------------             (the date is not a part of the image)

The work is done in asp.net, c#. The date is superimposed on the image.

Thank you.
0
Mike Eghtebas
Asked:
Mike Eghtebas
  • 2
  • 2
1 Solution
 
Raghu MutalikdesaiSenior Manager in a leading IT Services companyCommented:
Instead of placing image inside the <td>, you must use the image as a background in order to achieve super imposing:
<td style="background-image: url('images/Button.png'); background-repeat: no-repeat; background-position: left top; height: 120px; vertical-align: bottom;"><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>

Open in new window

There are 2 key factors:
1. Height of the cell
2. Vertical alignment of the cell

Make sure you set the height that is a sum of image height and the text box height (at the least). Also, because cell's vertical alignment is set to bottom, the text box is forced to bottom of the image.

Also, just to ensure image is shown correctly, use background-size: 120px 80px; inside the style attribute.

And the values I have used for height, width etc. (in pixels) are sample values. You must change these as per your needs.
0
 
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Thank you.
0
 
Raghu MutalikdesaiSenior Manager in a leading IT Services companyCommented:
Good to hear that it helped you! Thanks
0
 
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Yes, I had started a process that one draws on the image the required text on the fly. It is good technique but awfully hard compared to your good solution.

Thanks,

Mike
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now