Page 1 of 1

Input box line up

Posted: Tue Jan 29, 2008 10:28 am
by frosty16
heya everyone

I was wondering if there is any way in which you can get the input boxes to line up so that the edge of them are all the same?

frosty

Re: Input box line up

Posted: Tue Jan 29, 2008 10:33 am
by Zoxive
Client side.

Code: Select all

<input><input><input>
 
I guess I don't understand your question.

They looked lined up to me.

Unless you mean

Code: Select all

<style>
input{
 border:none;
}
</style>
<input><input><input>
 

Re: Input box line up

Posted: Tue Jan 29, 2008 10:39 am
by frosty16
i have got the following code:

Code: Select all

     <?php
    
    echo "<form action='Save_User.php' method='POST'>\n<br>
            <span class='style5'>First Name:     <input type='Text' name='firstname'></span>\n<br>
            <span class='style5'>Surname:        <input type='Text' name='surname'></span>\n<br>
            <br>
            <span class='style5'>Username:       <input type='text' name='username'></span>\n<br>
            <span class='style5'>Password:       <input type='text' name='password'></span>\n<br>
            <br>
            <input type='submit' value='Add User'>\n
            </form>\n";
?>
and what it display's is in the attached. If you look the surname box is out of line with the others. How can i align all these together.

Re: Input box line up

Posted: Tue Jan 29, 2008 10:46 am
by Zoxive
First off, thanks for showing the code, and a picture helps a lot when trying to help others.

Code: Select all

<style>
.style5{
    display:block;
    width:300px;
}
.style5 span{
    float:left;
}
.style5 input{
    clear:none;
    float:right;
}
</style>
 <form action='Save_User.php' method='POST'><br>
<span class='style5'><span>First Name:</span><input type='Text' name='firstname'></span><br>
<span class='style5'><span>Surname:</span><input type='Text' name='surname'></span><br>
<br>
<span class='style5'><span>Username:</span><input type='text' name='username'></span><br>
<span class='style5'><span>Password:</span><input type='text' name='password'></span><br>
<br>
<input type='submit' value='Add User'>
</form>
Quick example. Not the best syntax, but you should get the idea.

All I did to the html is added <span> around the text, so we can tell it to stay to the left.

Re: Input box line up

Posted: Tue Jan 29, 2008 10:49 am
by frosty16
so i dont need to put it as an echo in php i can just do it in html?

Re: Input box line up

Posted: Tue Jan 29, 2008 10:52 am
by Zoxive
frosty16 wrote:so i dont need to put it as an echo in php i can just do it in html?
All echo does it output the text to the browser.

Wither that text is Html/Javascript/CSS, It does not matter.

You can still do it in an echo, But its still html. Its just being output by php.

Code: Select all

<?php
// Some php code
?>
<b>Hi there<b>
<!-- Other Html Code -->
<?php
// More php code
?>
 
You can even do it like above.

Re: Input box line up

Posted: Tue Jan 29, 2008 10:55 am
by pickle
This has nothing to do with PHP - moving to Client-Side.

Re: Input box line up

Posted: Wed Jan 30, 2008 12:39 am
by matthijs

Code: Select all

 
            <form action='Save_User.php' method='POST'><br>
                        <p><label for="firstname">First Name:     </label><input type='Text' name='firstname'></p>
                        <p><label >Surname:        </label><input type='Text' name='surname'></p>
                        <br>
                        <p><label>Username:       </label><input type='text' name='username'></p>
                        <p><label>Password:       </label><input type='text' name='password'></p>
                        <br>
                        <input type='submit' value='Add User'>
            </form>
 

Code: Select all

 
        * { margin:0;padding:0;}
        form p { padding:5px 0; }
        label { display:block;float:left;width:200px; }
 
The * {} is there to reset the default styles. There are better ways to do that (search css reset), but for now it'll do. The p is there to have a nice semantic wrapper for the labels and inputs. You could also use divs, or something like a list.