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.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    Repositioning form

    Hello

    I have a test page here:

    http://www.proofreading4students.com...y_records2.asp

    and ideally would like to reposition the 'Data Input' form towards the bottom of the page so that a) it is separated from the main table above it (instead of being glued to it as at present - padding??) and b) to have five columns of two rows for the fields instead of one column of ten rows as at present.

    What would be the best way of going about doing that, please?

    Many thanks.

    Steve

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    The positioning is easy...put the form in a div and give the div a margin-top:20px styling (replace 20px with whatever distance you want).

    I don't follow what you want with the table. You want to have five columns with two rows...?

    HTH
    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • Users who have thanked whizard for this post:

    SteveH (07-05-2013)

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello whizard

    Thank you for your reply.

    If I do this in CSS:

    Code:
    #div.form1 {
    	
    	margin-top: 20px;
    	
    }
    and this in HTML:

    Code:
    <div id="form1">
    Form here
    </div>
    all it does is further separate the form fields while the form itself is still 'attached' to the table.

    Yes, at the moment in the 'Input Data' form (the same one as above), there is one column with ten rows (Name, Surname, etc).

    I thought the display would look more attractive if I have five columns across the page - in each column there would be two rows - there are ten form fields all together).

    Steve

  • #4
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Your CSS syntax is incorrect, it should be

    Code:
    #form1 (or div#form1)
    {
    margin-top:20px;
    }
    So instead of this:

    ---------- (1x10)

    each RECORD would look like this:
    -----
    ----- (2x5)
    so that every OTHER row would have a NEW record? How would you label the information? Would you repeat row headers for each row?
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #5
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello whizard

    I have tried
    Code:
    div#form1
    {
    margin-top:20px;
    }
    and
    Code:
    #form1
    {
    margin-top:20px;
    }
    in my CSS with <div id="form1"> in my HTML and the form and data input fields are joined together still like inseparable twins!

    That is the code that you meant, isn't it?

    The rows would look like this:

    Field 1 Field 2 Field 3 Field 4 Field 5
    Field 6 Field 7 Field 8 Field 9 Field 10

    Steve

  • #6
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    The form is 20px lower than the table in FF....you may want it farther than 20px.

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #7
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    As far as the table goes, through an extra </tr><tr> in after the fifth cell.
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #8
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello whizard

    Thank you for the tip about the <tr> after the fifth cell. I'll look into it tomorrow (1.45am here).

    Regarding the top-margin, I set it to 300px just to see if it worked (please see screenshots).

    I will investigate it further tomorrow.

    Thank you for all your time and patience.

    Much appreciated.

    Steve
    Attached Thumbnails Attached Thumbnails Repositioning form-chrome.jpg   Repositioning form-ie_10.jpg   Repositioning form-safari.jpg  

  • #9
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    I wouldn't do that. Your form practically cries out to be put in a modal window which pops up in the dead center of the page when someone clicks an 'Add your data' button. Then you won't have to worry about placement. Here's some modal window code I wrote, steal it an use it.

    http://www.myphotowizard.net/Example...mon/index.html
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.


  •  

    Posting Permissions

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