Reply
Form Positioning useing tables and CSS
Old 08-04-2007, 10:12 PM Form Positioning useing tables and CSS
Skilled Talker

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.
Bouzy is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
Old 08-04-2007, 11:56 PM Re: Form Positioning useing tables and CSS
ADAM Web Design's Avatar
Canadastaninianite

Posts: 5,945
Name: Adam for web page design, not program
Location: Toronto, Ontario, Canada
Code:
</tabel>
You're suffering from a slight bit of lysdexia there.
It's...
Code:
</table>
See what happens once you change that.
ADAM Web Design is offline
Reply With Quote
View Public Profile Visit ADAM Web Design's homepage!
 
Old 08-05-2007, 09:28 AM Re: Form Positioning useing tables and CSS
Skilled Talker

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..
  1. 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>").
  2. Line 187, Column 1: unclosed start-tag requires SHORTTAG YES. <?php if (isset($missing)) {
  3. 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 ">".
  4. Line 186, Column 1: start tag was here. <input name="name" id="name" type="text" class="formbox"
  5. Line 196, Column 1: unclosed start-tag requires SHORTTAG YES. <?php if (isset($missing)) {
  6. 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 ">".
  7. Line 195, Column 1: start tag was here. <input name="budget" id="budget" type="text" class="formbox"
  8. Line 208, Column 1: unclosed start-tag requires SHORTTAG YES. <?php if (isset($missing)) {
  9. 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 ">".
  10. Line 207, Column 1: start tag was here. <input name="email" id="email" type="text" class="formbox"
  11. 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.
  12. Line 216, Column 2: unclosed start-tag requires SHORTTAG YES. <?php
  13. 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 ">".
  14. Line 215, Column 2: start tag was here. <input name="quote" type="radio" value="Yes" id="Free Quote"
  15. Line 224, Column 2: unclosed start-tag requires SHORTTAG YES. <?php
  16. 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 ">".
  17. Line 223, Column 2: start tag was here. <input name="quote" type="radio" value="No" id="subscribe-no"
  18. 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>").
  19. 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>").
  20. 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>").
  21. 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.
  22. 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.
  23. Line 187, Column > 80: XML Parsing Error: error parsing attribute name. <?php if (isset($missing)) {…
  24. Line 187, Column 1: XML Parsing Error: attributes construct error. <?php if (isset($missing)) {
  25. Line 187, Column 1: XML Parsing Error: Couldn't find end of Start Tag input line 186. <?php if (isset($missing)) {
  26. Line 196, Column 1: XML Parsing Error: error parsing attribute name. <?php if (isset($missing)) {
  27. Line 196, Column 1: XML Parsing Error: attributes construct error. <?php if (isset($missing)) {
  28. Line 196, Column 1: XML Parsing Error: Couldn't find end of Start Tag input line 195. <?php if (isset($missing)) {
  29. Line 208, Column 1: XML Parsing Error: error parsing attribute name. <?php if (isset($missing)) {
  30. Line 208, Column 1: XML Parsing Error: attributes construct error. <?php if (isset($missing)) {
  31. Line 208, Column 1: XML Parsing Error: Couldn't find end of Start Tag input line 207. <?php if (isset($missing)) {
  32. Line 216, Column 1: XML Parsing Error: error parsing attribute name. <?php
  33. Line 216, Column 2: XML Parsing Error: attributes construct error. <?php
  34. Line 216, Column 2: XML Parsing Error: Couldn't find end of Start Tag input line 215. <?php
  35. Line 224, Column 2: XML Parsing Error: error parsing attribute name. <?php
  36. Line 224, Column 2: XML Parsing Error: attributes construct error. <?php
  37. 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.
Bouzy is offline
Reply With Quote
View Public Profile
 
Old 08-05-2007, 09:32 AM Re: Form Positioning useing tables and CSS
Skilled Talker

Posts: 89
Please note also in my first post i fixed the first link to the screenshot.
Bouzy is offline
Reply With Quote
View Public Profile
 
Old 08-05-2007, 10:20 AM Re: Form Positioning useing tables and CSS
ADAM Web Design's Avatar
Canadastaninianite

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.
ADAM Web Design is offline
Reply With Quote
View Public Profile Visit ADAM Web Design's homepage!
 
Reply     « Reply to Form Positioning useing tables and CSS
 

Thread Tools

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

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.20270 seconds with 12 queries