|
| |
|
|
Mehdi
Posts: 32
Joined: 8/1/2007
Status: offline
 |
Contact Form from Table to CSS? - 8/2/2007 21:54:11
I wanted to line-up the options as shown here :
http://seodesign.eu/seo.html
So I put everything in a table which of course means the page isn't valid. I want this in css. What do I need to look at to align the text in the same way it is aligned in the table?
<div id="content2">
<table border="0" cellpadding="0" style="border-collapse: collapse" width="100%" id="table1">
<tr>
<td><tr></td></tr>
<tr>
<td><form method="POST" action="email.php"></td></tr>
<td><span class="style1">Name :</span></td>
<td width="674"> <input type="text" name="T1" size="20" /></td>
<tbody>
</tbody>
<tbody>
</tbody>
<tbody>
<tr>
<td class="style1">e-mail :</td>
<td width="674">
<input type="textbox" name="email" /></td>
</tr>
</tbody>
<tbody>
</tbody>
<tbody>
</tbody>
<tbody>
<tr>
<td class="style1">Subject :</td>
<td width="674">
<input type="textbox" name="subject" /></td>
</tr>
</tbody>
<tbody>
</tbody>
<tbody>
</tbody>
<tbody>
<tr>
<td valign="top" class="style1">Message :</td>
<td width="674">
<textarea name="content" rows="10" cols="60"></textarea>
<input type="submit" name="submit" value="Submit" />
<input type="reset" value="Reset" name="B2" /></td>
</tr>
</tbody>
<td> </td>
<td width="674">
<br />
<p><strong>e-mail :</strong> <a class="style2" href="mailto:sales@******.eu">
<span style="text-decoration: none">sales@******.eu</span></a> <strong>Telephone :</strong> *****
******</p>
</td>
<tr>
<td></tr></td></tr>
<tr>
<td></td></td></tr>
<tr>
<td></tr></td></tr>
</table>
</body>
</div>
<div id="footer">
<div align="center" class="style5">© Copyright 2007 seodesign.eu</div>
</div>
</html>
|
|
|
|
Tailslide
Posts: 6295
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Contact Form from Table to CSS? - 8/3/2007 3:24:01
Putting a form in a table won't necessarily mean that it's invalid - it's more a case of your coding being incorrect while using that table.
However, since a form isn't strictly tabular data it doesn't actually belong in a form so you're right to use CSS instead (in my opinion).
I tend to just have the input on the next line under the text like this:
<label for="name">Name: <br />
<input type="text" name="name" id="name" /></label>
(note the use of labels to make the form more accessible).
However, if you want the inputs to be on the same line as the text as per your example then there's a great tutorial here: http://www.sitepoint.com/article/fancy-form-design-css/
Note that there are different techniques as far as where to put the closing tag of the label - I put it after the input, some people put it after the label text itself - it's called implicit/explicit labelling. Neither is wrong, it's a matter of preference and the accessibility experts I've spoken to seem to prefer the labels being around the input too.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Mehdi
Posts: 32
Joined: 8/1/2007
Status: offline
|
RE: Contact Form from Table to CSS? - 8/6/2007 13:39:37
http://seodesign.eu/seo2.html
I've added the following to the css :
label
{
width: 6em;
float: left;
text-align: left;
margin-right: 0.5em;
display: block
}
.submit input
{
margin-left: 6.7em;
}
and this is the HTML :
<form method="POST" action="email.php">
<p><label for="name">Name</label>
<input type="text" id="name" /></p>
<p><label for="e-mail">e-mail</label>
<input type="text" id="e-mail" /></p>
<p><label for="Message">message</label>
<input type="text" </p>
<p class="submit"><input type="submit" value="Submit" /></p>
</form>
How do I increase the width and height of the message box? I believe it's something to do with the <textarea> command but can't figure out how to use it and do I need to add it to the css or html?
| |
|
|
|
Tailslide
Posts: 6295
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Contact Form from Table to CSS? - 8/6/2007 13:43:28
For the textarea (message box) you need to use the textarea tag not an input tag - should be like this:
<textarea title="Write your message here" name="message" id="message" cols="31" rows="6"></textarea>
You can obviously change the cols and rows and you can control the size of the textarea via the stylesheet
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Mehdi
Posts: 32
Joined: 8/1/2007
Status: offline
|
RE: Contact Form from Table to CSS? - 8/6/2007 17:47:29
Sorry to be a pain but after changing from tables to css the form no longer works. It sends to one e-mail address of the two listed and the subject and message are empty.
Also I'm getting this validation error :
Line 220, Column 90: document type does not allow element "textarea" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.
…ge" id="message" cols="60" rows="10">
Do I need to make any changes to the PHP or is the problem with the HTML?
<form method="post" action="email.php">
<p><label for="name">Name</label>
<input type="text" id="name" /></p>
<p><label for="email">email</label>
<input type="text" id="email" /></p>
<p><label for="subject">Subject</label>
<input type="text" id="subject" /></p>
<textarea title="Write your message here" name="message" id="message" cols="60" rows="10">
</textarea>
<p class="submit"><input type="submit" value="Submit" /></p>
</form>
Here's the PHP :
<?php
$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=iso-8859-1\r\n";
$headers .= "From: webmaster@example.com\r\n";
$headers .= "Reply-To: webmaster@example.com\r\n";
$headers .= "X-Mailer: PHP/" . phpversion();
//CHANGE ME!
$to = 'testing@testing.com, sales@testing.eu'; //Email address the comment will
$fromn = $_POST['name'];
$frome = $_POST['email'];
$subject = $_POST['subject'];
$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=iso-8859-1\r\n";
$headers .= "From: $fromn <$frome>\r\n";
$headers .= "Reply-To: $fromme\r\n";
$headers .= "X-Mailer: PHP/" . phpversion();
$content = str_replace("\n.", "\n..", $_POST['content']);
$content = "From $fromn :: $frome \n \n" . $content;
mail("".$to."", $subject, $content, $headers);
?>
Thank you. We will contact you shortly.
| |
|
|
|
Tailslide
Posts: 6295
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Contact Form from Table to CSS? - 8/7/2007 3:08:23
The form validation issues are because you've got form inputs just floating around. You need to follow the example in the link I gave - you're missing Fieldset and legend tags. The fieldset tag groups the inputs so that you don't have to use paragraph tags as you've been doing in your example. If you absolutely don't want to include the fieldset then you should at least include a div around the form inputs (just inside the form tags).
I'd suggest really reading through the link I gave you - there are some excellent examples of what you should be doing there.
Far as the PHP goes - you'd probably be better asking in the Database area but I think it's because you've left off the name attribute within the input tags - it should be <input type="text" name="whatever" id="whatever" /> The id is the way you style the input and we are still allowed to use the name attribute on form inputs (one of the few we are still allowed to use it in) for scripts to understand.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Mehdi
Posts: 32
Joined: 8/1/2007
Status: offline
|
RE: Contact Form from Table to CSS? - 8/7/2007 12:43:59
quote:
ORIGINAL: Tailslide
The form validation issues are because you've got form inputs just floating around. You need to follow the example in the link I gave - you're missing Fieldset and legend tags. The fieldset tag groups the inputs so that you don't have to use paragraph tags as you've been doing in your example. If you absolutely don't want to include the fieldset then you should at least include a div around the form inputs (just inside the form tags).
Thanks that did the trick.
quote:
I'd suggest really reading through the link I gave you - there are some excellent examples of what you should be doing there.
That's not what I'm looking for. I don't need a fancy form so the Fieldset and legends tags are not necessary.
quote:
Far as the PHP goes - you'd probably be better asking in the Database area but I think it's because you've left off the name attribute within the input tags - it should be <input type="text" name="whatever" id="whatever" /> The id is the way you style the input and we are still allowed to use the name attribute on form inputs (one of the few we are still allowed to use it in) for scripts to understand.
Thanks I'll post in the db area.
| |
|
|
|
Tailslide
Posts: 6295
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Contact Form from Table to CSS? - 8/7/2007 12:47:48
quote:
ORIGINAL: Mehdi
That's not what I'm looking for. I don't need a fancy form and I don't want to use Fieldset and legends tags, they're not necessary.
Fieldset should be used (although you can get away with a div) to ensure validation. You don't need to be able to see it but it's technically part of a form.
Those examples weren't fancy - very simple layouts and pretty much exactly what you were looking for. It certainly would have been worth at least a brief look - but *shrug*.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Mehdi
Posts: 32
Joined: 8/1/2007
Status: offline
|
RE: Contact Form from Table to CSS? - 8/7/2007 21:27:07
I've got it working now and it validates! But there's one final problem, the footer/container tag. There should be a bottom border above the copyright notice but it's not displaying on the page in which I've added the form but displays fine on the homepage. I've tried playing around with the positioning of the tags but it doesn't seem to work. Here's the css :
* {
margin: 0;
padding: 0;
}
label {
width: 4em;
float: left;
text-align: left;
margin-right: 0.5em;
display: block
}
body {
background-color: #eee;
color: #2d2d2d;
font-family: Trebuchet MS, Arial, sans-serif;
font-size: 16px;
line-height: 19px;
}
a {
color: #000000;
}
a:hover {
text-decoration: none;
}
h1 {
font-size: 16px;
color: #000000;
font-weight: normal;
margin-bottom: 8px;
background-image: url(images/page.jpg);
background-repeat: no-repeat;
padding-left: 22px;
}
p {
font-size: 16px;
margin-bottom: 8px;
}
td img {
float: right;
}
#container {
background-color: #fff;
width: 777px;
padding: 30px;
margin: 30px auto 30px auto;
border: 1px solid #999999;
border-bottom: 1px solid #999;
}
#banner {
width: 410px;
height: 60px;
background-image: url(images/logolarge.gif);
margin: 0 auto 10px auto;
}
#header {
margin-top: 30px;
margin-bottom: 24px;
}
#header a {
margin-right: 25px;
color: #2b2b2b;
text-decoration: none;
position: relative; top: -9px; left: 8px;
}
#header a:hover {
text-decoration: underline;
}
#content {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #999;
width: 760px;
}
#content2 {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #999;
width: 760px;
}
#footer {
color: #626262;
margin-top: 20px;
}
#footer p {
font-size: 12px;
height:10px;
width: 240px;
margin-left:auto;
margin-right:auto;
}
And html :
<form method="post" action="email.php">
<div>
<p><label for="name">Name</label> <input type="text" name="name" id="name" /></p>
<p><label for="email">e-mail</label> <input type="text" name="email" id="email" /></p>
<p><label for="subject">Subject</label> <input type="text" name="subject" id="subject" /></p>
<textarea title="Enter your message here" name="message" id="message" cols="60" rows="10">
</textarea>
<p class="submit"> <input type="submit" value="Submit" />
</p>
</div>
</form>
<!-- end content -->
<div id="footer">
<p>© Copyright 2007 seodesign.eu</p>
</div>
<!-- end footer -->
<!-- end container -->
</div>
</body>
</html>
Shouldn't the border display when the container tag is closed?
http://seodesign.eu/newseo.html
| |
|
|
|
Tailslide
Posts: 6295
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: Contact Form from Table to CSS? - 8/8/2007 3:21:33
If you want a border above the footer then put it on the footer itself not the container (which encloses the footer and would in theory show the border beneath the footer).
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Mehdi
Posts: 32
Joined: 8/1/2007
Status: offline
|
RE: Contact Form from Table to CSS? - 8/11/2007 12:43:30
Thanks for that and all your help.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
