SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    alignment issue with login form

    I'm trying to create a login page exactly same as


    There is a white space/line below the legend.
    space above the check box
    "Forgot your password" is not aligned center.

    Here is the result page


    Here is the code Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

    Any insight to achieve the result
    Last edited by ralph.m; Apr 26, 2011 at 17:16.

  2. #2
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Try adding

    Code:
    fieldset {padding:0}
    to your CSS.

    The "forgot password" text is centered, but in your image the form is a bit off center. See if the above CSS fixes it. For me, it's all centered.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. padding: 0 fixed the problem. But there is space between the chkbox and "Remember my pswd". how to fix that??

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    There are big top and bottom margins on the button:

    Code:
    .sign-btn {
      margin-bottom: 30px;
      margin-top: 20px;
    }
    Reduce those to reduce the spacing.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ralph I'm not talking about that space.. there is a horizontal space between chkbox and the phrase "Remember my username"

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Oh, thorry.

    It's the default margin on the input. You could change this

    Code:
    input[type=checkbox]{
        margin-left: -10px;
        text-align: left;
    }
    to

    Code:
    input[type=checkbox]{
        margin: 0 0 0 -10px;
        text-align: left;
    }
    or better (I think)

    Code:
    input[type=checkbox]{
        margin: 0;
        text-align: left;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Tags for this Thread

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
  •