PDA

View Full Version : Overlapping w/ a Textbox



TriscuitMich
Jul 2nd, 2002, 02:30 AM
welp i have a photo background complete with links and everything. my only problem is that i want a textbox in an empty space in the image (its still part of the image, only it has no text or graphics or anything, only a block of color). anywho i've tried chopping up my image and putting it into frames, but my frames will never make the image complete (there are always lines dividing the frames even though i turned off the borders). either way i need the text box and it will still have to be on top of the image. is it possible to have the textbox overlapping the image?

oh and on top of that how would i go about placing the textbox in a certain place on the picture (i.e. i want the textbox on the bottom part of the picture).

i hope this made sense. lol

SYP}{ER
Jul 2nd, 2002, 02:35 AM
Try framespacing="0" frameborder="0"

That'll remove those borders. Otherwise I have no clue what you just asked :confused:

pardicity3
Jul 2nd, 2002, 07:25 AM
First, a link to the pic would be nice but.....Hmm, okay, well as I see it you could do one of two things. Either:

a) Splice up the picture and use tables as a layout
or
b) use a div to plave the textbox over the image

I would personally go with "a" as I am more of a table person than a div person, but I will quickly explain both ways:

For "a", you could cut up the picture so that as I see it, you would have four pieces (the top piece, the two pieces on either side of where you have the text box, and the bottom piece). You would then put these pieces in a table like so....

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="toppiece"></td>
</tr>
<tr>
<td><img src="leftpiece"></td>
<td>YOUR TEXT BOX HERE</td>
<td><img src="rightpiece"></td>
</tr>
<tr>
<td colspan="3"><img src="bottompiece"></td>
</tr>
</table>

That should work, but if you would rather layer the textbox over the image you could put a little div on your page that when something like this:

<div style="position: absolute; left: (how far you want the div from the left edge of the page)px; top: (how far you want the div from the top of the page)px;">YOUR TEXT BOX HERE</div>

I would discourage you from using the div choice since I dislike divs cause they scare me :rolleyes: and because for being unexperienced like me, it is hard to get the div to be in the same place on all the different browsers and resolutions out there.

I hope I helped, and I hope I made sense....:thumbsup:

joh6nn
Jul 2nd, 2002, 01:30 PM
yeah, i agree with paradicity. if you're picky, and you want the div to be in exactly the same place in all browsers, then you should split the image up, and use a table to arrange all the pieces.

if, on the other hand, you agree with the theory that "close enough is good enough", then you could use a div, and use percentages to place it in such a way, that it would always be in nearly the same place, no matter the size of the screen, or browser window. it's the way i'd do it ( i think, depends on the picture, and intent ), because it's easier, and generally speaking, "close enough is good enough".

TriscuitMich
Jul 3rd, 2002, 05:50 AM
thanks ya'll! talk about a relief! i was about to throw my computer out the window until you guys showed up! i decided i'm not gonna bother using the image until next season when i update my layout. more questions to come though... (look out!) :D

chesneil
Jul 8th, 2003, 05:32 PM
If I understand correctly, surely the easiest way would be to put the image in a one-cell table with the image as a background. Then in that cell put another table. The text box can go in one cell of that second table and the other cell(s) can have a transparent image. The transparent image can be a small 10px by 10px, expanded in the image tags 'height' and 'width' attributes.

The image size won't change, so with a bit of trial and error with the h/w tags you can get the textbox cell in the right place. And no cross-browser probs that I can see, so long as the outer table is only one cell.

Seems too easy, though. I must be missing something...?