Trying to use CSS to style a form

Antwan · #1 (**permalink**) Feb 12th, 2007, 22:05

Hey everyone, having some problems here and i'm hoping you'll be able to help me out. I've been using CSS for a good while now in regards to layouts, but when it comes to forms i've always used tables. There was no reason really, i've just always done it that way. After doing my usual browsing of the forums I came across a post by ukgeoff saying that tables styling forms isn't really all that great so tonight I experimented using CSS to style them. I've had mostly success except for a few points.

What i've done is, i've floated labels to the left, and given them a set width (which is the size of the longest label, so they're all even). Alongside this, i've floated the text boxes to the left also so they all sit nicely together (and to be sure of this i've added a margin-right of ten pixels to the labels just for a nice little gap)

That was all great and everything worked splendid, but whenever it comes to putting the form inside a div and centering it, i'm having major problems. I want everything inside my test div to be centred and it's just not happening. The more I play about the more I'm messing up my code so would you guys have a look at my code and see if a) It can be better put and b) figure out this div problem

Oh and one other thing, To take a new line, what i've done is;
The label floats to the left and also clears the left. The text box floats left. Whenever I add a new label, because it's set to clear the left, it takes a new line, but the text box screws up, it doesnt clear properly so I have to manually add a <br> break in, there must be a better way of doing this surely! You'll see what I mean if you take my code and take all the line breaks out.

HTML

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Visual Reality Northern Ireland - Contact Us</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="test">
<form action="" method="post" name="Feedback-Form" id="Feedback-Form">
<label for="Name">Your Name:</label>
<input name="Name" type="text" id="Name" size="53" maxlength="40">
<br>
<label for="Email-Address">Your Email Address:</label>
<input name="Email-Address" type="text" id="Email-Address" size="53" maxlength="40">
<br>
<label for="What-Do-You-Think-Of-The-Overall-Look-And-Content-Of-This-Website">What do you think of the overall look &amp; content of this website?</label>
<select name="What-Do-You-Think-Of-The-Overall-Look-And-Content-Of-This-Website?" id="What-Do-You-Think-Of-The-Overall-Look-And-Content-Of-This-Website?">
   <option value="Poor">Poor</option>
   <option value="Average">Average</option>
   <option value="Good" selected>Good</option>
   <option value="Excellent">Excellent</option>
</select>
<br>
<label for="Suggestions">If you have any suggestions please write them in the box provided below:</label>
<br>
<textarea name="Suggestions" cols="50" rows="5" id="Suggestions"></textarea>
<br>
<label for="Other-Comments">If you have any other comments please write them below:</label>
<br>
<textarea name="Other-Comments" cols="50" rows="5" id="Other-Comments"></textarea>
<br>
<input type="reset" name="Reset" value="Reset" class="reset">
<input type="submit" name="Submit" value="Submit" class="submit">
</form>
</div>
</body>
</html>

CSS

Code: Select all

/* FORM */

#test {
background-color:#33FF33;
width: 800px;
margin: auto;
clear: left;
}

label {
clear: left;
color: #FFF;
float: left;
font-family: tahoma;
font-size: 13px;
margin-bottom: 10px;
margin-right: 10px;
padding: 5px;
width: 250px;
background-color:#CC0066;
}

input {
float:left;
font-family: tahoma;
font-size: 13px;
}

input.reset {
clear:left;
}

input.submit {
margin-left: 25px;
float: left;
}

select {
float: left;
width: 150px;
font-family: tahoma;
font-size: 13px;
}

textarea {
float: left;
font-family: tahoma;
font-size: 13px;
margin-bottom: 10px; /* This is because the margin-bottom in the label css wont work properly as the text area is taller than the label */
}

Heres the link i'm using for testing:

http://www.vrni.co.uk/form.htm

Thanks in advance guys,
Anthony

moojoo · #2 (**permalink**) Feb 13th, 2007, 01:12

http://www.newguyinennis.com/samples/simple_form.html

Antwan · #3 (**permalink**) Feb 13th, 2007, 08:11

Cheers man, yeah I pondered using paragraph tags and breaks, and in the end I did end up using breaks but only because my floating failed. Surely there must be a way of doing it by floating right? Just for pure CSS perfection

moojoo · #4 (**permalink**) Feb 13th, 2007, 14:23

There is. But that isn't covered there.

karinne · #5 (**permalink**) Feb 14th, 2007, 12:17

This works nicely

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css">
    #content {
        width: 640px;
    }
    
    /* -- Form Styling -- */
    .styled-form label {
        width: 191px;
    }
    
    .styled-form input {
        width: 396px;
    }
    
    .styled-form textarea {
        width: 388px;
    }
    
    .styled-form {
        margin: 25px 0;
    }
    
    .styled-form label {
        float: left;
        clear: left;
    }
    
    .styled-form input {
        padding: 1px;
    }
    
    .styled-form textarea {
        padding: 5px;
    }
    
    .styled-form p {
        width: 100%;
        overflow: auto;
        margin: 12px 0;
        padding: 1px 0;
    }
    
    .styled-form .send-button {
        width: 125px;
        padding: 3px 0;
        float: right;
        display: block;
    }
    
    .styled-form p input {
        width: auto;
    }
    
    .styled-form p label {
        float: left;
        display: block;
        width: auto;
        line-height: 26px;
    }
    </style>
    
