Formular ausrichten

[drokai]

Hallo zusammen,

ich stoße gerade auf meine Grenzen (diese liegen noch sehr niedrig)
Ich habe ein Formular erstellt mit dem ich nun nicht mehr weiter komme.

Ich habe ein paar Eingabefelder, das Feld Last name soll mit dem Text neben First name stehen.
Die Länge der beiden Felder, soll dann so groß wie das Feld "Message" sein.

Im jsfiddle sieht man wo ich gerade stecke.


Hier mal mein Code:
https://jsfiddle.net/Drokai/xaL8q5gr/2/

 

[Sailor]

Bitte mal testen....

div.formular_input_firstname, div.formular_input_lastname {
  display: inline-block;
  width: calc(30rem / 2);  /* die halbe Breite des Textfeldes (Message)*/
}
input#fname, input#lname {
  width: 100%;
}

 

[drokai]

Vielen Dank, der Code hat mir sehr geholfen!

Bitte mal testen....

div.formular_input_firstname, div.formular_input_lastname {
  display: inline-block;
  width: calc(30rem / 2);  /* die halbe Breite des Textfeldes (Message)*/
}
input#fname, input#lname {
  width: 100%;
}

 

[BetaOps]

Also ich kann dir mal mein Formular Code geben, damit du dich daran Orientieren kannst

HTML

<div id="container">
        <p></p>
        <p>TEXT</p>
        <div>
            <p>Ihre Auswahlparameter: </p>
            <ol>
                <li>X</li>
                <li>X</li>
                <li>X</li>
            </ol>
        </div>
        <p>TEXT</p>
        <form id="form1" method="post" action="#">
            <div id="container2">
                <input type="submit" id="input1" name="true"
                       value="Doch, er ist aufgeführt" />
                <input type="submit" id="input2" name="false"
                       value="Nein, er ist nicht aufgef&#252;hrt" />
            </div>
        </form>
    </div>

CSS

*{
    font-family:Arial,sans-serif;
}
/* Zum Ausrichten des Inhalts */
#container{
    width: 35em;
    border: 1px solid black;
    background-color: #eeeeee;
}
p{
    margin: 1em 1em;
}
input{
    font-weight:bolder;
    width: 15em;
    height:2em;
    background-color:#c0f0ff;
    border: 1px black solid;
    border-radius: 5px;
}
#input2{
    margin-left: 5em;
}

/* Interaktion mit den Input-Feldern */
input:hover{
    background-color: black;
    color:white;
}
input:active{
    color:white;
    background-color: #808080;
}

/* Zum ausrichten der Input-Felder*/
#container2{
    width:30em;
    margin: 0 auto;
    margin-bottom:1em;
}

Ein paar Anfänger Tipps:
Div's kann man benutzen um Sachen zu gruppieren und gesondert zu ordnen
mit # kannst du die Elemente mit einer gewissen ID ansprechen, mit .CLASSENNAME eine classe
Bei längen angaben versuchen em zu nehmen und nicht % oder px weil bei px ist die Auflösung des Displays entscheidened und % orientiert sich an der größte des darüber liegenden Elementens (im bsp: wenn p eine % angabe hat dann orentiert er sich an der größte vom div (id=container)
im CSS sind die angaben hinter dem : Pseudoklassen, die für interaktionen zuständig sind