PDA

View Full Version : css to position a form on top of an image in a layout table


codeBeast
05-12-2009, 09:57 AM
<div align="center">
<table width="969" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="1032" height="108" valign="top"><div align="center"><img src="images/bar.jpg" width="961" height="108" /></div></td>
</tr>
<tr>
<td height="219" valign="top"><div align="center">
<form name="login" id="login" method="post" action="#">
<label>Username:
<input type="text" name="user" tabindex="1" />
</label>
<label>Password:
<input type="password" name="password" tabindex="2" />
<input type="submit" name="Submit" value="Submit" tabindex="3" />
</label>
</form>

I have this code to put a form on my site.
However, I don't know how to position it on top of an image I have in a layout table.
I would like it to appear on top NOT underneath as it does at the moment.

edbr
05-12-2009, 10:30 AM
do you mean the image as a background?

codeBeast
05-12-2009, 10:33 AM
Yes.
The image should be a background so the form can be place on top.
However I can't seem to do this very well in css

edbr
05-12-2009, 10:38 AM
use a div instead of a table and css background-image.
tables are not really for layout

codeBeast
05-12-2009, 11:00 AM
Is it possible for you to write that div - I am a newbie - not too sure what div is. I just use dreamweaver and layout tables.

edbr
05-13-2009, 02:38 AM
in its simplest form so you can read up and add what you want/need
#text {

width: 961px;
height:219px;
position: relative;
background-image: url(images/bar.jpg);
background-repeat: none;

}
and use
<div id="text">
type what you want here

</div>

Ricky55
05-14-2009, 01:14 AM
can\t you just apply the background image to the form element? rather than crating unnecessary html?