SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Addict madproject.com's Avatar
    Join Date
    Jan 2003
    Location
    Ottawa, Canada
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Forms layout.

    Anybody know how or have a link with info on using CSS to format the layout of a form.

    So for example that the Description lines up with the input area.

    Username |_______________|
    Password |_______________|

    I use to do it with tables but I need to redo it in CSS.

    Peace.

  2. #2
    Sidewalking anode's Avatar
    Join Date
    Mar 2001
    Location
    Philadelphia, US
    Posts
    2,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There was a good discussion about this yesterday:
    http://www.sitepointforums.com/showt...ight=css+forms

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

    Re: CSS Forms layout.

    Originally posted by madproject.com
    Anybody know how or have a link with info on using CSS to format the layout of a form.

    So for example that the Description lines up with the input area.

    Username |_______________|
    Password |_______________|

    I use to do it with tables but I need to redo it in CSS.

    Peace.
    http://www.alistapart.com/stories/practicalcss/

  4. #4
    SitePoint Addict madproject.com's Avatar
    Join Date
    Jan 2003
    Location
    Ottawa, Canada
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HELP

    I'm trying to get the picture blood.gif to align under the input field which are transparent. I'm having problems managing the z-index.
    Here's the code

    <style type=text/css>
    #box {
    background-image: url(images/blood.gif);
    height: 120px;
    width: 208px;
    position: absolute;
    top: 30%;
    left: 50%;
    z-index: 2;
    }

    div.row {
    clear: both;
    padding-top: 10px;
    }

    div.row span.label {
    float: left;
    width: 100px;
    text-align: right;
    }

    div.row span.formw {
    float: right;
    width: 200px;
    text-align: left;
    }

    input.fix {background-color: #FFFFFF; border: black 1px dashed; filter: alpha(opacity=70, style=0);}
    input.sub {background-color: #FFFFFF; border: black 1px solid; width: 50px;}

    </style>
    </head>
    <body bgcolor="#eeeeee">

    <center>
    <div style="width: 315px; margin: 0px auto;">
    <div id="box"></div>
    <form method="post" action="/PHPtests/management.php">
    <div class="row">
    <span class="label"><font color="#FF0000">*</font>Username/span>
    <span class="formw"><input class="fix" type="Text" name="username" size="20" /></span>
    </div>

    <div class="row">
    <span class="label"><font color="#FF0000">*</font>Password/span>
    <span class="formw"><input class="fix" type="password" name="password" size="20" /></span>
    </div>

    <div class="row">
    <span class="label"><font color="#FF0000">*</font>Re.Enter/span>
    <span class="formw"><input class="fix" type="password" name="reenter" size="20" /></span>
    </div>

    <div class="row">
    <span class="label">First name/span>
    <span class="formw"><input class="fix" type="text" name="first" size="20" /></span>
    </div>

    <div class="row">
    <span class="label">Last name/span>
    <span class="formw"><input class="fix" type="text" name="last" size="20" /></span>
    </div>

    <div class="row">
    <span class="label"><font color="#FF0000">*</font>Age/span>
    <span class="formw"><input class="fix" type="text" name="age" size="20" /></span>
    </div>
    </div>


    <center><input class="sub" type="Submit" name="submit" value="Join"></center>
    </form>

    </center>

    Link: http://www.madproject.com/PHPtests/m...php?register=1

  5. #5
    Sidewalking anode's Avatar
    Join Date
    Mar 2001
    Location
    Philadelphia, US
    Posts
    2,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your form isn't enclosed in the "box" <div>; you've closed it right before the form tag. Or am I missing something?

  6. #6
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,121
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I read it the same.

    <div id="box"></div>

    Should just be:

    <div id="box">
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  7. #7
    Sidewalking anode's Avatar
    Join Date
    Mar 2001
    Location
    Philadelphia, US
    Posts
    2,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With a closing </div> after the form, of course.

  8. #8
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,121
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Of course

    I counted wrong actually and thought it was already there
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  9. #9
    SitePoint Addict madproject.com's Avatar
    Join Date
    Jan 2003
    Location
    Ottawa, Canada
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  10. #10
    Sidewalking anode's Avatar
    Join Date
    Mar 2001
    Location
    Philadelphia, US
    Posts
    2,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The background works fine for me in Chimera. The positioning is um..unusual, but the image is behind the inputs. You've left the submit button out of your <div> though.

  11. #11
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    works for me as well (IE5.5SP2 and phoenix 0.5). however, under phoenix the bloodstain isn't repeated, and only appears once...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  12. #12
    SitePoint Wizard
    Join Date
    Oct 2001
    Posts
    2,686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And me. Mozilla 1.0.1. The background image appears once.

    -Helge

  13. #13
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,811
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Not quite on topic, but at the age, because of the size of the input, I typed:

    "twenty two".

    A clear lie

    The "please enter a valid age" thing really wasn't too useful...22 too old, too young? etc etc..

    Perhaps reducing the textbox would stop any potential problems in their tracks? (as well as specifying numeric in the error message?)
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  14. #14
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,811
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oooh, btw.

    Opera 7. Layout it very odd, but blood everywhere :P
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  15. #15
    SitePoint Addict madproject.com's Avatar
    Join Date
    Jan 2003
    Location
    Ottawa, Canada
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Details.

    Hehe, let me do some clarifications.

    The layout should be side by side

    Username |__________________|
    Password |__________________|
    Reenter |__________________|

    And the blood stain should appear just once behind the whole form.


    As for the age thing... The name of the field was wrong so the database wasn't getting any age.

    Thanks!!

  16. #16
    SitePoint Addict madproject.com's Avatar
    Join Date
    Jan 2003
    Location
    Ottawa, Canada
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Got it!

    Check it out.
    http://www.madproject.com/PHPtests/m...php?register=1

    It doesn't look very aligned there but in the frame it is.
    Last edited by madproject.com; Feb 13, 2003 at 07:50.


Bookmarks

Posting Permissions

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