Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy cant get this form right

    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;
    }

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    http://jlhaslip.trap17.com/samples/m...m_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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •