Solved

Textbox over Image in ASP.NET

Posted on 2010-08-25
2
1,496 Views
Last Modified: 2012-05-10
How can I go about placing a textbox over a header image that is not set as a background image. If I play with the margins I can push the text back over the image but it will not work the same way with a textbox.
<div id="mainbar"><img src="images/contentpageheader.jpg" alt="" />

    <div class="typeface-js"><h2>Careers</h2></div>

    <br /><br /><br />

    <div class="content">

        <div class="typeface-js" id="font-expressway" style="color:#0d1e2b; font-size: 15px; margin-bottom: 10px; line-height: 18px; padding-top: 10px; ">Fill out the form below:</div>

        

        <div id="forml">

        <ul>

            <li class="typeface-js">Name:</li>

            <li class="typeface-js">Phone Number:</li>

            <li class="typeface-js">Email Address:</li>

            <li class="typeface-js">Description of Qualifications:</li>

        </ul>

        </div>

        

        <div id="formr">

        <ul>

        <li><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></li>

        <li><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></li>

        <li><asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></li>

        <li><asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></li>

        </ul>

        </div>

  

    </div>

    <div id="contentfooter"><img src="images/contentpagefooter.jpg" alt="" /></div>

</div>

Open in new window

0
Comment
Question by:WCCrobert
2 Comments
 
LVL 6

Accepted Solution

by:
hehdaddy earned 50 total points
Comment Utility
The only way I can think of off the top of my head (and this maybe wrong). Would be to set the textbox and possibly the imgage to position: relative inside a div. Then you could use z-index to put the textbox on top of the image and place it precisely where you want it.

Maybe give that a shot and see what happens.

Cheers.
0
 
LVL 4

Expert Comment

by:CoveyCraig
Comment Utility
You could use css instead.  Put this inside the <head> portion of your page.
<%
Response.Write      "<style type=""text/css"">" & vbNewLine & _
            "<!--" & vbNewLine & _
            ".textboxstyle {background-image:url(images/contentpageheader.jpg); background-color:" & strPageBgColor & "; background-repeat:no-repeat; background-position:center; background-attachment:scroll; font-family:" & strDefaultFontFace & ";font-size:10pt; overflow:auto;} " & vbNewLine &_
            "-->" & vbNewLine & _
            "</style>" & vbNewLine
%>

Then where you want a textbox with the background image, call it using 'textboxstyle' like this:

Response.Write      "<input type=""text"" name="whatever" class=""textboxstyle"">"
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

728 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now