Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2002
    Location
    Hellnation (aka South Florida)
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Overlapping w/ a Textbox

    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

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ontario, Canada
    Posts
    183
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try framespacing="0" frameborder="0"

    That'll remove those borders. Otherwise I have no clue what you just asked
    Offtone.com - In the works...

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Iowa / Notre Dame
    Posts
    538
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 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....
    My Site {Mike's Adventures}

    Yikes, forums are almost too much fun.

  • #4
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72 W. 48' 57" , 41 N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    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".
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #5
    New to the CF scene
    Join Date
    Jun 2002
    Location
    Hellnation (aka South Florida)
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!)

  • #6
    Regular Coder
    Join Date
    Jul 2002
    Posts
    124
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •