Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 02-21-2011, 08:55 PM   PM User | #1
Barons
New Coder

 
Join Date: Feb 2011
Posts: 12
Thanks: 1
Thanked 0 Times in 0 Posts
Barons is an unknown quantity at this point
Forms: Examples of using CSS instead of tables needed.

Hello,

I've got a few forums that I'd like to rebuild with css. Currently I'm using tables on them. I'm having a lot of trouble with it because all the examples of css forms I'm finding online are breaking my page. It seems like all the ones I'm finding are built to be a page of there own and I'm trying to put all of my forums in php files and include them into my site. The main reason I've decided to rebuild them is because of a false error i'm getting in the html validation. All my forms are on their own page as you can see below.


http://www.wararmada.com/tdb/assets/php/search.php
http://www.wararmada.com/tdb/assets/php/submit.php
http://www.wararmada.com/tdb/assets/php/contact.php

I've included them into my site using php code here.

http://www.wararmada.com/tdb

The validation page isn't seeing any of the php code and its under the impression that I've used unique id's multiple times on the same page when really I haven't.

So as for the css forms. Do any of you know of some examples of forms that are standalone? I'm not a pro or anything close and its really hard for me to strip out all of the "just for looks" code in the examples I've been finding. I've already done all the styling I just need to see how the meat of the form css works.

Thanks for the help.
Barons is offline   Reply With Quote
Old 02-21-2011, 10:06 PM   PM User | #2
VIPStephan
The fat guy next door


 
VIPStephan's Avatar
 
Join Date: Jan 2006
Location: Halle (Saale), Germany
Posts: 7,613
Thanks: 5
Thanked 865 Times in 842 Posts
VIPStephan is a jewel in the roughVIPStephan is a jewel in the roughVIPStephan is a jewel in the rough
I can’t show you any sites with standalone forms ’cause I don’t know of any but I can show you a simple form I set up:

Code:
<!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>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<style type="text/css">
		input, select, textarea {vertical-align: middle;}
		form div {
			border: 1px solid red;
			clear: both;
		}
		label {
			float: left;
			clear: left;
		}
		label[for], label[htmlFor] {float: none;}
		label[for]:after, label[htmlFor]:after, form div span:after {content: ":";}
		input[type=text], textarea, form div span, select {
			display: block;
			margin-bottom: 10px;
		}
		form div span {margin-bottom: 0;}
		</style>
	</head>
	<body>
		<div id="container">
			<form action="" method="get">
				<fieldset>
					<legend>CSS Form</legend>
					<div>
						<label for="textinp">Text Input Label</label>
						<input id="textinp" type="text" />
					</div>
					<div>
						<label for="select">Select Label</label>
						<select id="select">
							<option value="">Option</option>
						</select>
					</div>
					<div>
						<span>Choose one</span>
						<label><input type="radio" name="radio" /> Yes</label>
						<label><input type="radio" name="radio" /> No</label>
					</div>
					<div>
						<label for="textarea">Textarea</label>
						<textarea id="textarea" cols="30" rows="5"></textarea>
					</div>
					<div class="submit">
						<input type="submit" value="Submit" />
					</div>
				</fieldset>
			</form>
		</div>
	</body>
</html>
Usually I’m using sections of divs to group the form control and its respective label. You can then apply CSS to your liking to move things around and whatever.
__________________
Don’t click this link!
VIPStephan is offline   Reply With Quote
Old 02-21-2011, 10:41 PM   PM User | #3
Barons
New Coder

 
Join Date: Feb 2011
Posts: 12
Thanks: 1
Thanked 0 Times in 0 Posts
Barons is an unknown quantity at this point
Thanks VIPStephan! Thats just want i needed. I'm going to play around with it and see if I can figure out how to do it on a larger scale.

Cheers!
Barons is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 08:55 AM.


Advertisement
Log in to turn off these ads.