PDA

View Full Version : Problem aligning Table



Ozzy
Apr 30th, 2010, 10:41 PM
Hey guys,
I've got a problem with my table, What I am trying to do is align it to the middle of the page but I can't seem to do it and I'm not sure where I have gone wrong with my coding.
Here is my code:
HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="client_validation.js" />
</script>
<link rel="stylesheet" type="text/css" href="Client_validation.css" />
<title> Client Validation </title>
</head>

<body>
<div id="main">

<div id="top_bar">
<div class="container">
<p id="login">Welcome, Guest <a href="#">Login</a> <a href="#">Sign Up</a></p>
<p id="subscribe"> Stay Updated: <a href="#">Subscribe via RSS</a> <a href="#">Email Updates</a></p>
</div><!-- end bar container -->
</div><!-- end top bar -->

<div id="header">

<div id="branding" class="container">
<h1>The Finest Toy<br /> Store Online</h1>
<p class="desc">If you're looking for a toy shop then look no further.<br/> Go on, treat the kids with our
huge selection of<br/>online toy shops selling
toys for all ages.</p>
</div><!-- end branding -->

<div id="navigation">
<ul id="menu" class="container">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">Online Store</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div><!-- end navigation -->

</div><!-- end header -->

<form name="contact_form" method="post" action="submit" onsubmit="return validate_form ( );">
<div id="form">
<form action="" method="post" id="feedback">
<fieldset>
<legend> <h3><strong>Your Contact Details</strong></h3></legend>

<p>
<label for="author">First Name:<em class="required"> (required)</em></label>
<input type="text" name="fname">
</p>
<p>
<label for="author">Last Name:<em class="required"> (required)</em></label>
<input type="text" name="lname">
</p>
<p>
<label for="author">Email:<em class="required"> (required)</em></label>
<input type="text" id="email" name="email">
</p>
<p>
<label for="author">Phone<em class="required"> (required)</em></label>
<input type="text" name="phonenum">
</p>
<p>
<label for="author">Address:<em class="required"> (required)</em></label>
<textarea cols="40" rows="5" name="addy"></textarea>
</p>
</fieldset>

<fieldset>
<legend>Do you have Comments?</legend>
<p>
<label for="comment">Comment:</label>
<textarea cols="50" rows="5" name="comment" id="comment"></textarea>
</p>
</fieldset>

<fieldset>
<legend>Terms and Conditions</legend>
<p>
<label for="author">Do you agree to the Terms and Conditions?:<em class="required"> (required)</em></label>
<input type="checkbox" name="cbox" value="Yes"> Yes
</p>
</fieldset>

<p>

<p><input type="submit" class="button2" name="send" value="Send Details"></p>
</form>

<div id="footer">
<div class="container">
<p><span class="footer">Copyright 2010 (Client Validation). Content and Header Osman Akram |<a href="#header">Back to top</a></span></p>
</div><!--end footer container-->
<div class="container">
</div><!--end footer container-->
</div><!--end footer-->
</body>
</html>



CSS

/*Turns off browser default margins and padding on all elements*/

* {
margin: 0;
padding: 0;
}

/*Use em measurements for an accessible, resizable web form*/

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333;
background-image:
}

/*Defines the container div for the form elements*/

#form {
width: 40em;
margin: 1em 0 0 1em;
background-color: #FFF;
padding: 0.1em 1.5em 1em 1.5em;
}

/*Form elements grouped and styled as related blocks of data*/

fieldset {
margin: 0.3em 0 0.2em 0;
padding: 0.3em;
border: 1px solid #174b87;
}

fieldset p {
margin: 1em;
padding: 1.5em;
border: 1px solid #0c3a76;
background-color: #CCC;
}

/*Heading for a fieldset*/

legend {
font-weight: bold;
color: #0c3a76;
}

/*Displays the label above the element*/

label {
display: block;
cursor: pointer;
}

/*Width setting for all input elements...*/

input {
width: 20em;
}

/*Distinctive style to show what user data is required*/

.required {
font-size: 0.8em;
color: #0c3a76;
}

/*Styles for a '3D' rollover button*/

.button2 {
float: right;
font-size: 1em;
font-weight: bold;
color: #FFF;
background-color: #0c3a76;

}
/*end css style for table*/
.container {
width: 900px;
margin: 0 auto;
}

#top_bar {
overflow: hidden;
background: #08413c url(images/bar_slice.jpg) top repeat-x;
padding: 23px 0;
border-bottom: 1px solid #b6b6b6;
}

p#login {
float: left;
width: 40%;
}

p#subscribe {
float: right;
width: 60%;
text-align: right;
}

#top_bar p {
font-size: 1.2em;
color: #000000;
}

#top_bar a {
font-size: 0.8em;
color: #1E90FF;
}
#header {
background: url(images/header_slice.jpg) top repeat-x;
}
#branding {
margin-bottom: 130px;
position: relative;
}

h1 {
font-family: "Myriad Pro", arial, sans-serif;
color: #fff;
font-weight: normal;
font-size: 2em;
padding-top: 10px;

}

p.desc {
font-family: "Myriad Pro", arial, sans-serif;
color: #fff;
font-size: 18px;
position: absolute;
top: 125%;
left: -5px;
}

#navigation {
background: #8ec196 url(images/nav_slice.jpg) top repeat-x;
overflow: hidden;
border-top: 3px solid #b6b6b6;
}

ul#menu {
list-style: none;
}

ul#menu li {
float: left;
padding-top: 11px;
padding-bottom: 11px;
padding-right: 45px;
}
#footer {
width: 92em;
background: #093b2b url(images/footer_slice.jpg) top repeat-x;
padding-top: 20px;
padding-bottom:60px;
margin-top: 40px;
color: #000;
}




Sorry if the answer is really obvious, but I would appreciate any help.
Thanks

SB65
Apr 30th, 2010, 11:29 PM
Your css wants something like:


#form {
background-color:#FFFFFF;
margin:1em auto 0;
padding:0.1em 1.5em 1em;
width:40em;
}

but you're missing a closing </div> as well, after your "Send details" button.

Ozzy
May 1st, 2010, 11:48 AM
Thank you it works perfectly now :D