Centering forms.

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I got a contacts page written correctly. Valid strict XHTML and CSS is valid. But I can't get the input fields and the textarea filled in. ANy help would be greatly appreciated.

My HTML

Code: [ Select ]
<!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>Infomania</title>
<meta name="keywords" content="information, math, social studies, studies, html, tutorials, articles, services, school, provider, games, downloads, forum, contact, infomania, other, music, about" />
<meta name="description" content="Infomania - Information on almost anything on the web." />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="/Infomania/scripts/layout.css" type="text/css" />
</head>
<body><div class="Header">
<div class="header_text">Infomania</div>
</div><div class="ContentBox">
<div class="NavigationEnclosure">
<div class="Navigation">

<div class="buttonscontainer">
<div class="buttons">
<a href="/Infomania/index.php">Home</a>
<a href="/Infomania/information.php">Information</a>
<a href="/Infomania/downloads.php">Downloads</a>
<a href="/Infomania/forum/index.php">Forum</a>
<a href="/Infomania/Other.php">Other</a>
<a href="/Infomania/Contact/index.php">Contact Info</a>
</div>
</div>
</div>

<div class="Advertisement">
Ads go here
</div>
</div><div class="Content">

<div class="heading">Header</div><br />
<div class="sub_heading">A sub header</div>
<p>Some text</p><br />
<div class="sub_heading">Contact Form</div>
<form action="/Infomania/Contact/index.php" method="post">
Your Name:<br />
<input type="text" name="name" size="84" value="" /><br />
Your Email:<br />
<input type="text" name="email" size="84" value="" /><br />
Subject:<br />
<input type="text" name="subject" size="84" value="" /><br />
Message:<br />

<p><textarea cols="63" rows="10" name="message"></textarea></p>
<p><input type="submit" name="submit" value="Send Mail" />
<input type="reset" value="Reset" /></p>
</form>
</div>
</div>
<div class="Footer">
<div class="footer_text">footer</div>
</div></body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>Infomania</title>
  5. <meta name="keywords" content="information, math, social studies, studies, html, tutorials, articles, services, school, provider, games, downloads, forum, contact, infomania, other, music, about" />
  6. <meta name="description" content="Infomania - Information on almost anything on the web." />
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  8. <link rel="stylesheet" href="/Infomania/scripts/layout.css" type="text/css" />
  9. </head>
  10. <body><div class="Header">
  11. <div class="header_text">Infomania</div>
  12. </div><div class="ContentBox">
  13. <div class="NavigationEnclosure">
  14. <div class="Navigation">
  15. <div class="buttonscontainer">
  16. <div class="buttons">
  17. <a href="/Infomania/index.php">Home</a>
  18. <a href="/Infomania/information.php">Information</a>
  19. <a href="/Infomania/downloads.php">Downloads</a>
  20. <a href="/Infomania/forum/index.php">Forum</a>
  21. <a href="/Infomania/Other.php">Other</a>
  22. <a href="/Infomania/Contact/index.php">Contact Info</a>
  23. </div>
  24. </div>
  25. </div>
  26. <div class="Advertisement">
  27. Ads go here
  28. </div>
  29. </div><div class="Content">
  30. <div class="heading">Header</div><br />
  31. <div class="sub_heading">A sub header</div>
  32. <p>Some text</p><br />
  33. <div class="sub_heading">Contact Form</div>
  34. <form action="/Infomania/Contact/index.php" method="post">
  35. Your Name:<br />
  36. <input type="text" name="name" size="84" value="" /><br />
  37. Your Email:<br />
  38. <input type="text" name="email" size="84" value="" /><br />
  39. Subject:<br />
  40. <input type="text" name="subject" size="84" value="" /><br />
  41. Message:<br />
  42. <p><textarea cols="63" rows="10" name="message"></textarea></p>
  43. <p><input type="submit" name="submit" value="Send Mail" />
  44. <input type="reset" value="Reset" /></p>
  45. </form>
  46. </div>
  47. </div>
  48. <div class="Footer">
  49. <div class="footer_text">footer</div>
  50. </div></body>
  51. </html>


My CSS (for the look of the site :) )

