Ich arbeite nebenbei an meinem User Interface und bin nun auf ein Problem gestoßen.
Ich möchte direkt neben den vorhanden Einträgen weitere form boxen erstellen es wäre sonst verschwendeter Platz (siehe Bild), da ich nun kein großer CSS kenner bin weiß ich nicht weiter und Frage deswegen hier.
HTML
Code
<form>
<ul class="form-style-1">
<div id="servername">
<label for="servername">Servername:</label>
<input type="text" name="servername" id="servername" maxlength="30">
</div>
<div id="serverport">
<label for="serverport">Server Port:</label>
<input type="text" name="serverport" id="port" maxlength="6">
</div>
<div id="maxclients">
<label for="maxclients">Max. Clients:</label>
<input type="text" name="maxclients" id="maxclients" maxlength="4">
</div>
<div id="hostbanner">
<label for="hostbanner">Host Banner URL:</label>
<input type="text" name="hostbanner" id="hostbanner">
</div>
<div id="hostbutton">
<label for="hostbutton">Host Button URL:</label>
<input type="text" name="hostbutton" id="hostbutton">
</div>
<div id="hostmessage">
<label for="hostmessage">Host Nachricht:</label>
<textarea id="hostmessage" name="hostmessage"></textarea>
</div>
<div id="welcmessage">
<label for="welcmessage">Willkommens Nachricht:</label>
<textarea id="welcmessage" name="welcmessage"></textarea>
</div>
</br>
<button type="reset">Eingaben zurücksetzen</button>
<button type="submit">Eingaben absenden</button>
</ul>
</form>
Alles anzeigen
CSS
Code
.form-style-1 {
margin:10px 400;
max-width: 400px;
padding: 20px 12px 10px 20px;
font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form-style-1 li {
padding: 0;
display: block;
list-style: none;
margin: 10px 0 0 0;
}
.form-style-1 label{
margin:0 0 3px 0;
padding:0px;
display:block;
font-weight: bold;
}
.form-style-1 input[type=text],
.form-style-1 input[type=date],
.form-style-1 input[type=datetime],
.form-style-1 input[type=number],
.form-style-1 input[type=search],
.form-style-1 input[type=time],
.form-style-1 input[type=url],
.form-style-1 input[type=email],
textarea,
select{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border:1px solid #BEBEBE;
padding: 7px;
margin:0px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
}
.form-style-1 input[type=text]:focus,
.form-style-1 input[type=date]:focus,
.form-style-1 input[type=datetime]:focus,
.form-style-1 input[type=number]:focus,
.form-style-1 input[type=search]:focus,
.form-style-1 input[type=time]:focus,
.form-style-1 input[type=url]:focus,
.form-style-1 input[type=email]:focus,
.form-style-1 textarea:focus,
.form-style-1 select:focus{
-moz-box-shadow: 0 0 8px #88D5E9;
-webkit-box-shadow: 0 0 8px #88D5E9;
box-shadow: 0 0 8px #88D5E9;
border: 1px solid #88D5E9;
}
.form-style-1 .field-divided{
width: 49%;
}
.form-style-1 .field-long{
width: 100%;
}
.form-style-1 .field-select{
width: 100%;
}
.form-style-1 .field-textarea{
height: 100px;
}
.form-style-1 input[type=submit], .form-style-1 input[type=button]{
background: #4B99AD;
padding: 8px 15px 8px 15px;
border: none;
color: #fff;
}
.form-style-1 input[type=submit]:hover, .form-style-1 input[type=button]:hover{
background: #4691A4;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}
.form-style-1 .required{
color:red;
}
Alles anzeigen
Vielleicht könnte mir jemand weiter helfen?