Overlay text box on an image

[tyrobert]

I am looking to have a text box overlay over the main image on my webpage, but I'm not sure how to do this. I basically want to have a box somewhere over the image where the target of the links goes and the html shows up there. (kind of like on this site:

http://www.masonjennings.com

) I am not looking to copy him cause I had the idea to do it before I looked at a website like this...I just need the knowledge of how to do this. Anything and everything appreciated. Thanks

 

[TheConeHead]

don't worry... as a wiseman once said... there is nothing new under the sun... put your text in a div and give that div a style="position:absolute; top: ;left: "


put the correct coords in top and left to place your div where you want it... position:absolute makes it a floating layer that can be placed over the hardcoded image...

 

[dmears1]

Don't mean to piggy-back of someone else's post, but I just happen to be trying the same thing and I cannot get this to work for the Mozilla browser. It works well for IE. Does absolute positioning not work in the Mozilla browser or am I probably doing something wrong? Thanks in advance for any help.

 

[Vragabond]

Absolute positioning works in Mozilla. Post your code and maybe we'll see what seems to be the problem. There are some differences with the browsers since this is a fairly new thing.

 

[deecee]

heres one way!

<TD background=&quot;image.jpg&quot;><DIV style=&quot;overflow: auto;&quot;>TEXTTExt ---SADFA SDGSAGSADFSADF</DIV></TD>

its hard to explain how to accomplish a somewhat intermediate layout like that if you dont really have any work with simple layouts first. Besides he used frames -- I would use tables and layers. All you need to do is add a background image to a cell and then type in the cell

Sometimes the Answer You Are LOOKING for can be FOUND BY SEARCHING THE FAQ'S @&%$*#!!!

 

[dmears1]

Thanks for the reply Vragabond...I am at work so I don't have the code nearby but I will post it this evening. Thanks again for the help.
Deecee, I will also try your suggestion.

 

[tyrobert]

Thanks everyone for their responses, but I'm still not sure how to do this, never used div before so I don't know where to place it.

On my main page I have an image in which I want I currently have as the target for the links that are at the bottom. The text simply overlay's the image and I used an iframe to do this. But if I want to have the target be a text box inside of the image so that the text box basically overlays the image and the textbox can be the target instead (like

http://www.masonjennings.com),

then how would I use div and where would I put it? Do I have to split up the image into three parts? If someone could give me a little more help on the div or framesets that would be great. Thanks for your help.

 

[dmears1]

Hey tyrobert, I've been having problems with DIV tag also. Here are a couple of links I've found helpful:

http://webdesign.about.com/library/tags/bltags-div.htm

AND

http://www.w3schools.com/tags/tag_div.asp

Hope these are helpful.

 

[tyrobert]

Thanks dmears1, that helps me to understand div tags more, but I don't know if they are the best for this kind of situation. What about framesets? Would those work? Anyone throw out some suggestions, anything and everything helps.

 

[tyrobert]

div or frameset or not, I can figure that out somehow but my main question is how do I get the links to target that particular text box and put the html page in that text box? I don't want to write a whole bunch of text on one page, but instead I want the target of the links to go into the box instead. How would I do this with the target and text box?

 

[deecee]

use an iframe

Sometimes the Answer You Are LOOKING for can be FOUND BY SEARCHING THE FAQ'S @&%$*#!!!

 

[dmears1]

Vragabond, thanks for the offer to help me out, but I've found a solution. I used the SPAN tag with relative positioning instead of DIV and it works great in both IE & Mozilla. Thanks again!