SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with form CSS

    URL: http://tinyurl.com/2b3be44

    I am really struggling with the form you see in the left sidebar. I need the labels (Name, Email, Phone) to be on the left and the input fields on the right. I need the input fields to line up evenly along their right sides, too.

    Here's how it should look:



    I will appreciate any help.

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Your best plan is to give the labels and inputs a display:inline-block. This will allow them to sit side-by-side on the same row, and then you can set the widths of them to be the same - and you can set the width on the heading and the message box to be the sum of the label width and the input width.

  3. #3
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I completely forgot about display: inline-block. Thank you SOO much! You're a life saver!!!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Since you went the display:inline-block with the lables and input, make sure you account for fixes

    Inputs are replaced inline already and act like display:inline-block already, no worries there, however the label will need an IE6/7 hack since it's a display:block by defualt

    Target the labels via CSS (IE6 Star selector hack * html) and for IE7 (*+ html) and set the labels to display:inline

    FF2 will also need display:-moz-inline-box; set for the labels/inputs
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Addict beebs93's Avatar
    Join Date
    Jul 2010
    Location
    Vancouver, Canada
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had the same problem and got around the display:inline-block issue as follows:

    Source: http://nupper.heliohost.org/the_clay_guys/contact.php

    HTML:
    Code HTML4Strict:
    <div id="fields">
        <p>First Name:</p>
        <p>Last Name:</p>
        <p>E-Mail:</p>
        <p>Message:</p>
    <!-- End FIELDS 'div' --> </div>
     
    <div id="form">
        <form action="" method="post">
            <p><input type="text" name="fn" .../></p>
     
            <p><input type="text" name="ln" .../></p>
     
            <p><input type="text" name="e" .../></p>
     
            <p><textarea name="m" ...></p>
     
            <p><input type="hidden" name="submitted" value="TRUE" />
            <input type="submit" name="submitButton".../></p>
        </form>
    <!-- End FORM 'div' --> </div>

    And the CSS:
    Code CSS:
    #fields {
    	margin:0 1px 0 0;
    	padding:0 4px 0 0;
    	float:left;
    	line-height:1.57em;
    }
     
    #fields p, #form p {
    	margin:0 0 1px 1px;
    	padding:0 0 4px 19px;
    }
     
    input, textarea {
    	padding:3px;
    	border:none;
    	font-family:'Arial', 'Tahoma', sans-serif;
    	font-size:0.813em;
    }
     
    textarea {
    	height:110px;
    	max-height:110px;
    	width:425px;
    	max-width:425px;
    	overflow:auto;
    }
     
    #submitButton {
    	height:60px;
    	width:130px;
    	margin:0 auto 5px;
    	padding:0;
    	border:0;
    	display:block;
    	background:url('../images/send.png') no-repeat 0 0 transparent;
    	overflow:hidden;
    	text-indent:-999px;
    	font-size:0;
    	line-height:0;
    	text-align:center;
    }
     
    #submitButton:hover {
    	background:url('../images/send.png') no-repeat 0 -60px transparent;
    	cursor:pointer;
    }

    If you do decide to go the display:inline-block route make sure you follow what Ryan said vis-a-vis the fixes. Before I knew that bug I drove myself batty trying to figure it out.


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
  •