CODEWITHSUNDEEP
htmlcss
user2897922
user2897922

Reputation: 79

Fields to right

I don`t know how to do this:

From:

from

To:

To

HTML/CSS:

<style>
                input[type='text'] {
                    width:246px;
                    margin:2px 1px;
                    padding:2px;
                }
                </style>
                <form action="/Handeler/control.php?p=add#" method="POST">
                    <strong>Let op: Als je een file via FTP of gewoon in de map uploads zet weet dan zeker dat de file match id(<u>yYW3D7</u>) het zelfde is als de bestandsnaam!!!</strong> <br />
                    File match ID: <input type="text" name="code" value="yYW3D7" disabled> <br />
                    Code: <input type="text" name="code" placeholder="Download code hier..." value=""> <br />
                    Verloopt op: <input type="text" name="code" placeholder="Download code hier..." value=""> <br />
                    Aantal keer gebruiken: <input type="text" name="code" placeholder="Aantal downloads hier..." value=""> <br />
                    IP whitelist:  <input type="text" name="code" placeholder="IP hier. (laat leeg voor geen whitelist)" value=""><br />
                </form>

I have tried position:absolute and relative also float:right; but thats not working.

Thank you!

Upvotes: 0

Views: 54

Answers (3)

jameslafferty
jameslafferty

Reputation: 2182

Here's a way to start approaching it with css.

CSS

input[type='text'] {
    width:246px;
    margin:2px 1px;
    padding:2px;
}

label {
    display : block;
}

label span {
    display : inline-block;
    width : 150px;
}

Html: 

<form action="/Handeler/control.php?p=add#" method="POST">
    <strong>Let op: Als je een file via FTP of gewoon in de map uploads zet weet dan zeker dat de file match id(<u>yYW3D7</u>) het zelfde is als de bestandsnaam!!!</strong> 
    <label>
        <span>File match ID:</span>
        <input type="text" name="code" value="yYW3D7" disabled />
    </label>
    <label>
        <span>Code:</span>
        <input type="text" name="code" placeholder="Download code hier..." value="" />
    </label>
    <label>
        <span>Verloopt op:</span>
        <input type="text" name="code" placeholder="Download code hier..." value="" />
    </label>
    <label>
        <span>Aantal keer gebruiken:</span>
        <input type="text" name="code" placeholder="Aantal downloads hier..." value="" />
    </label>
    <label>
        <span>IP whitelist:</span>
        <input type="text" name="code" placeholder="IP hier. (laat leeg voor geen whitelist)" value="" />
    </label>
</form>

If you don't like setting width on the label span, you can use display : table-cell; to style the same markup with the width dependent on the containing form instead. There's a forked fiddle here that does that.

Css:

form {
    display : table;
    width : 425px;
}
input[type='text'] {
    width:246px;
    margin:2px 1px;
    padding:2px;
}

label {
    display : table-row;
}

label span {
    display : table-cell;
}

Upvotes: 1

Andr&#233; Leria
Andr&#233; Leria

Reputation: 392

Lay out your HTML kinda like this...

<div>
  <label for="code">File Match ID:</label>
  <input id="code" type="text" />
<div>
<!-- and repeat... -->

And CSS your way into:

div {
  width: 300px;
}
label {
  display: inline-block;
  width: 80px;
}
input {
  width: 200px;
}

Remember to class up your HTML and CSS, and also to adjust the values for your needs. This was just an example.

Upvotes: 0

DevlshOne
DevlshOne

Reputation: 8457

You need to tag the label side of the input and make it a specific width, then all of your inputs will know to begin at a specified horizontal position. And maybe you should think about using different names for your inputs? Your form values are going to be very confused when you submit.

input[type='text'] {
  width:246px;
  margin:2px 1px;
  padding:2px;}
label {
   width:225px;
   float:right;
   display: inline-block;
}
</style>
<form action="/Handeler/control.php?p=add#" method="POST">
<strong>Let op: Als je een file via FTP of gewoon in de map uploads zet weet dan zeker dat de file match id(<u>yYW3D7</u>) het zelfde is als de bestandsnaam!!!</strong> <br />
<label for="code">File match ID: </label><input type="text" name="code" value="yYW3D7" disabled> <br />
<label for="code">Code: </label><input type="text" name="code" placeholder="Download code hier..." value=""> <br />
<label for="code">Verloopt op: </label><input type="text" name="code" placeholder="Download code hier..." value=""> <br />
<label for="code">Aantal keer gebruiken: </label><input type="text" name="code" placeholder="Aantal downloads hier..." value=""> <br />
<label for="code">IP whitelist:  </label><input type="text" name="code" placeholder="IP hier. (laat leeg voor geen whitelist)" value=""><br />
</form>

Upvotes: 1

Related Questions