Skip navigation
Currently Being Moderated

Form with CSS

May 4, 2012 4:18 PM

Tags: #cs5 #dreamweaver #css

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

 
Replies
  • Currently Being Moderated
    May 4, 2012 6:21 PM   in reply to BcSurvivor08

    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

     
    |
    Mark as:
  • Currently Being Moderated
    May 6, 2012 11:23 AM   in reply to codeDawg

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points