SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict sedna's Avatar
    Join Date
    Jan 2006
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    trouble styling my signup form

    hey all i am having problems styling my signup form i am such a newbie when it comes to css.

    please look at the screen shots of what i am trying to style, what i hope to accomplish is for it to look like a user signup form and be possistioned in the center i wasa trying to for the web 2.0 theme.

    this is my coding

    signup page (it has some php coding in there ignore that)

    PHP Code:
    <div id="form">
    <form action="<?php echo $_SERVER['PHP_SELF']; ?> " method="post">
    <label for="firstname">Enter your Firstname <br />
     
    <input type="text" name="firstname" id="firstname" value="<?php if (strlen($firstname) > ) {echo $firstname;} ?>" /> </label><br />

    <label for="lastname">Enter your Lastname <br />
    <input type="text" name="lastname" id="lastname" value="<?php if (strlen($lastname) > ) {echo $lastname;} ?>" /> </label><br />

    <label for="username">Enter your Username <br />
    <input type="text" name="username" id="username" value="<?php if (strlen($username) > ) {echo $username;} ?>" /> </label><br />

    <label for="password">Enter your password <br />
    <input type="password" name="password" id="password" value="" /> </label><br />

    <label for="email">Enter E-Mail<br /> 
    <input type="text" name="email" id="email" value="<?php if (strlen($email) > 0) {echo $email;} ?>" /></label><br /> 

    <span id="error_email" class="errormessage">

    <?php

    if ($_POST){
      
    // This regex from http://www.smartwebby.com/PHP/emailvalidation.asp
      
    if (ereg("^[^@ ]+@[^@ ]+\.[^@ ]+$",$email)) {;} else {echo "<P class=\"error\">This is invalid email address.</P>";}
    }
    ?>
    </span> 
    <input type="submit" name="add_user" value="Register" id="adduser" />
    </form>
    </div>
    css code

    Code:
    /* CSS Document for login form */
    #form {
    padding: 10px;
    position:relative;
    width: 168px;
    border: 3px solid #CCCC0C;
    margin: 50px;
    }
    i have attched screenshot so you can see

    kind regards

    joe
    Attached Images Attached Images

  2. #2
    SitePoint Addict sedna's Avatar
    Join Date
    Jan 2006
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can you please approve my image?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you just want a hand centering it then all you need to do is add margin:auto;

    Code:
    #form {
    padding: 10px;
    position:relative;
    width: 168px;
    border: 3px solid #CCCC0C;
    margin: 50px auto;
    }
    If you want help with other elements you will need to be more specific.

    Content inside a form needs to be in a block level container so place the div inside the opening and closing form tags and apply the id to the form itself.

  4. #4
    SitePoint Addict sedna's Avatar
    Join Date
    Jan 2006
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok what i did want is the form it self to be in the center of the page

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    ok what i did want is the form it self to be in the center of the page
    The code I gave you will do that unless I'm misunderstanding what you want .


Bookmarks

Posting Permissions

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