SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Too much space

  1. #1
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Too much space

    There is too much space between the label and fields on this form, http://www.innerpreneurworks.com/free-access/, such that the fields look like they are associated with the labels below them. What's the best way to fix this?
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  2. #2
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The form is using line breaks inappropiately i.e. to knock the input onto a new line below the label and create space between them.

    Code HTML:
    <div class="mc-field-group"><label for="mce-EMAIL" style="">Email Address <span class="asterisk">*</span>
    </label>
    <input id="mce-EMAIL" class="required email" type="email" name="EMAIL" value="" style="display: block; margin-bottom: 1em;"></div>
    <div class="mc-field-group"><label for="mce-FNAME">First Name <span class="asterisk">*</span><br>
    </label><br>
    <input id="mce-FNAME" class="required" type="text" name="FNAME" value=""></div>
    <div class="mc-field-group"><label for="mce-LNAME">Last Name <span class="asterisk">*</span><br>
    </label><br>
    <input id="mce-LNAME" class="required" type="text" name="LNAME" value=""></div>
    Remove all the <br> and use the CSS below to target the inputs on this specific form. Setting display to block puts the input on it's own line. the margin-bottom sets the space between the input and the following element (adjust to suit).

    Code CSS:
    #mc-embedded-subscribe-form input { 
        display: block; 
        margin-bottom: 1em;
        }

  3. #3
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The html is a little different from yours.
    HTML Code:
    <div class="mc-field-group"><label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
    </label>
    <input id="mce-EMAIL" class="required email" type="email" name="EMAIL" value="" /></div>
    <div class="mc-field-group"><label for="mce-FNAME">First Name <span class="asterisk">*</span>
    </label>
    <input id="mce-FNAME" class="required" type="text" name="FNAME" value="" /></div>
    <div class="mc-field-group"><label for="mce-LNAME">Last Name <span class="asterisk">*</span>
    </label>
    <input id="mce-LNAME" class="required" type="text" name="LNAME" value="" /></div>
    <div class="mc-field-group input-group">
    
    <strong>Email Format </strong>
    <ul>
        <li><input id="mce-EMAILTYPE-0" type="radio" name="EMAILTYPE" value="html" /><label for="mce-EMAILTYPE-0">html</label></li>
        <li><input id="mce-EMAILTYPE-1" type="radio" name="EMAILTYPE" value="text" /><label for="mce-EMAILTYPE-1">text</label></li>
        <li><input id="mce-EMAILTYPE-2" type="radio" name="EMAILTYPE" value="mobile" /><label for="mce-EMAILTYPE-2">mobile</label></li>
    </ul>
    </div>
    Notice that there are no <br /> tags. Please suggest how to deal with all the tags:
    HTML Code:
    <div class="mc-field-group">
    and show exactly where to adjust the HTML to add the CSS you suggest.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The form you linked to originally looks fine. You could use the same styles for this code as for the online form. What do you have for this so far?
    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."

  5. #5
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, I just installed a new form. The old one was from MailChimp. The new one is from SendPepper. I think this program will work much better.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The functionality has no bearing on the styling, though. You can use the same styles to lay out this form assuming you want the same layout.
    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."

  7. #7
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand. For now, however, I fund the SendPepper functionality much better. Plus, it's much easier to style. Thanks for your help.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by paulcj2 View Post
    I understand. For now, however, I fund the SendPepper functionality much better. Plus, it's much easier to style. Thanks for your help.
    OK, so are you OK now, or does the question still stand? I'm not sure which form is which.
    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."

  9. #9
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm OK for now. The form from SendPepper is now loaded on this page.
    http://www.innerpreneurworks.com/free-access/
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Cool. Glad you found a solution.
    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."


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
  •