Form Positioning useing tables and CSS
08-04-2007, 10:12 PM
|
Form Positioning useing tables and CSS
|
Posts: 89
|
I have been trying to make some very basic forms. Everything I think should work once I get it on my server, but it looks like ****. I know you are supposed to use tables for an easy way to position, but I think I might also need CSS I am not sure. I know really nothing about tables. I just sort of guessed on what to do this is what I came up with.
Code:
<div id="sidebar">
<div id="texto">
<h4 class="sidebar"> Testimonies</h4>
<p>
<?php include('testmonies.php'); ?>
</p>
</div>
<h4>Links</h4>
<div id="links">
<div class="nav">
<p>
<?php
@include('includes/links.html');
?>
</p>
</div>
</div>
</div>
<div id="content">
<div id="text">
<h2>Contact</h2>
<p id="home">
<form id="feedback" method="post" action="">
<table>
<tr>
<td>
<label for="name">Name:</label>
<input name="name" id="name" type="text" class="formbox"
<?php if (isset($missing)) {
echo 'value="'.htmlentities($_POST['name']).'"';
} ?>/> *
</td>
<td>
<label for="budget">Budget:</label>
<input name="budget" id="budget" type="text" class="formbox"
<?php if (isset($missing)) {
echo 'value="'.htmlentities($_POST['budget']).'"';
} ?>/>
</td>
</tr>
<tr>
<td>
<label for="email">Email:</label>
<input name="email" id="email" type="text" class="formbox"
<?php if (isset($missing)) {
echo 'value="'.htmlentities($_POST['email']).'"';
} ?>/> *
</td>
<td>
Free quote?
<input name="quote" type="radio" value="Yes" id="Free Quote"
<?php
$OK = isset($_POST['quote']) ? true : false;
if ($OK && isset($missing) && $_POST['quote'] == 'Yes') { ?>
checked="checked"
<?php } ?>
/>
<label for="quote-yes">Yes</label>
<input name="quote" type="radio" value="No" id="subscribe-no"
<?php
if ($OK && isset($missing) && $_POST['quote'] == 'No') { ?>
checked="checked"
<?php } ?>
/>
<label for="quote-no">No</label>
</td>
</tr>
<tr>
<td>
<label for="comments">Prodject Description: *</label>
<textarea name="comments" id="comments" cols="54" rows="5"><?php
if (isset($missing)) {
echo htmlentities($_POST['comments']);
} ?></textarea>
</td>
<td>
</td>
</tr>
<tr>
<td>
<input name="send" id="send" type="submit" value="Submit" />
</td>
<td>
</td>
</tr>
</tabel>
</form>
<?php
if ($_POST && isset($missing)) {
?>
<p class="warning">Please complete all required missing item(s).</p>
<?php
}
elseif ($_POST && !$mailSent) {
?>
<p class="warning">Sorry, there was a problem sending your message. Please try later.</p>
<?php
}
elseif ($_POST && $mailSent) {
?>
<p><strong>Your message has been sent. Thank you.
</strong></p>
<?php }?>
</p>
<p id="news">
If you have questions, comments, or troubles with the form above, you can also contact me at goldfishgraphics@gmail.com.
</p>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Now I have the forms and tables built correctly I think, but I have no Idea how to make them look good in terms of padding and stuff. I need help. Could someone help me please hear is what I have so far.
http://i93.photobucket.com/albums/l7...zy/contact.jpg
hear is what my layout looks like on all the rest of my pages...
http://i93.photobucket.com/albums/l7...uzy/IEGOLD.jpg
Notice where the footter is and stuff.
Hear is my CSS also if its needed.
Code:
body {
background-color: #5f656b;
font-family: Tahoma, "Arial Unicode MS", Arial, sans-serif, serif;
font-size: .8em;
color: #eea103
}
/*July 8th 2007*/
#content {
height: 505px;
width: 518px;
background-image: url(images/content.jpg);
background-repeat: no-repeat;
margin-top: 4%;
margin-left: 27.2%;
}
#sidebar {
height: 505px;
width: 153px;
background-image: url(images/sidebar.jpg);
background-repeat: no-repeat;
margin-top: 4%;
padding-top: 3%;
padding-left: 3.5%;
margin-left: auto;
float: left;
}
#linkscss {
padding-left: .8%;
padding-right: .8%;
padding-top: 4%;
width: 105px;
}
#navigation {
margin: 0%;
padding-top: 0%;
border-width: 0px;
height: 28px;
}
#banner {
border-width: 0px;
margin: 0%;
padding: 0%;
margin-top: 0%;
height: 119px;
}
#footer {
height: 28px;
width: 712px;
background-image: url(images/footer.jpg);
background-repeat: no-repeat;
margin-top: 4.2%;
}
#container {
width: 712px;
margin: auto;
position: relative;
padding: 0%;
background-color: #3c4246;
}
#home {
width: 442px;
}
#news {
width: 442px;
}
#texto {
padding-left: .8%;
padding-right: .8%;
padding-top: 6%;
width: 105px;
}
#text {
padding-left: 5.5%;
padding-top: 5%;
padding-right: 5.5%;
}
#footer {
padding-top: .01%;
padding-left: 3%;
font-size: .7em;
}
#links {
padding: 0%;
margin: 0%;
}
#navigation {
height: 28px;
width: 712px;
background-image: url(images/navigation.jpg);
background-repeat: no-repeat;
margin-top: 0%;
}
#hvan {
margin-left: 28.5%;
padding-top: .7%;
padding-bottom: 1%;
}
h4.sidebar {
margin: 0px;
padding: 0px;
padding-top: 15%;
}
/*Should change form colors*/
#quotel {
}
.quote {
}
.name {
font-size: 14px;
background-color: #575b64;
border: 1px solid #eea103;
color: #eea103;
}
.budget {
font-size: 14px;
background-color: #575b64;
border: 1px solid #eea103;
color: #eea103;
}
.email {
font-size: 14px;
background-color: #575b64;
border: 1px solid #eea103;
color: #eea103;
}
textarea {
background-color: #575b64;
border: 1px solid #eea103;
color: #eea103;
}
input {
background-color: #575b64;
border: 1px solid #eea103;
color: #eea103
}
a:link {
color: #ef9f02;
}
a:visited {
color: #ef9f02;
}
a:hover {
color: #ae6d1b;
}
a:active {
color: #ef9f02;
}
table {
margin-left: 0px;
margin-right: 30px;
}
td, th {
padding: 0px;
margin: 0px;
}
.nav a {
color: #ef9f02;
text-decoration: none;
}
.nav a:visited {
color: #ef9f02;
text-decoration: none;
}
.nav a:hover {
color: #ae6d1b;
text-decoration: underline;
}
.nav a:active {
color: #ef9f02;
}
Last edited by Bouzy : 08-05-2007 at 09:31 AM.
|
|
|
|
08-04-2007, 11:56 PM
|
Re: Form Positioning useing tables and CSS
|
Posts: 5,945
Name: Adam for web page design, not program
Location: Toronto, Ontario, Canada
|
You're suffering from a slight bit of lysdexia there. 
It's...
See what happens once you change that.
|
|
|
|
08-05-2007, 09:28 AM
|
Re: Form Positioning useing tables and CSS
|
Posts: 89
|
good catch. However I think I found my problem (30 problems to be exact) If you try and validate my code this is what I get.. - Line 180, Column 43: document type does not allow element "form" here; missing one of "object", "ins", "del", "map" start-tag.<form id="feedback" method="post" action=""> ✉
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
- Line 187, Column 1: unclosed start-tag requires SHORTTAG YES. <?php if (isset($missing)) { ✉
- Line 187, Column 1: end tag for "input" omitted, but OMITTAG NO was specified. <?php if (isset($missing)) { ✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
-
Line 186, Column 1: start tag was here. <input name="name" id="name" type="text" class="formbox"
- Line 196, Column 1: unclosed start-tag requires SHORTTAG YES. <?php if (isset($missing)) { ✉
- Line 196, Column 1: end tag for "input" omitted, but OMITTAG NO was specified. <?php if (isset($missing)) { ✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
-
Line 195, Column 1: start tag was here. <input name="budget" id="budget" type="text" class="formbox"
- Line 208, Column 1: unclosed start-tag requires SHORTTAG YES. <?php if (isset($missing)) { ✉
- Line 208, Column 1: end tag for "input" omitted, but OMITTAG NO was specified. <?php if (isset($missing)) { ✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
-
Line 207, Column 1: start tag was here. <input name="email" id="email" type="text" class="formbox"
- Line 215, Column 55: value of attribute "id" must be a single token. <input name="quote" type="radio" value="Yes" id="FreeQuote" ✉
This attribute can not take a space-separated list of words as a value, but only one word ("token"). This may also be caused by the use of a space for the value of an attribute which does not permit it.
- Line 216, Column 2: unclosed start-tag requires SHORTTAG YES. <?php ✉
- Line 216, Column 2: end tag for "input" omitted, but OMITTAG NO was specified. <?php ✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
-
Line 215, Column 2: start tag was here. <input name="quote" type="radio" value="Yes" id="Free Quote"
- Line 224, Column 2: unclosed start-tag requires SHORTTAG YES. <?php ✉
- Line 224, Column 2: end tag for "input" omitted, but OMITTAG NO was specified. <?php ✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
-
Line 223, Column 2: start tag was here. <input name="quote" type="radio" value="No" id="subscribe-no"
- Line 264, Column 20: document type does not allow element "p" here; missing one of "object", "ins", "del", "map", "button" start-tag. <p class="warning">Please complete all required missing item(s).</p> ✉
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
- Line 269, Column 20: document type does not allow element "p" here; missing one of "object", "ins", "del", "map", "button" start-tag. <p class="warning">Sorry, there was a problem sending your message. Please try ✉
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
- Line 274, Column 4: document type does not allow element "p" here; missing one of "object", "ins", "del", "map", "button" start-tag. <p><strong>Your message has been sent. Thank you. ✉
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
-
Line 222, Column 14: reference to non-existent ID "quote-yes". <label for="quote-yes">Yes</label> ✉
This error can be triggered by:- A non-existent input, select or textarea element
- A missing id attribute
- A typographical error in the id attribute
Try to check the spelling and case of the id you are referring to.
-
Line 230, Column 14: reference to non-existent ID "quote-no". <label for="quote-no">No</label> ✉
This error can be triggered by:- A non-existent input, select or textarea element
- A missing id attribute
- A typographical error in the id attribute
Try to check the spelling and case of the id you are referring to.
- Line 187, Column > 80: XML Parsing Error: error parsing attribute name. <?php if (isset($missing)) {… ✉
-
Line 187, Column 1: XML Parsing Error: attributes construct error. <?php if (isset($missing)) { ✉
-
Line 187, Column 1: XML Parsing Error: Couldn't find end of Start Tag input line 186. <?php if (isset($missing)) { ✉
-
Line 196, Column 1: XML Parsing Error: error parsing attribute name. <?php if (isset($missing)) { ✉
-
Line 196, Column 1: XML Parsing Error: attributes construct error. <?php if (isset($missing)) { ✉
- Line 196, Column 1: XML Parsing Error: Couldn't find end of Start Tag input line 195. <?php if (isset($missing)) { ✉
- Line 208, Column 1: XML Parsing Error: error parsing attribute name. <?php if (isset($missing)) { ✉
-
Line 208, Column 1: XML Parsing Error: attributes construct error. <?php if (isset($missing)) { ✉
-
Line 208, Column 1: XML Parsing Error: Couldn't find end of Start Tag input line 207. <?php if (isset($missing)) { ✉
-
Line 216, Column 1: XML Parsing Error: error parsing attribute name. <?php ✉
-
Line 216, Column 2: XML Parsing Error: attributes construct error. <?php ✉
-
Line 216, Column 2: XML Parsing Error: Couldn't find end of Start Tag input line 215. <?php ✉
-
Line 224, Column 2: XML Parsing Error: error parsing attribute name. <?php ✉
-
Line 224, Column 2: XML Parsing Error: attributes construct error. <?php ✉
-
Line 224, Column 2: XML Parsing Error: Couldn't find end of Start Tag input line 223. <?php
I have no Idea what any of those mean. Is there like a directory somewhere that tells you what they mean? Anyway. I think my code might work better if those were fixed, but I don't really know how to fix it.
|
|
|
|
08-05-2007, 09:32 AM
|
Re: Form Positioning useing tables and CSS
|
Posts: 89
|
Please note also in my first post i fixed the first link to the screenshot.
|
|
|
|
08-05-2007, 10:20 AM
|
Re: Form Positioning useing tables and CSS
|
Posts: 5,945
Name: Adam for web page design, not program
Location: Toronto, Ontario, Canada
|
Try putting your form inside of a div inside of an unclosed paragraph tag.
Most of the rest of those are being caused by your server not processing PHP as server-side code, which implies a server configuration error of some sort.
|
|
|
|
|
« Reply to Form Positioning useing tables and CSS
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|
|