Solved

Placing a textbox on an Image

Posted on 2002-04-09
37
225 Views
Last Modified: 2010-04-09
I need to place a textbox right on top of an image.
I've seen enough from other questions to make it work
with Internet Explorer but it wont work with Netscape.
Can anybody give me a working example that works with both
IE and with Netscape?
Thanks.
0
Comment
Question by:Matlock
  • 15
  • 9
  • 8
  • +4
37 Comments
 
LVL 12

Expert Comment

by:lexxwern
ID: 6928436
<input type="text" style="position:absolute;left:100;top:100;"/>

please change the values


lexxwern
0
 
LVL 19

Accepted Solution

by:
webwoman earned 200 total points
ID: 6928440
<table (set cellpadding/spacing/ however you want) border="0">
<tr><td background="yourimage.gif" valign="bottom"><img src="spacer.gif" width=(bg image width) height=(bg image height - space for caption)><br>
<table (set cellpadding/spacing/ however you want) border="0">
<tr><td>caption goes here</td></tr></table>
</td></tr></table>

Should work for just about everything. Simple, no scripting, no hassles, no divs. ;-)
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6928441
for <textarea>

<textarea style="position:absolute;left:100;top:100;">
</textarea>

lexxwern
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 6928443
<html>
<head>
<title>Textbox on top of image</title>
</head>
<body>
<div id="layImage" style="position:absolute; left:10px;top:10px;">
  <img src="someimage.gif" width="200" height="200">
</div>

<div id="layTextbox" style="position:absolute; left:20px; top:20px;">
  <form>
   <input type="text" name="inpOnTopOfImage">
  </form>
</div>
</body>
</html>

Good luck,
Max.
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6928449
>>>>background="yourimage.gif"<<<<

i think netscape has its issues here;


lexxwern
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6928454
If you want a form, put a form in the table. Still works. Still no divs, no hassles, no problems if there are other form fields that DON'T need to be over a pic.

Not everything requires divs for positioning. ;-)
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6928461
Not in a td. It would in a table, but not a TD.

See it in action! www.chesapeake.edu/test_a.asp It's dropdowns, but the same principle applies. Works in IE4-6, NN4-6, probably anything else. ;-)
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6928464
Do we need div's for positioning? try the style attribute directly in the <input>; no?


lexxwern
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6928470
And it even stays centered when you resize... will wonders never cease. ;-)

Again, no divs, no scripting (other than for the dropdowns, which has nothing to do with the layout), no hassles, works for everything.
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 6928480
webwoman,

You might want to add the trick for not making the background repeat if you use the background on a cell..just a suggestion..

So if you use the background on the cell and you place an extra table in that cell...all rows in that cell need to get the background="" to make sure the cells do not repeat the background...

Max.
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6928481
No, divs are not necessary for what they asked. Not at all. Positioning in a style attribute won't work in NN4, may not in 6 either.

Why do it the hard way when you can just use some ingenuity in how you set up your tables? And in the bargain, have it work in just about everything?
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6928485
Max, right. I forgot that when I posted the code.

But it definitely works, works well, and works for everything. ;-)
0
 
LVL 22

Expert Comment

by:CJ_S
ID: 6928486
Max learned *wink*
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6928494
"Why do it the hard way when you can just use some ingenuity in how you set up your tables? And in the bargain, have it work in just about everything?"


tables are hard ww; specially if one types in the code in notepad;


lexxwern
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 6928496
Max learns every day CJ.. :) Fortunately.. :)

And webwoman, yes...I know...but you allready posted that code...didn't want to copy that...so provided an other way to do the same.. :)

Max.
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 6928503
"tables are hard ww; specially if one types in the code in notepad;"

Depends on the table structure...I know there are some times where I can hardly get the table structure right...but the most times, tables are easy enough...

And I ALWAYS use a texteditor...not notepad, but textpad which has color coding, which helps.. :)

Max.
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6928514

<table (set cellpadding/spacing/ however you want) border="0">
<tr><td background="yourimage.gif" valign="bottom"><img src="spacer.gif" width=(bg image width) height=(bg
image height - space for caption)><br>
<table (set cellpadding/spacing/ however you want) border="0">
<tr><td>caption goes here</td></tr></table>
</td></tr></table>


simpler than


<input type="text" style = "position:absolute;left:100;top:100;"/>
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6928518
???
0
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

 
LVL 19

Expert Comment

by:DreamMaster
ID: 6928525
not simpler....but better...as that first one will actually work...while <input type="text" style="position:absolute;left:100px;top:100px;" /> will only work in IE...and even that I doubt....because I do not believe input types can be absolutely positioned like that...as far as I know it doesn't support that style...

Max.
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6928532
"will only work in IE...and even that I doubt....because I do not believe input types can be absolutely positioned like that...as far as I know it doesn't support that style..."

