3 Replies Latest reply: May 6, 2012 1:47 PM by BcSurvivor08 RSS

    Form with CSS

    BcSurvivor08

      Good news is this is my LAST page for this website!!!!!!!!!!!!!!!  I'm trying to display a contact form with css and it's almost 100% the way I want it to look, but I need help with the last few tweaks.

       

      Here is the form page:  http://www.healthquestpt.com/hpc/contact.html

       

      1 - I want the distance between the liness to be closer together

       

      2 - I want state and zip code to be on the same line

       

      3 - I want a 1px border around the input boxes (it's coded - just not showing up....)

       

      4 - I want the textarea box to be as wide as the other fields

       

      Here is the css code I used:

       

      label {
      width: 5em;
      float:left;
      text-align:right;
      margin-right: 1.5em;
      font-family:Arial, Helvetica, sans-serif;
      font-size: 12px;
      }

      input
      {
      color: #000;
      background: #ffffff;
      border: 1px #1e1e1e;
      }

      .submit input
      {
      color: #000;
      border: 1px #1e1e1e;
      margin-left: 1em;
      }

      legend
      {
      color: #000;
      background: #cccccc;
      padding: 2px 4px;
      font-family:Arial, Helvetica, sans-serif;
      font-size:13px;
      line-height: 3em;
      }

       

      p

      {

        margin-top: 0; 

      padding-right: 10px;

      padding-left: 10px;

      }

       

       

      Again thanks for your help

        • 1. Re: Form with CSS
          codeDawg Community Member

          2 - I want state and zip code to be on the same line

          You are using paragraphs to separate your "lines" in your form.

          (You should probably change these to divs or spans.)

          Move your "Zip Code" code into the same <p> that contains your "State" code.

           

          3 - I want a 1px border around the input boxes (it's coded - just not showing up....)

          input

          {

          color: #000;

          background: #ffffff;

          border: 1px solid #1e1e1e;

          }

           

          4 - I want the textarea box to be as wide as the other fields

          Adjust the cols="25" to your desired width

          • 2. Re: Form with CSS
            codeDawg Community Member

            I see you've changed your <p>'s to <div>'s ... good!

             

            1 - I want the distance between the liness to be closer together

            Now you can adjust your spacing "between lines" by adjusting the CSS (margins and paddings) for those divs.

            • 3. Re: Form with CSS
              BcSurvivor08 Community Member

              I just used <br /> and that worked very nicely.  Now if I can get the form to work....................