Solved

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

Posted on 2014-07-20
4
385 Views
Last Modified: 2014-07-20
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
Comment
Question by:Mike Eghtebas
  • 2
  • 2
4 Comments
 
LVL 7

Accepted Solution

by:
Raghu Mutalikdesai earned 500 total points
ID: 40207229
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
 
LVL 34

Author Closing Comment

by:Mike Eghtebas
ID: 40207520
Thank you.
0
 
LVL 7

Expert Comment

by:Raghu Mutalikdesai
ID: 40208264
Good to hear that it helped you! Thanks
0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40208295
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

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question