no they can Max.;

ie6
ie5.5
ie5
ns6.2
ns6
ns4(not very sure tho)



lexxwern
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 6928563
NS4, I am sure won't support it..NS6.x, not a clue, never used it..and not likely to do so in the future...

But if I may ask...where did you get the information for that lexxwern?

Max.
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6928575
i keep trying stuff when i get bored of games; i get bored of games cause i happen to get hold of cheats; so damn the cheats;-)


lexxwern
0
 
LVL 18

Expert Comment

by:bruno
ID: 6928579
tables should NOT be used for layout!  CSS should.  simple as that.



however, not all browsers properly support the correct CSS....so if you really care about less than 10% of the market out there, than go ahead and use tables for your layout.



BRUNO
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 6928589
or DIV's (pushing his own suggestion into the attention... :p )

Max.
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6928683
>>>>or DIV's (pushing his own suggestion into the attention... :p )
Max.<<<<

divs are nothing without the css in them; and if you have too have css why not directly in the <input>( pushing his own suggestion into the attention...;-) )?


lexxwern
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 6928706
Because the style directly into the input is not cross-browser...enough reason for me...

Max.
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6928744
>>>>Because the style directly into the input is not cross-browser...enough reason for me...

Max.

try it sometime. "surprisingly" work on ns and ie for me.

lexxwern
0
 

Author Comment

by:Matlock
ID: 6928782
I'm overwhelmed with number of comments, but I'm still struggeling to make this work in Netscape (seems OK in IE)
<html>


<head>
<!-- #BeginEditable "doctitle" -->
<title>Title</title>
<!-- #EndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000" >
<form name="form1" method="post" action="">
  <table width="526" border="0" cellpadding="0" cellspacing="0">
    <tr bgcolor="#0066CC">
      <td width="31" height="32" valign="middle" align="center"><b><!-- #BeginEditable "Question%20Number" --><b><font face="Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">10.</font></b><!-- #EndEditable --></b></td>
      <td valign="top" width="24" align="right">
        <div align="center"><font face="Arial, Helvetica, sans-serif" size="2"><b>&nbsp;</b></font></div>
      </td>
      <td valign="middle" align="left" width="428">
        <div align="left"><font face="Arial, Helvetica, sans-serif" size="2"><b><!-- #BeginEditable "Main%20Question" --><font color="#FFFFFF">Fill inthe missing <i> <font size="3">figure</font></i>?</font><!-- #EndEditable --></b></font></div>
      </td>
      <td width="43">&nbsp;</td>
    </tr>
    <tr>
      <td height="13" width="31"></td>
      <td width="24"></td>
      <td width="428"></td>
      <td width="43"></td>
    </tr>
    <tr>
      <td width="31"></td>
      <td width="24"></td>
      <td width="428"></td>
    </tr>
  </table>
  <!-- #BeginEditable "Add%20new%20sub%20Question" -->
  <table width="526" border="0" cellspacing="0" cellpadding="0">
    <tr bgcolor="#AAD5FF">
      <td height="20" valign="top" width="32">&nbsp;</td>
      <td valign="middle" width="425"><font face="Arial, Helvetica, sans-serif" size="2">Complete
        the missing part of the sign.</font></td>
      <td valign="middle" width="69">&nbsp;</td>
    </tr>
    <tr>
      <td height="20" width="32"></td>
      <td height="300" width="425">
       <div id="layImage" style="position:absolute; left:100px;top:100px;width:419;height:286;">
 <img src="Images/pag15b.gif" width="418" height="286">
</div>

<div id="layTextbox" style="position:absolute; left:280px; top:160px; width:200px; height:80;">

          <input type="text" name="inpOnTopOfImage" size="8">
 
</div>
       </td>
      <td valign="middle" align="right" height="20" width="69"><font face="Arial, Helvetica, sans-serif" size="1"><i>
        </i></font></td>
    </tr>
  </table>
  <table width="526" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="right">&nbsp;</td>
    </tr>
    <tr>
      <td align="right"><font face="Arial, Helvetica, sans-serif" size="2"><i>maximum
        1 mark.</i></font></td>
    </tr>
    <tr>
      <td>
        <hr>
      </td>
    </tr>
  </table>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <!-- #EndEditable -->
</form>
</body>
<!-- #EndTemplate -->
</html>

ps: sorry cant provide graphic...
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6928802
<input type="text" name="inpOnTopOfImage" size="8" style="position:absolute; left:280px; top:160px; width:200px; height:80;">

try this; direct css onto the input box.




lexxwern
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6928985
I think I favour the way ww is doing it.  The way max did it with the positioned div will work if there is only one fieled in the form, but if there is more than one field then it has problebs because you would have to pit the div inside the form, and that will break the form in Netscrap. The alternative would be two forms with scripting and a hidden field to make it really complicated.  

