...

View Full Version : Positioning form elements over a graphic



Derek Zoolander
07-10-2008, 05:54 PM
I've never done this before, and I'm not sure how to go about doing it. I coded an application in PHP, then the designer handed me a graphic to apply to it.
I want all the fields to line up on the graphic where the designer left spaces for the fields. What is the best way to position these elements all around the image?

Here it is cut into 4 sections. I have the original from the designer with some lines on it (slices?) but don't know how to work with that.

Thanks.

jcdevelopment
07-10-2008, 05:57 PM
place the image as a background image in CSS, then inside that div space the forms(text fields) with padding and margins.

Derek Zoolander
07-10-2008, 10:26 PM
but the elements will move with different screen resolutions, no?

jcdevelopment
07-10-2008, 10:27 PM
not with padding and margins. Using positions they will unless fixed!

Derek Zoolander
07-11-2008, 03:57 PM
I beg to differ.. I used margins to position the fields.
I positioned the fields over the blanks on my 19" monitor.
When I checked on my laptop, they didn't line up at all..

abduraooft
07-11-2008, 04:08 PM
Could you post a link to your page and let's see your page?

Derek Zoolander
07-11-2008, 04:11 PM
http://biogenerator.files.mediabarninc.com

jcdevelopment
07-11-2008, 04:22 PM
the first thing to do is equal out your padding and margins in your document. It will help a little



* {
padding:0px;
margin:0px;
}

abduraooft
07-11-2008, 04:36 PM
Erase all those text and rectangles(of course take a copy first :)), then apply some styles to your form, say

form{
width:600px;
margin:0 auto;
margin-top: 200px; /* a value equivalent to the header part */
}
When you place an input element, it'll be displayed by hiding the background.

Then no need to apply id or separate margins for the inner divs.

Use labels to display the text near to input elements, see http://www.w3schools.com/tags/tag_label.asp

Will give more guidelines ......once you finish the above, good luck.

jcdevelopment
07-11-2008, 04:54 PM
Thats a very interesting way to do that. I never thought of that way. I guess you learn something new here every day. Thanks!

Derek Zoolander
07-15-2008, 05:03 PM
Ok, so once I set style to the form, how do I individually position each field?
And what should I do about the radio buttons? I guess I'm supposed to pshop the arrow out and have male/female select buttons with onclick styles..
thanks

abduraooft
07-15-2008, 06:05 PM
OK, have a look at the output of
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"><head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
*{
margin:0;
padding:0;
}
form{
margin-top:150px;

}
fieldset{
/*border:none;*/
border:1px solid blue;
font-family:/*Apply a suitable one, but you may need to replace the text with
some image and it's alternate text*/;
position:relative;

width:500px;
margin:0 auto;
}
fieldset ul{
list-style:none;
}
fieldset li{
/*border:1px solid #000; to see what's happening */
width:49&#37;;
margin:5px 0;
}

.myform li.left{
float:left;
clear:both;
display:inline;
}

label{
border:1px solid red;
}

.myform li label{
float:left;
width:90%;
}

</style>
</head>

<body>
<div id="wrap">
<form action="" class="myform">
<fieldset>
<legend>Fill out this simple form, sit back and let 'em come body</legend>
<ul>
<li class="left">
<label for="fName">First Name</label>
<input type="text" value="" name="fName" id="fName"/>
</li>
<li class="right">
<label for="lName">Last Name</label>
<input type="text" value="" name="lName" id="lName"/>
</li>

<li class="left">
</li>
<li class="right">
</li>

<li class="left">
</li>
<li class="right">
</li>

</ul>
</fieldset>
</form>
</div>
</body>
</html>

Derek Zoolander
07-15-2008, 06:16 PM
How can I have first name and last name beside each other like on the image?:
http://biogenerator.files.mediabarninc.com/image.php

abduraooft
07-15-2008, 06:23 PM
Change
fieldset li{
/*border:1px solid #000; to see what's happening */
width:49&#37;;
margin:5px 0;
}

.myform li.left{
float:left;
clear:both;
display:inline;
}
to


fieldset li{
/*border:1px solid #000; to see what's happening */
width:49%;
margin:5px 0;
float:left;
}

.myform li.left{
clear:both;
display:inline;
}
Also just remove that border around label and then reduce the width of fieldset if required.

Derek Zoolander
07-15-2008, 06:27 PM
Alright, that should get me going for now. Thank you very much.

abduraooft
07-15-2008, 06:31 PM
Fill out this simple form, si back and let'em come body

Glad to know that it's working :)

Derek Zoolander
07-15-2008, 07:23 PM
I just don't understand this...

When I resize my browser (FF), the fields move away from where I set them...

Check http://biogenerator.files.mediabarninc.com

macwiz
07-15-2008, 08:00 PM
You can always use Z-Indexes.

They are simply numbered layers. Just set the CSS property to "z-index:1" and "z-index:2"
ect...

The 2 will be on top of one, and so on. Just position the elements.

Derek Zoolander
07-15-2008, 08:03 PM
You can always use Z-Indexes.

They are simply numbered layers. Just set the CSS property to "z-index:1" and "z-index:2"
ect...

The 2 will be on top of one, and so on. Just position the elements.
That's not the issue here.
I just now need to know why the fields move when resizing the browser:confused:

abduraooft
07-16-2008, 08:47 AM
Why you still keeps all those rectangles in the image? Also the page given by me is a valid document. Either modify that directly or validate your code, see http://validator.w3.org/check?uri=http&#37;3A%2F%2Fbiogenerator.files.mediabarninc.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

jerry62704
07-16-2008, 03:40 PM
Your fieldset is relative while the form isn't.

Derek Zoolander
07-16-2008, 04:56 PM
Your fieldset is relative while the form isn't.
So should the form be relative, or change the fieldset to something else (fixed, absolute?)?

abduraooft
07-16-2008, 05:29 PM
So should the form be relative, or change the fieldset to something else (fixed, absolute?)? No... the code given by me is based on my idea in my second post (http://www.codingforums.com/showpost.php?p=710551). I'm sure that we can reach there, but you'd need to follow them.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum