...

View Full Version : cant get this form right



aajstephen
12-28-2007, 05:59 PM
I am learning css and I cant get this form right.
I have tried everything text align in a div margins and I dont know where I am going wrong. I also cant get the footer to stay at the bottom of the document rather than the bottom of the screen.
I realise these are probably basic errors but I need a bit of guidance because I have run out of ideas to sort it.
Many thanks for suggestions
A

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
<title>Web design course</title>


<meta name="keywords" content="web design course">

</head>

<body>
<div id="wrapper">
<div id="logo">
<a href="index.htm"><img src="logo.gif" alt="go to our homepage"></a>
</div>

<h1>Welcome to Aberdeen College Web Design Course</h1>
<div id="para1">
<p class="para1">This course aims to provide students with a basic knowledge of how to put together a basic website. The course looks at <a href="#">html</a> as well as the more complicated <a href="#"> CSS</a> or as it is known cascading stylesheets.
<br>
<br>
If you would like to find out more about the course please fill in the form below:</p>
<br/></div>
<div id="form">
<form>


<label for="user">Name:</label>
<input type="text" name="user" value="" /><br />

<label for="emailaddress">Email Address:</label>
<input type="text" name="emailaddress" value="" /><br />

<p>Please tick what you what you are enquiring about:</p>
<label for="terms"> information</label>
<input type="checkbox" name="terms" class="boxes" /><br />

<label for="terms">prospectus</label>
<input type="checkbox" name="terms" class="boxes" /><br />

<label for="comments">Comments:</label>
<textarea name="comments"></textarea><br />

</form>
</div>
<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />


</div>
<div class="clear"></div>
<div id="footer">
<ul>
<li><a title="About us" href="#">About us</a></li>
<li><a title="Customer Services" href="#">Courses</a></li>
<li><a title="Partners" href="#">Contact us</a></li>


</ul>
</div>

<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML</a></li>
<li><a href="#">About CSS</a></li>
<li><a href="#">About Us</a></li>
</ul>

</div>
</div>
</body>
</html>

body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #B4FFFF;
text-align: center;
}

a img {
border-style: none;
}


a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: orange; }
a:active { color: green; }


#logo {
position: absolute;
top: 15px;
left: 46px;
width: 180px;

}

#wrapper {
text-align: center;
width: 760px;
margin-right: auto;
margin-left: auto;
}


h1 {
font: normal 180% Times, Georgia, "Times New Roman", Serif;
color: #336699; padding: 40px 10px 60px 85px;
border-bottom: 1px dashed #333333;
}

.para1 {
width: 650px;
float: right;
font-size: 100%;
line-height: 1.8em;
padding-left: 2em;

}


#navigation {
position: absolute;
top: 72px;
left: 46px;
width: 180px;
margin-top: 100px;
padding-top: 20px;
background-color: #009900;
}

#navigation ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navigation li {
width: 180px;
border-bottom: 1px outset #3399CC;
margin: 0;
padding: 0;
font-size: 95%;
}
#navigation a:link, #navigation a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #336699;
border-right: 1px solid #336699;
background-color: #F70149;
color: #FFFFFF;
text-decoration: none;
}
#navigation a:hover {
background-color: #32004C;
color: #FFFFFF;
}

#form {
text-align: left;
}

label{
text-align: left;
margin-left: 120px;

}

input, textarea{

width: 180px;
margin: 0; 0; 5px; 500px;
}

.boxes{
text-align: right;
width: 1em;
}

textarea{
width: 250px;
height: 150px;
}

jlhaslip
12-28-2007, 07:04 PM
http://jlhaslip.trap17.com/samples/misc/demo/form_styling.html

Looking for something like that?
Since you are a Student, I will merely point you towards what I 'think' is the answer. Your question is a little unclear.
Should be able to clean it up using the information available there. Just tear apart the html/css on that page.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum