1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: creating css forms

Discussion in 'Web Design & Development' started by aconite, Jul 6, 2007.

Thread Status:
Not open for further replies.
  1. aconite

    aconite Thread Starter

    Joined:
    Feb 1, 2006
    Messages:
    210
    hi,

    I have never created forms using css and need some help, how can I move the word 'your message ' to the top of the textarea box. Attached is a picture of the page, as yet I do not have hosting so can't upload the url

    CSS
    h3 {
    font-family:"Century Gothic";
    font-size:1.4em;
    color:#818d99;
    font-weight:normal;
    margin-left:6%;
    }

    #form {
    width:4em;
    text-align:right;
    float:left;
    display:block;
    font-size:1.2em;
    line-height:260%;
    margin-right:6em;
    }

    .submit input {
    margin-left:7.5em;
    background:#cbd7e6;
    border:2px outset #96adbf;
    }

    input {
    color:#000000;
    background:#ffffff;
    border:1px solid #000000;
    }

    textarea.white {
    background-color:#FFFFFF;
    color:#000000;
    border:1px solid #000000;
    }

    p {
    margin-left:6%;
    }

    HTML
    <h3>CONTACT PHOTO RESTORATION EXPERT</h3>
    &nbsp;
    <form action="" method="post">
    <p>Your Name: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" size="45" /></p>
    <p>Your Email: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" size="45" /></p>
    <p>Subject: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" size="45" /></p>
    <p>Your Message: &nbsp; &nbsp; <textarea class="white" cols="45" rows="20"></textarea></p>
    <p class="submit"><input type="submit" value="Submit" /></p>
    </form></div>

    thanks
     

    Attached Files:

  2. jaymanson

    jaymanson

    Joined:
    Mar 18, 2007
    Messages:
    199
    Hi,

    The main problem is that the input areas are inside <p> tags. You should avoid putting anything other than text inside a <p> tag. Also worth a mention, the #form element in the CSS will have no effect as there is nothing with an id of 'form' in the HTML. Here's the form with a few adjustments and a little code tidy :)

    CSS
    Code:
    h3 {
    font-family:"Century Gothic";
    font-size:1.4em;
    color:#818d99;
    font-weight:normal;
    margin-left:6%;
    }
    
    #form {
    width:500px;
    }
    
    #form p {
    float: left;
    width: 20%;
    padding: 0;
    margin: 0;
    }
    
    .input {
    float: right;
    width: 79%;
    border:1px solid #000000;
    }
    
    .submit {
    float: left;
    margin-left: 102px;
    background: #cbd7e6;
    border: 2px outset #96adbf;
    }
    
    br {
    clear: both;
    }
    HTML
    Code:
    <h3>CONTACT PHOTO RESTORATION EXPERT</h3>
    <form id="form" action="" method="post">
    <p>Your Name:</p><input class="input" type="text" /><br /><br />
    <p>Your Email:</p><input class="input" type="text" /><br /><br />
    <p>Subject:</p><input class="input" type="text" /><br /><br />
    <p>Your Message:</p><textarea class="input" rows="20"></textarea><br /><br />
    <input class="submit" type="submit" value="Submit" />
    </form>
    You can obviously style this further, but hopefully you can see what I've done there :)

    Jay
     
  3. aconite

    aconite Thread Starter

    Joined:
    Feb 1, 2006
    Messages:
    210
    thank you once again jay
     
As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Similar Threads - Solved creating forms
  1. Ricson
    Replies:
    2
    Views:
    584
  2. owlhootx
    Replies:
    15
    Views:
    1,680
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/592483

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice