CSS help with formating form [Archive]

Walla450

07-31-2008, 07:18 PM

I have to use XHTML and CSS to create a form that almost looks like a table. I know how to do the XHTML part and create the input, labels, etc., but I don't know how to format it with CSS. I've only done limited CSS. I need it to kind of look like this:
http://www.designshack.co.uk/postimages/forms_css_4.jpg

I don't need the color or rounded corners or anything. I just need to know how to get the table-like format with the lines dividing each section and the vertical line between "name," "e-mail," etc. from the input boxes.

ninnypants

07-31-2008, 07:35 PM

I would put each label and input set into a div. That way they will line up how you want, and each set will be on a different line. Then it's just a matter of adding margin, padding, etc... And for the borders I would add either a span or a div around each element of the form, and give those divs some padding,and a '1px' border

jcdevelopment

07-31-2008, 07:40 PM

here is a very simplified way, but you cn see what and how

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style class="text/css">

* {
margin:0px;
padding:0px;
font-family:Arial, sans-serif;
font-size:13px;
color:#333333;
}

.container {
width:400px;
background-color:#0099FF;
margin:10px auto;
text-align:center;
}

.basic {
display:block;
text-align:center;
}

.formHoldersL {
display:block;
width:188px;
float:left;
text-align:right;
padding:5px;
border-right:1px solid #FFFFFF;
}
.formHoldersR {
display:block;
width:188px;
float:left;
text-align:left;
padding:5px;
}

</style>
</head>

<body>

<div class="container">

<div class="basic">Contact Form</div>
<div class="formHoldersL">Name:</div>
<div class="formHoldersR"><input name="name" type="text" size="20" /></div>
<div class="formHoldersL">E-mail:</div>
<div class="formHoldersR"><input name="name" type="text" size="20" /></div>
<div class="formHoldersL">Website:</div>
<div class="formHoldersR"><input name="name" type="text" size="20" /></div>
<div class="formHoldersL">Comment:</div>
<div class="formHoldersR"><textarea name="comments" cols="22" rows="5"></textarea></div>
<div class="basic"><input name="send" type="button" value="Send" /></div>
</div>
</body>
</html>

Walla450

08-01-2008, 12:35 AM

Thanks for trying to help. I still can't use that code to make it look the way I need it to look. I need it to almost look like a table. I'm completely lost. I can't even do the XHTML elements I thought I could do anymore!

Apostropartheid

08-01-2008, 01:02 AM

here is a very simplified way, but you cn see what and how

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style class="text/css">

* {
margin:0px;
padding:0px;
font-family:Arial, sans-serif;
font-size:13px;
color:#333333;
}

.container {
width:400px;
background-color:#0099FF;
margin:10px auto;
text-align:center;
}

.basic {
display:block;
text-align:center;
}

.formHoldersL {
display:block;
width:188px;
float:left;
text-align:right;
padding:5px;
border-right:1px solid #FFFFFF;
}
.formHoldersR {
display:block;
width:188px;
float:left;
text-align:left;
padding:5px;
}

</style>
</head>

<body>

<div class="container">

<div class="basic">Contact Form</div>
<div class="formHoldersL">Name:</div>
<div class="formHoldersR"><input name="name" type="text" size="20" /></div>
<div class="formHoldersL">E-mail:</div>
<div class="formHoldersR"><input name="name" type="text" size="20" /></div>
<div class="formHoldersL">Website:</div>
<div class="formHoldersR"><input name="name" type="text" size="20" /></div>
<div class="formHoldersL">Comment:</div>
<div class="formHoldersR"><textarea name="comments" cols="22" rows="5"></textarea></div>
<div class="basic"><input name="send" type="button" value="Send" /></div>
</div>
</body>
</html>

JC, you forgot the fact it's a form someway through that =P

jcdevelopment

08-01-2008, 04:10 PM

JC, you forgot the fact it's a form someway through that =P

haha, i think i got too excited.. :p

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style class="text/css">

* {
margin:0px;
padding:0px;
font-family:Arial, sans-serif;
font-size:13px;
color:#333333;
}

.container {
width:400px;
background-color:#0099FF;
margin:10px auto;
text-align:center;
}

.basic {
display:block;
text-align:center;
}

.formHoldersL {
display:block;
width:188px;
float:left;
text-align:right;
padding:5px;
border-right:1px solid #FFFFFF;
}
.formHoldersR {
display:block;
width:188px;
float:left;
text-align:left;
padding:5px;
}

</style>
</head>

<body>

<div class="container">
<form>
<div class="basic">Contact Form</div>
<div class="formHoldersL">Name:</div>
<div class="formHoldersR"><input name="name" type="text" size="20" /></div>
<div class="formHoldersL">E-mail:</div>
<div class="formHoldersR"><input name="name" type="text" size="20" /></div>
<div class="formHoldersL">Website:</div>
<div class="formHoldersR"><input name="name" type="text" size="20" /></div>
<div class="formHoldersL">Comment:</div>
<div class="formHoldersR"><textarea name="comments" cols="22" rows="5"></textarea></div>
<div class="basic"><input name="send" type="button" value="Send" /></div>
</form>
</div>

</body>
</html>

Well, im not exactly sure how else to make it look like one without actually making it on. If you dont mind me asking, besides the images, why was that not what you were looking for?