However I would do it like this, with the table in the form and the form displayed as an inline element to eliminate the extra line feed:
<form name="myform" style="display:inine">
<table>
   <tr>
      <td background="yourimage.gif">
         <input name="myfield" type="text">
      </td>
   </tr>
</table>
</form>


Additional form fields can go into aditional fileds in the table or can be external to the table.

Cd&
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6929267
Matlock, you've got DIVS -- get rid of the divs. Divs in a table are DEATH to Netscape. Also kills the form.

See this?

     <td valign="top" width="24" align="right">
       <div align="center"><font face="Arial, Helvetica, sans-serif" size="2"><b>&nbsp;</b></font></div>
     </td>

Useless... you're contradicting yourself. Is it right or center? and look at it closely - THERE'S NOTHING THERE. The whole cell is EMPTY.

and this...
<tr bgcolor="#0066CC">
     <td width="31" height="32" valign="middle" align="center"><b><!-- #BeginEditable "Question%20Number"
--><b><font face="Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">10.</font></b><!-- #EndEditable
--></b></td>
     <td valign="top" width="24" align="right">
       <div align="center"><font face="Arial, Helvetica, sans-serif" size="2"><b>&nbsp;</b></font></div>
     </td>
     <td valign="middle" align="left" width="428">
       <div align="left"><font face="Arial, Helvetica, sans-serif" size="2"><b><!-- #BeginEditable
"Main%20Question" --><font color="#FFFFFF">Fill inthe missing <i> <font size="3">figure</font></i>?</font><!--
#EndEditable --></b></font></div>
     </td>
     <td width="43">&nbsp;</td>
   </tr>

It looks like you've got a 4 cell table -- why? The numbers don't need to be a separate thing, they can be in the first cell with the text. The second cell is EMPTY -- does it ever have anything? If not, why do you have it? You don't need to set alignment on the cell and then use a div -- it serves no purpose. You also don't need all those #($%*$ font tags.

What editor are you using? If you're using a graphical editor, use it for general layout ONLY, then fix the crap it puts in the code. They all do -- even Dreamweaver. Get rid of the divs and clean up your code. The divs are KILLING it. You do NOT need them if you want this to work RIGHT.

Also get rid of the font tags -- CSS is much better.

And here...
<td height="300" width="425">
      <div id="layImage" style="position:absolute; left:100px;top:100px;width:419;height:286;">
<img src="Images/pag15b.gif" width="418" height="286">
</div>

<div id="layTextbox" style="position:absolute; left:280px; top:160px; width:200px; height:80;">

         <input type="text" name="inpOnTopOfImage" size="8">

</div>
      </td>

MORE DIVS! Totally unnecessary. Put the image in the background of the cell, do EXACTLY what I said with the spacer gif, and put the formfield in.

You're fighting with divs for NOTHING. They're not working. They don't work for something like this. Forget them.
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6929308
Just a note... it's not the amount of code, it's how hard it is to make it WORK.

Lexxwern, yep, it's just one line if you use the positioning in the style... but if you spend 2 days figuring out that it doesn't work right for a chunk of your audience, does it save you any time?

If you set it up as a table, once it works it works for everybody. The worst you might have is a tiled background if you forget to put in the "" on the bg image in the cells. And that takes no time to fix.

The initial question was something that worked in IE AND Netscape -- tables do. Without any scripting, without anything special, and in every version from 2 up.

If you need to add rows, text, other images, they STILL work. And you don't need to recode the entire thing to make them show up in the right spot. ;-)
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6930232
>>but if you spend 2 days figuring out that it doesn't work right for a chunk of your audience, does it save you any time?

i dont care about ns4x users; for the rest(that is a huge %age) it woks perfect; so i use it;


lexxwern
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6930269
>>i dont care about ns4x users; for the rest(that is a huge %age) it woks perfect; so i use it;>>

Yes, but Matlock DOES -- and stated so at the very beginning. ;-)
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6930336
>>IE and with Netscape?

this was what is stated by Matlock; I guess Netscape fans shouldve shifted over to ver6x; I do care about NS6x users; or perhaps NS6x cares about my site and this method;-)


Regards,
lexxwern
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6930342
Correctio: Mozilla cares for us.

lexxwern
0
 

Author Comment

by:Matlock
ID: 6931416
OK, I would have liked to have done it with layers BUT,
as you rightly stated I DID need to develop it with Netscape 4x users in mind.

Thanks to everyone who commented it was all helpfull but I did have to go down this route to make it work for my audience.

Thanks for your advice webwoman.
Matlock
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

747 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

13 Experts available now in Live!

Get 1:1 Help Now