Formular ausrichten

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

drokai

Neues Mitglied
23 Juli 2019
11
0
1
24
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/

5178
 

Sailor

Aktives Mitglied
14 Juli 2017
428
52
28
Bitte mal testen....
CSS:
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%;
}
 
  • Like
Reactions: drokai

BetaOps

Neues Mitglied
4 Juli 2019
24
1
3
21
Also ich kann dir mal mein Formular Code geben, damit du dich daran Orientieren kannst

HTML
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
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
 
  • Like
Reactions: drokai
Werbung: