03-01-2010, 04:19 PM
Hi,
I'm working on a new site and for some reason contact form isn't floating properly to the right of the image.
here's my xhtml & css
I'm working on a new site and for some reason contact form isn't floating properly to the right of the image.
here's my xhtml & css
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Contact the PAZRT- Pennsylvania Zombie Response Team</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Pennsylvania Zombie Response Team" />
<meta name="copyright" content='All Copyright Pennsylvania Zombie Response Team, all rights reserved' />
<meta name="description" content="PAZRT- Pennsylvania Zombie Response Team is an elite group of people dedicated to the preservation of the human race in the face of a looming zombie outbreak" />
<meta name="keywords" content="pazrt, zrt, pennsylvania zombie response team, pennsylvania zrt, zombies, zombie response team, guns, knives, survival" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="validation.js"></script>
</head>
<body>
<!-- This is the main div -->
<div id="wrapper">
<!-- Start logo coding -->
<div id="logo">
<img src="images/logo.png" alt="main logo" height="168px" style="width: 100%" />
</div>
<!-- Start navigation bar coding -->
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about-pennsylvania-zombie-response-team">About Us</a></li>
<li><a href="http://www.pazrt.com/forum">Forums</a></li>
<li><a href="http://www.pazrt.com/gallery/main.php">Gallery</a></li>
<li><a href="http://wiki.pazrt.com">Wiki</a></li>
<li><a href="http://www.pazrt.com/forum/usermap.php">Member Map</a></li>
<li><a href="#">Social<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.twitter.com/pazrt">Twitter</a></li>
<li><a href="http://www.facebook.com/pages/Pennsylvania-Zombie-Response-Team/10150095905020602">Facebook</a></li>
<li><a href="http://www.youtube.com/pazrt">Youtube</a></li>
</ul>
<!-- End Links drop-down menu -->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="selected"><a href="contact-pennsylvania-zombie-response-team">Contact Us</a></li>
</ul>
</div>
<!-- Start contact content coding -->
<div id="contact">
<img src="images/leftlogo.png" alt="left logo" width="440px" />
<form name="contact" enctype="multipart/form-data" action="contact.php" method="post" onsubmit="return validate_fields(this)">
<ul>
<li>Name:<br />
<input type="text" size="30" name="name" id="name" /></li>
<li><br /></li>
<li>Email:<br />
<input type="text" size="30" name="email" id="email" /></li>
<li><br /></li>
<li>Problem:<br />
<select name="problem">
<option value="website">Website Problem</option>
<option value="forum">Forum Problem</option>
<option value="misc">Miscellaneous</option>
</select></li>
<li><br /></li>
<li>Comments:<br />
<textarea name="comments" id="comments" rows="5" cols="45"></textarea></li>
<li><br /></li>
<li><input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" /></li>
</ul>
</form>
</div>
<!-- Start footer coding -->
<div id="footer">
<img src="images/footer.png" alt="footer logo" width="1000px" />
</div>
</div>
<script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script>
<script type="text/javascript">try { var pageTracker = _gat._getTracker("UA-10934935-1"); pageTracker._trackPageview(); } catch(err) {}</script>
</body>
</html>Code:
*
{
margin: 0;
padding: 0;
}
body, body a:link
{
background-color: #666;
color: #CC0000;
font-family: Arial, Helvetica, sans-serif;
}
#wrapper
{
width: 62.5em;
background-color: #000;
margin: 0 auto;
}
#logo
{
background-color: #000;
width: 100%;
position: relative;
margin: 0;
padding: 0;
}
#navigation
{
background-color: #660000;
width: 62.5em;
height: 1.6em;
margin: 0 auto;
padding: 0;
}
#navigation ul
{
list-style-type: none;
}
#navigation li
{
float: left;
position: relative;
}
#navigation a, #navigation a:link, #navigation a:visited
{
text-decoration: none;
font-family: Verdana, Geneva, Arial, Sans-Serif;
font-size: 80%;
color: #FFF;
background-color: #660000;
display: block;
height: 2em;
width: 8em;
border-right: solid 1px #CCC;
text-align: center;
line-height: 2em;
outline-style: none;
}
#navigation a:hover, #navigation a:active, #navigation li.selected a:link, #navigation li.selected a:visited
{
background-color: #333;
color: #FFF;
}
#navigation li ul
{
position: absolute;
z-index: 100;
visibility: hidden;
}
#navigation li:hover ul, #navigation a:hover ul
{
visibility: visible;
top: 1.6em;
left: 0;
}
#navigation li:hover ul li a
{
background-color: #333;
color: #FFF;
text-align: left;
display: block;
width: 10em;
padding: 0 0 0 1em;
height: auto;
}
#navigation li:hover ul li a:hover
{
background-color: #990000;
color: #FFF;
}
/* IE6 Hack */
#navigation li:hover ul, #navigation li a:hover ul
{
visibility: visible;
top: 1.6em;
left: 0;
}
/* IE6 Hack */
#navigation li:hover ul li a, #navigation li a:hover ul li a
{
background-color: #333;
color: #FFF;
text-align: left;
display: block;
width: 10em;
padding: 0 0 0 0.5em;
height: auto;
}
/* IE6 Hack */
#navigation li:hover ul li a:hover, #navigation li a:hover ul li a:hover
{
background-color: #660000;
color: #FFF;
}
/* IE6 Hack */
#navigation table
{
margin: -1px;
border-collapse: collapse;
position: absolute;
top: 0.5em;
left: 0;
z-index: 100;
}
#maincontent
{
float: left;
background-color: #000;
color: #FFF;
width: 62.5em;
margin: 0;
padding: 0;
}
#maincontent a:link
{
background-color: #000;
color: #CC0000;
outline-style: none;
}
#contact, #contact ul
{
float: left;
background-color: #000;
color: #FFF;
width: 62.5em;
margin: 0;
padding: 0;
list-style-type: none;
}
#footer, #footer a:link
{
width: 62.5em;
background-color: #000;
margin: 0 auto;
text-align: center;
text-decoration: none;
outline-style: none;
}
#footer a:hover
{
text-decoration: underline;
outline-style: none;
}