Layers/Submit fields

[joeisbatman]

Okay folks, heres a toughy...

My essential problem is this: I have a jpeg that I've made in photoshop which looks really sweet. This Jpeg represents a box where members of my site can login. I am having difficulties aligning my submit fields onto the exact pixel of where they should go... that is the text field must go "on top" of the jpeg. My first thought is to try to have a "layer" that includes the two submit fields. I have a few problems with this.
1. The submit fields are very cumbersome to move around
within the layer. I adjust for this by moving the
layer itself i believe... is this correct?
2. When I preview it in IE 6.0 the layer is like .5
inches to the left of where it should be. What the
heck?
Is there a better way? I read in a previous thread that layers can allow you to align things up to the very pixel- Should I be converting the layer into a table first? And will it be a problem if the picture is already a cell within a table? Please if someone could help i'd appreciate it.

Thanks folks
Batman

 

[zacksack]

did you slice the image in photoshop?

 

[joeisbatman]

No-- Do i have to? Please elaborate...

I'm really hoping for someone to figure this problem out, this is my last attempt

Thanks

 

[EugenePaliev]

Hello Batman!

I would recommend to use tables instead of layers. You can adjust almost everything exactly where you need it using tables.

I would set your JPG as cell background so you'll be able to put anything you need over it.

If you can give URL to your page or code would be greate and we can really help you!

Good Luck!

 

[TECHMAN007]

First I have tried doing this myself. With the way the current browsers work (Namely I.E. and Netscape) the positioning is almost always different for text cells in all browsers.

I am currently working on a solution for this but havent come up with any stable solution yet.

Like Eugene said, it would be better to use tables because you will see close to the same formatting in most browsers vs layers which are read a fair bit differently and tend to position themselves wacky in certain browsers. Once again though, the Form Object placement ends up being different in the multitude of browsers out there. Having a background image with your picture won't work much better then having it in a layer.

If you post a url with what you are working on I may be able to help as well might Eugene.

I just noticed that Zacksack asked if you had sliced the image. I am assuming that he meant slice it into four pieces and put the form object (Text/Password field) in the middle of the four images. This may work haven't tried it. If you need any help trying it I would be glad to assist.

Good luck and god speed! Hope this helps.

B-)

 

[joeisbatman]

Wow thanks fellas for taking a look at this stuff for me. I have the url here. it is

http://www.mybuddyinfo.com

If you're a fan of AIM, it should be up soon, so don't get your panties in a twist.

A few things to note. See the top "login" box? This was created with my friends help. There is a miniture one pixel cut off of the words "CLICK HERE" but I can live with that. He did the top box with, as you can see, using a background image, and putting a sub-table, into my larger table. The smaller sub table has three frames I believe. I'm not great with HTML, and am having difficulties recreating this situation. I'm honestly looking for a BETTER WAY. Like, for example, I want to put hyper links all on the left side-- but it just seems like a royal asspain to do it this way. A FEW MORE THINGS: When I move the box my friend created to the right (you'll notice I want to have it lined up with the blank space where the banner will go) the contents become messed up. Its hard to exactly say what I mean, but the form objects get all screwy. Lastly, you'll notice at the bottom I'm trying to place more submit fields in the box that says "SIGN UP". So what is the consensenus don't use layers? Or use them? I tried putting a layer on top and converting it to a table, but it converted it to a table in a totally different location on the page (the top). It didn't embed the tables. Gah. I need to get this site up soon
Thanks guys, let me know.

 

[TECHMAN007]

Dunno if you did some editing after you posted this but all I get is a bunch of dead image links the main AOL image, the Mybuddy info image, the policies image, and of course two text boxes right over eachother (no background image or anything). Also I viewed this in Netscape 4.08 and the MYBUDDYINFO.COM image at the top ran off the right side of the page (in 1024x768). Looks great in IE though. *curse those netscape developers* =)

 

[EugenePaliev]

Batman,

Firstly, your top image/banner has space in its name - because of it it cannot be shown. Never leave spaces in any object name that you use on the Web!

Secondly, as TECHMAN007 wrote - show us please complete page with all necessary images and we'll try to fix it.

Good Luck!