Code: [ Select ]
body {
background-color : #222222;
margin-top : 0;
margin-bottom : 0;
margin-left : 5%;
margin-right : 5%;
}
html {
height : 100%;
}
a {
text-decoration : none;
color : #ff0033;
}
a:visited {
color : #99cc00;
}
a:hover {
color : #009900;
}
a:active {
color : #33ccff;
}
html, body {
height : 99%;
}
p {
margin-top : 0;
}
blockquote {
background-color : #777777;
border-color : #000000;
border-style : dashed;
border-width : thin;
font-family : monospace;
font-size : 14px;
font-variant : normal;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom : 0;
margin-top : 0;
}
h1 {
font-size : 50px;
}
h2 {
font-size : 35px;
}
.Header {
background-color : #444444;
border-color : #111111;
border-style : solid;
border-width : thin;
max-width : 1027px;
margin-left : auto;
margin-right : auto;
}
.header_text {
color : #000000;
text-align : center;
font-size : 40px;
}
.ContentBox {
background-color : #444444;
border-color : #111111;
border-style : solid;
border-width : thin;
max-width : 1024px;
margin-left : auto;
margin-right : auto;
padding : 2px;
height : auto;
}
.NavigationEnclosure {
background-color : #333333;
width : 25%;
float : left;
border-color : #000000;
border-style : solid;
border-width : thin;
}
.Navigation {
background-color : #666666;
height : auto;
}
.Advertisement {
background-color : #555555;
margin-top : 2px;
}
.Content {
background-color : #999999;
border-color : #000000;
border-style : dotted;
border-width : thin;
width : 74.5%;
height : 100%;
margin-left : 260px;
}
.Footer {
background-color: #444444;
border-color: #111111;
border-style: solid;
border-width: thin;
max-width: 1027px;
margin-left: auto;
margin-right: auto;
height: 15px;
}
.footer_text {
color : #ffffff;
text-align: center;
font-size: 9px;
}
.buttonscontainer {
width : 97%;
}
.buttons a {
color: #cc0000;
border: 1px solid;
background-color: #444444;
padding: 2px;
padding-left: 3px;
font: 13px Arial, sans-serif;
font-weight: bold;
text-decoration : none;
border-color: #555555 #111111 #111111 #555555;
display: block;
margin: 0;
width: 100%;
text-align: left;
}
.buttons a:hover {
border : 1px solid;
background-color : #333333;
padding : 2px;
padding-left : 3px;
border-color : #555555 #111111 #111111 #555555;
color : #339900;
text-decoration : none;
}
.tableofcontents {
margin-left : auto;
margin-right : auto;
}
.example {
padding-left : 50px;
}
.heading {
text-align : center;
font-size : 35px;
text-decoration : underline;
}
.sub_heading {
margin-top : -20px;
margin-bottom : 10px;
text-align : center;
font-size : 25px;
color : #330066;
}
input {
background-color: #666666;
border: 0px;
color: #FFFFFF;
}
textarea {
background-color: #666666;
border: 0px;
color: #FFFFFF;
}
  1. body {
  2. background-color : #222222;
  3. margin-top : 0;
  4. margin-bottom : 0;
  5. margin-left : 5%;
  6. margin-right : 5%;
  7. }
  8. html {
  9. height : 100%;
  10. }
  11. a {
  12. text-decoration : none;
  13. color : #ff0033;
  14. }
  15. a:visited {
  16. color : #99cc00;
  17. }
  18. a:hover {
  19. color : #009900;
  20. }
  21. a:active {
  22. color : #33ccff;
  23. }
  24. html, body {
  25. height : 99%;
  26. }
  27. p {
  28. margin-top : 0;
  29. }
  30. blockquote {
  31. background-color : #777777;
  32. border-color : #000000;
  33. border-style : dashed;
  34. border-width : thin;
  35. font-family : monospace;
  36. font-size : 14px;
  37. font-variant : normal;
  38. }
  39. h1, h2, h3, h4, h5, h6 {
  40. margin-bottom : 0;
  41. margin-top : 0;
  42. }
  43. h1 {
  44. font-size : 50px;
  45. }
  46. h2 {
  47. font-size : 35px;
  48. }
  49. .Header {
  50. background-color : #444444;
  51. border-color : #111111;
  52. border-style : solid;
  53. border-width : thin;
  54. max-width : 1027px;
  55. margin-left : auto;
  56. margin-right : auto;
  57. }
  58. .header_text {
  59. color : #000000;
  60. text-align : center;
  61. font-size : 40px;
  62. }
  63. .ContentBox {
  64. background-color : #444444;
  65. border-color : #111111;
  66. border-style : solid;
  67. border-width : thin;
  68. max-width : 1024px;
  69. margin-left : auto;
  70. margin-right : auto;
  71. padding : 2px;
  72. height : auto;
  73. }
  74. .NavigationEnclosure {
  75. background-color : #333333;
  76. width : 25%;
  77. float : left;
  78. border-color : #000000;
  79. border-style : solid;
  80. border-width : thin;
  81. }
  82. .Navigation {
  83. background-color : #666666;
  84. height : auto;
  85. }
  86. .Advertisement {
  87. background-color : #555555;
  88. margin-top : 2px;
  89. }
  90. .Content {
  91. background-color : #999999;
  92. border-color : #000000;
  93. border-style : dotted;
  94. border-width : thin;
  95. width : 74.5%;
  96. height : 100%;
  97. margin-left : 260px;
  98. }
  99. .Footer {
  100. background-color: #444444;
  101. border-color: #111111;
  102. border-style: solid;
  103. border-width: thin;
  104. max-width: 1027px;
  105. margin-left: auto;
  106. margin-right: auto;
  107. height: 15px;
  108. }
  109. .footer_text {
  110. color : #ffffff;
  111. text-align: center;
  112. font-size: 9px;
  113. }
  114. .buttonscontainer {
  115. width : 97%;
  116. }
  117. .buttons a {
  118. color: #cc0000;
  119. border: 1px solid;
  120. background-color: #444444;
  121. padding: 2px;
  122. padding-left: 3px;
  123. font: 13px Arial, sans-serif;
  124. font-weight: bold;
  125. text-decoration : none;
  126. border-color: #555555 #111111 #111111 #555555;
  127. display: block;
  128. margin: 0;
  129. width: 100%;
  130. text-align: left;
  131. }
  132. .buttons a:hover {
  133. border : 1px solid;
  134. background-color : #333333;
  135. padding : 2px;
  136. padding-left : 3px;
  137. border-color : #555555 #111111 #111111 #555555;
  138. color : #339900;
  139. text-decoration : none;
  140. }
  141. .tableofcontents {
  142. margin-left : auto;
  143. margin-right : auto;
  144. }
  145. .example {
  146. padding-left : 50px;
  147. }
  148. .heading {
  149. text-align : center;
  150. font-size : 35px;
  151. text-decoration : underline;
  152. }
  153. .sub_heading {
  154. margin-top : -20px;
  155. margin-bottom : 10px;
  156. text-align : center;
  157. font-size : 25px;
  158. color : #330066;
  159. }
  160. input {
  161. background-color: #666666;
  162. border: 0px;
  163. color: #FFFFFF;
  164. }
  165. textarea {
  166. background-color: #666666;
  167. border: 0px;
  168. color: #FFFFFF;
  169. }


