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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Positioning form elements over a graphic

    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.

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    place the image as a background image in CSS, then inside that div space the forms(text fields) with padding and margins.

  • #3
    New Coder
    Join Date
    Apr 2007
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts
    but the elements will move with different screen resolutions, no?

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    not with padding and margins. Using positions they will unless fixed!

  • #5
    New Coder
    Join Date
    Apr 2007
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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..

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Could you post a link to your page and let's see your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New Coder
    Join Date
    Apr 2007
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts

  • #8
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    the first thing to do is equal out your padding and margins in your document. It will help a little

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

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Erase all those text and rectangles(of course take a copy first ), then apply some styles to your form, say
    Code:
    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.
    Last edited by abduraooft; 07-11-2008 at 04:01 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    jcdevelopment (07-11-2008)

  • #10
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Thats a very interesting way to do that. I never thought of that way. I guess you learn something new here every day. Thanks!

  • #11
    New Coder
    Join Date
    Apr 2007
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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

  • #12
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    OK, have a look at the output of
    Code:
    <!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>
    Last edited by abduraooft; 07-15-2008 at 05:30 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #13
    New Coder
    Join Date
    Apr 2007
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts
    How can I have first name and last name beside each other like on the image?:
    http://biogenerator.files.mediabarninc.com/image.php

  • #14
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Change
    Code:
    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
    Code:
    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.
    Last edited by abduraooft; 07-15-2008 at 05:25 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Derek Zoolander (07-15-2008)

  • #15
    New Coder
    Join Date
    Apr 2007
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Alright, that should get me going for now. Thank you very much.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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