SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Question with linebreaks.

  1. #1
    SitePoint Wizard Dylan B's Avatar
    Join Date
    Jul 2004
    Location
    NYC
    Posts
    1,150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question with linebreaks.

    I want to have a form with a layout like this:
    http://www.dylanb.com/petsite/scripts/register.php
    user: john
    pass: fancy

    Now, my problem is, I am currently just using <br>s in between each ellement. I'm pretty sure there is a better way to do it.

    Am I right?

  2. #2
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeh, you can use block level elements like P or DIV. You can also make your INPUTs [del]block level[/del] [ins]generate a block box[/ins] with CSS to "force a line break".
    Code:
    input { display:block; }
    HTML Code:
    <p>
     <label for="confirmpassword">Confirm Password:</label>
     <input id="confirmpassword" name="confirmpassword"
      maxlength="100" type="password">
    </p>
    Last edited by zcorpan; Apr 9, 2005 at 10:43.
    Simon Pieters

  3. #3
    SitePoint Wizard Dylan B's Avatar
    Join Date
    Jul 2004
    Location
    NYC
    Posts
    1,150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have it now looking like:

    Name:
    -name-

    Password:
    -password-

    So there is a line break after each label and easch input.

    How can I get the label to line break?

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can enclose each LABEL/INPUT pair in a block-level element, like a DIV. Or a FIELDSET, if that makes sense.

    You can also nest the INPUT inside the LABEL and make the LABEL generate a block box:

    HTML Code:
    <label for="user">Username: <input id="user" name="user" type="text"></label>
    Code:
    label {
      display:block;
    }
    If you want to line up the inputs, you could position the INPUT elements, but it might take some tweaking:
    Code:
    label {
      display:block;
      position:relative; /* to establish a containing block */
    }
    
    label input {
      position:absolute;
      left:8em; /* or whatever */
    }
    Birnam wood is come to Dunsinane

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
  •