I tried to wrap a DIV around it with the following attributes set to it...

Code: [ Select ]
.center {
margin-left: auto;
margin-right: auto;
}
  1. .center {
  2. margin-left: auto;
  3. margin-right: auto;
  4. }


But it only works (or somewhat works) if I add the "max-width: ;" to it, but it reads the margins being the margins of the "<body>" rather than the div it's inside. Any help would be greatly appreciated.

Thanks.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I also just now learned that at resolution 800 by 600, that layout gets a tad bit messed up. Or just resize the browser, you should be able to see what I mean.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Maybe add something like this to your css:
Code: [ Select ]
div.form
{
padding-left:10%;
}
  1. div.form
  2. {
  3. padding-left:10%;
  4. }


and in the html add it like this:

Code: [ Select ]
<form action="/Infomania/Contact/index.php" method="post">
<div class='form'>
Your Name:<br />
<input type="text" name="name" size="84" value="" /><br />
Your Email:<br />
<input type="text" name="email" size="84" value="" /><br />
Subject:<br />
<input type="text" name="subject" size="84" value="" /><br />
Message:<br />
<p><textarea cols="63" rows="10" name="message"></textarea></p>
<p><input type="submit" name="submit" value="Send Mail" />
<input type="reset" value="Reset" /></p>
</div>
</form>
  1. <form action="/Infomania/Contact/index.php" method="post">
  2. <div class='form'>
  3. Your Name:<br />
  4. <input type="text" name="name" size="84" value="" /><br />
  5. Your Email:<br />
  6. <input type="text" name="email" size="84" value="" /><br />
  7. Subject:<br />
  8. <input type="text" name="subject" size="84" value="" /><br />
  9. Message:<br />
  10. <p><textarea cols="63" rows="10" name="message"></textarea></p>
  11. <p><input type="submit" name="submit" value="Send Mail" />
  12. <input type="reset" value="Reset" /></p>
  13. </div>
  14. </form>
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I want it centered no matter on what size of the browser you view. That makes the form seem to be layered, and it reads as the adge of the browser. (The real margin).

*********************************************
Also for the record...

The attributes...
Code: [ Select ]
value=""

Doesn't have anything in it because I viewed the source in it when it was already rendered by WAMP.

The content is PHP and whatever inside is
PHP Code: [ Select ]
<?php echo $_POST['subject']; ?>


So you wouldn't be wondering why those are empty :D
*********************************************

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 48 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.