Help with simple gif positioning question please

Forum Moderators: open

Message Too Old, No Replies

Help with simple gif positioning question please

midi25

5:28 pm on Jul 16, 2002 (gmt 0)

how can i simply do this. i want to position my submit gif on my page. My code is

<input type="image" value="Submit" img src="submit.gif"

now this works fine when put in form. but i want to postion it 10px left and 99px top how can i do that in html of css.

thanks

Nick_W

5:53 pm on Jul 16, 2002 (gmt 0)

CSS:

#button {
position: absolute;
top: 99px;
left: 10px;
}

That should do it....

Nick

mivox

5:54 pm on Jul 16, 2002 (gmt 0)

I don't think there is a way to do thatkind of positioning with html... unless you create a table with a cell that just happens to land where you want the button to be.

The CSS is much cleaner.

midi25

6:11 pm on Jul 16, 2002 (gmt 0)

yes i know thanks. but this is just a special case. i can put the gif in a layer and position it fine aswell as a table. but in both cases the submit action does not seem to work. Only when i drop it in the form does it submit but then i cannot position it you see. bit of a dilema.

I will try the above CSS thanks

mivox

6:14 pm on Jul 16, 2002 (gmt 0)

in both cases the submit action does not seem to work

Ooh. I hadn't thought of that. It could be that all form elements need to be within the same table cell...

midi25

6:19 pm on Jul 16, 2002 (gmt 0)

i know its tricky first time i have come up against this. the gif needs to be in the form element but not in a container if you see what i mean. then i need to postion it so it fits in with the style of my page.

i will try the css and let you know how i get on.

Nick_W

6:25 pm on Jul 16, 2002 (gmt 0)

Well I can confirm that the css works perfectly.

Nick

jatar_k

6:29 pm on Jul 16, 2002 (gmt 0)

position it with the css outside of the form and then use a

around it, that should allow it to submit even when outside the form

mivox

6:34 pm on Jul 16, 2002 (gmt 0)

I've had problems iwth javascript submit buttons before... they won't work across all browsers/platforms.

And anyone with javascript off won't be able to use the form at all.

jatar_k

6:40 pm on Jul 16, 2002 (gmt 0)

fair enough,

the only problem is the button listed at top won't submit the form unless it is inside the form tags.

Nick_W

6:50 pm on Jul 16, 2002 (gmt 0)

Well, I think this is all getting a little more complex than it needs be. Admittedly I've only tested on Moxilla and Opera but this example works just fine and can be used to do what you want:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
  <style type="text/css">
   #button {
   position: absolute;
   top: 99px;
   left: 10px;
   }
  </style>
  <title>Form test</title>
 </head>
 <body>
  <h1 style="margin-bottom: 300px;">Form test</h1>  <form method="post" action="yourAction.html">
   <input type="text" name="name" /><br />
   <input type="text" name="email" /><br />
   <input type="text" name="phone" /><br />
   <input type="image" src="button.gif" id="button" />
  </form> </body>
</html>

If anyone wants to test on Win browsers that would be great ;)

Nick

jatar_k

6:58 pm on Jul 16, 2002 (gmt 0)

Am I right in putting an xhtml ext on that?

If so then it works on IE 6.02

Nick_W

7:01 pm on Jul 16, 2002 (gmt 0)

Could have any extension Jatar, I always use html even for xhtml pages but more frequently they're named .php as I'm sure you're aware ;);)

Nick

jatar_k

7:09 pm on Jul 16, 2002 (gmt 0)

interesting, it errors out when I put any extension but xhtml.

at any rate it works, I think you just confused the heck out of me for a sec Nick. oh well, I'll just get more coffee. I know if you unconfuse me I will just shake my head and curse myself for being an idiot.

How's Nick's bit work for you midi25?