Solved

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

Posted on 2014-07-20
4
395 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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…
Suggested Courses

623 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