nicht angemeldet
2 Form-Emente nebeneinander. statische und flexible Breite
Hi,
ich hab folgendes Problem:
Ich möchte ein Formular-Eingabefeld und einen Button nebeneinander anzeigen. Dabei soll der Button eine feste Breite haben. Die Breite des Eingabefeldes soll sich je nach Größe des Fensters automatisch anpassen, aber immer so, dass beide Elemente immernoch nebeneinander liegen.
Ich habe schon ein Haufen Sachen ausprobiert, doch nicht will gelingen. Ein Versuch, damit ihr seht, wies gemeint ist (oder auch nicht xD) seht ihr hier:
<html><body><input type="submit" style="width: 100px; float: right;"><input type="text" style="width: 100%; margin-right: 100%;"></body></html>
Das Problem hierbei ist, dass die Breite des Eingabefeldes (100%) übers ganze Fenster geht und das Feld somit unter dem Button erscheint.
Hat jemand eine Lösung? :)
Gruss
emmi
-
<html><body><input type="submit" style="width: 100px; float: right;"><input type="text" style="width: 100%; margin-right: 100%;"></body></html>
Das sollte eigentlich so aussehen xD
<html><body><input type="submit" style="width: 100px; float: right;"><input type="text" style="width: 100%; margin-right: 100px;"></body></html> -
Hi Emmi,
<html><body><input type="submit" style="width: 100px; float: right;"><input type="text" style="width: 100%; margin-right: 100%;"></body></html>
Das Problem hierbei ist, dass die Breite des Eingabefeldes (100%) übers ganze Fenster geht und das Feld somit unter dem Button erscheint.
Das ist ja erstmal kein Problem, sondern sinnvoll nach der Logik von HTML und CSS. Design-Entscheidung liegt natürlich bei dir, die folgende Lösung liegt ihrerseits aber ziemlich an der Grenze des Sinnvollen/ Machbaren und sollte nicht zur Gewohnheit werden.
Schritt 1 ist hier: Wie verkleinere ich für den Viewport den Bereich, den Inhaltselemente als 100% Breite ansehen würden. Zum Beispiel so:
html, body {
margin-right:0;
}
body {
padding-right:120px;
}Dann lassen wir zwei divs in einem Container nebeneinander floaten und schieben das rechte per negativem Rand in das Padding des body. Weiterhin verpackst du alles weitere vernünftig und schreibst es ordentlich auf (bitte keine styles in html Attributen):
.textbox {
width:100%;
float:left;
}
.submitbox {
width:100px;
float:left;
margin-right:-110px;
padding-left:10px;
}
.text {
width:100%;
}
.submit {
width:100px;
}<body>
<div>
<div class="textbox">
<input class="text" type="text">
</div>
<div class="submitbox">
<input class="submit" type="submit" value="foo">
</div>
</div>
</body>Das umfassende div kannst du z.B. benutzen, um vertikale Abstände herzustellen.
Gruß
Antipitch-
<html><body><input type="submit" style="width: 100px; float: right;"><input type="text" style="width: 100%; margin-right: 100%;"></body></html>
Das Problem hierbei ist, dass die Breite des Eingabefeldes (100%) übers ganze Fenster geht und das Feld somit unter dem Button erscheint.
»»
Das ist ja erstmal kein Problem, sondern sinnvoll nach der Logik von HTML und CSS.
»»
Dessen bin ich mir bewusst. In meinem Fall stellt dies jedoch ein Problem dar. Das war also nicht auf die HTML-Funktionalität an sich bezogen =)An sich ist die Idee gut. Ähnlich hatte ich es auch schon versucht, nur leider macht mir der IE immer wieder einen Strich durch die Rechnung.
Sobald ich dem input-Textfeld eine Breite von 100% zuweise schießt dieses im IE, und nur im IE, über die Breite heraus. Es scheint so als würde es jegliche Padding-Werte ignorieren (Das ganze befindet sich nochmal in einem DIV mit Paddings).Hast du da auch einen Rat? :)
Gruss
emmi-
Ich habs jetzt selbst geschafft ihn zu überlisten:
Der Button-Div ist "float:right" und der TextFeld-Div "padding-right:110px". Das wars eigentlich auch schon =)In allen Browsern funzt das so. Der IE macht lediglich die Abstände ein paar Pixel breiter, aber damit kann ich leben.
Gruss
emmi
-
-