</head>

<body>

<div id="content">

<form action="something.php" method="post" id="contactForm">
    <div class="styled-form">
            
        <label for="email">Email Address:</label>
        <input type="text" id="email" name="eimal"  size="40" tabindex="1" />
        
        <label for="subject">Subject:</label>
        <input type="text" id="subject" name="jectsub" size="40" tabindex="2" />
            
        <label for="messageBody">What’s on your mind?</label>
        <textarea id="messageBody" name="nidm" rows="16" cols="40" tabindex="3"></textarea>
        
        <p>
        <label><input type="checkbox" name="CCme" tabindex="4" /> Send me a copy too.</label>
        <input class="send-button" type="submit" value="Send" tabindex="5" />
        </p>
    </div>
</form>

</div>

</body>
</html>

Antwan · #6 (**permalink**) Feb 15th, 2007, 07:58

Yeah that works great thanks a lot!

I've been analysing the code and I was wondering if you could answer a question for me. At the end of your code you use a paragraph and I don't understand why and how, I've read the css and I don't understand what it's doing.

You make the paragraph's width 100% so it takes up the whole div, You give it a 12px margin top and bottom so that it is spaced out a bit, I'm not really sure what the 1px of padding is about, and I really don't know what overflow is about, i've seen the tag before but I don't know what it is and i've never had to use it!

You float the button to the right but also make it a block element so should it not be on it's own line then? The label is also block so shouldn't it also have it's own line?

I assume width:auto; just makes the size of the element match the length of it and nothing more?

Sorry if this seems amateurish questions,

Anthony

karinne · #7 (**permalink**) Feb 15th, 2007, 13:41

Quote:

Originally Posted by Antwan

You make the paragraph's width 100% so it takes up the whole div, You give it a 12px margin top and bottom so that it is spaced out a bit, I'm not really sure what the 1px of padding is about, and I really don't know what overflow is about, i've seen the tag before but I don't know what it is and i've never had to use it!

The overflow: auto is the same as using clear: both. Have you seen that before? When you have floating elements in FF you need to clear them. overflow:auto is another way to achieve the clearing.

Super simple clearing floats

Quote:

Originally Posted by Antwan

You float the button to the right but also make it a block element so should it not be on it's own line then? The label is also block so shouldn't it also have it's own line?

No because of the float. Float is ...well ... making content "float" somewhere. In this case, right of the label.

Quote:

Originally Posted by Antwan

I assume width:auto; just makes the size of the element match the length of it and nothing more?

yes

And keep asking questions. The only stupid questions are the ones that were never asked

Antwan · #8 (**permalink**) Feb 15th, 2007, 14:02

Quote:

No because of the float. Float is ...well ... making content "float" somewhere. In this case, right of the label.

Yep I know float, use it all the time but I thought that because both the elements also had Display:block in their css that they'd both be on seperate lines even despite the float!

karinne · #9 (**permalink**) Feb 15th, 2007, 14:08

no ... you can pretty much float anything.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Navigation with style	Frankiiei	Starting Out	11	Sep 27th, 2007 15:01
style	MetallicWarfare	Starting Out	12	Aug 13th, 2007 09:00
web style	littlebilly	Website Planning	7	Jul 22nd, 2007 14:58
How to tell IE7 to use a pariticular style in a single style sheet	figo2476	Web Page Design	5	May 25th, 2007 14:23
Just for style?	timmytots	Web Page Design	4	Nov 17th, 2005 21:01

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Trying to use CSS to style a form