Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.

Cheers,
Kirupa

Results 1 to 6 of 6

Thread: css - align input fields

  1. #1
    218
    posts
    Keyboard weilding drunk

    css - align input fields

    Sorry for the the newbie question, but CSS isn't really my deal but I have do do some of it.
    Anyways I have a simple form and I just want to align all the input fields so they have the same edge.

    From sites I have looked at online, the follow code *should* work. But I'm sure I'm missing something since it doesn't work lol. Any help would be great ^^

    Code:
    input{
        margin-right:10;
    }
    
    <form action="#">
                Name: <input type="text" name="name" />
                <br/>
                Phone: <input type="text" name="phone" />
                <br/>
                Province: <input type="text" name="province" />
                <br/>
                Email: <input type="text" name="email" />
                <br/>
                <input type="checkbox" name="email" /> Yes, I would like to receive future electronic communications from Ascenta.
                <br/>
                <input type="checkbox" name="agree" /> I have read the Rules and Regulations
                <br/>
                <input type="submit" value="Submit" />
            </form>
    For developers, by developers - Raising the bar for PBBGs:
    http://openbracket.ca


  2. #2
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">

    input{
    margin-left:10px;
    }
    input.name{
    margin-left:26px;
    }
    input.phone{
    margin-left:25px;
    }
    input.email{
    margin-left:30px;
    }
    </style>
    </head>

    <body>


    <form action="#">
    <table width="50%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>Name:</td>
    <td><input type="text" name="name" /></td>
    </tr>
    <tr>
    <td>Phone:</td>
    <td><input type="text" name="name" /></td>
    </tr>
    <tr>
    <td>Province:</td>
    <td><input type="text" name="name" /></td>
    </tr>
    <tr>
    <td>Email:</td>
    <td><input type="text" name="name" /></td>
    </tr>
    <tr>
    <td colspan="2"> <input type="checkbox" name="email" /> Yes, I would like to receive future electronic communications from Ascenta.
    <br/>
    <input type="checkbox" name="agree" /> I have read the Rules and Regulations
    <br/>
    <input type="submit" value="Submit" /></td>
    </tr>
    </table>
    <br /><br />


    Name: <input type="text" name="name" class="name" />
    <br/>
    Phone: <input type="text" name="phone" class="phone"/>
    <br/>
    Province: <input type="text" name="province" />
    <br/>
    Email: <input type="text" name="email" class="email"/>
    <br/>
    <input type="checkbox" name="email" /> Yes, I would like to receive future electronic communications from Ascenta.
    <br/>
    <input type="checkbox" name="agree" /> I have read the Rules and Regulations
    <br/>
    <input type="submit" value="Submit" />
    </form>
    </body>
    </html>

  3. #3
    Two ways you can align them. Use table is an easy way. or you need to assign a class name for the input and control by css. it is up to you. good luck.

  4. #4
    218
    posts
    Keyboard weilding drunk
    Thanks for the reply mate. Just one question though: With that method (css) the fields dont align 100%. I imagine this is because of the text.

    I tried margin-right:10px since there's nothing to the right and all the fields are the same length that it may align properly, but no go.

    So, the question is, why won't it align to the right in that situation?
    For developers, by developers - Raising the bar for PBBGs:
    http://openbracket.ca


  5. #5
    margin-right:10px doesn't mean to align the input to the right. it just add the margin with 10px for input.

  6. #6
    218
    posts
    Keyboard weilding drunk
    duh on my part. Thanks for the help ^^
    For developers, by developers - Raising the bar for PBBGs:
    http://openbracket.ca


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012