nicht angemeldet
Postionierung von Formularfeldern in einem Container
0 0 0 0 
Der Martin
0 0 
MudGuard
0 0 0 0 MudGuard
0
Postionierung von Formularfeldern in einem Container
Hallo Wissende!
Mit folgendem Code versuche ich FormularElemente in einem Container zu platzieren und zu positionieren. Ich habe es alles über Span-Elemente erledigt. Nun möchte ich aber, das die Positionierung innerhalb eine DIV_Containers vorgenommen wird, so das ich nur noch den gesamten Container verschieben muss.
Allerdings klappt es nicht. Wenn ich den CSS-Posiotnierungsbefehl mittel Relative ausführe, wird alles total verschoben, da dies wohl auch was mit Eltern und Kindern zu tun hat.
Wenn ich es mit absolut mache, ist es immer als links oben und nicht wirklich innerhalb des gewünschten Containers.
Wer kann mir helfen oder mal einen Tipp geben?
<body>
<div align="center" style="height:60;">
<h1 class="farbig">Kontaktformular</h1>
<p class="anno">Mit diesem Formular können Sie uns erreichen.</p>
<!--in diesem container sollen die formularfelder positioniert werden-->
<div style="top:65;" align="center">
<span class="td" style="position:relative;left:20;top:10;">Vorname</span><input type="text" name="VName" value="" size="20" MaxLength="40"class="farbig" style="position:relative;left:120;top:10;width:121;">
<span class="td" style="position:relative;left:20;top:37;">Name</span><input type="text" name="Name" value="" size="20" MaxLength="40"class="farbig" style="position:relative;left:120;top:37;width:121;">
<span class="td" style="position:relative;left:260;top:8;">E-Mail</span><input type="text" name="SenderMail" value="" size="20" MaxLength="40"class="farbig" style="position:relative;left:360;top:8;width:121;">
<span class="td" style="position:relative;left:260;top:35;">Homepage</span><input type="text" name="Homepage" value="" size="20" MaxLength="40"class="farbig" style="position:relative;left:360;top:35;width:121;">
<span class="td" style="position:relative;left:20;top:78;">Ihr Text</span><textarea name="Text"class="farbig" cols="15" rows="5" style="position:relative;left:120;top:78;width:361;"></textarea>
</div>
<input type="submit" name="next" value="Abschicken" class="farbig">
<input type="reset" name="next" value="Zurücksetzen" class="farbig">
<input type="button" name="print" value="Drucken" class="farbig" onClick="javascript:window.print()">
</div>
</body>
</html>
-
Hi!
Tipp: mach neu!
Jegliche von static abweichende Positionierung ist solange unbedingt zu vermeiden, solange man nicht genau weiss, was man tut.
Dich dürfte die folgenden CSS-Angaben interessieren:
float
clear
width (sorry, zu faul, dir die entspreechenden SELFHTML-Kapitel rauszusuchen)Nur ein Hinweis noch: deine Felder sind 20 Elefanten links und z.B. 10 Kühe von ihrer Standardposition entfernt angeordnet und dazu noch 121 Pinguine breit.
Gruß aus Iserlohn
Martin
-
Tipp: mach neu!
jo mach ich. das macht mir nix. ich will ja das ergebis bekommen, wie ich es brauche.
Jegliche von static abweichende Positionierung ist solange unbedingt zu vermeiden, solange man nicht genau weiss, was man tut.
wie war das denn gemeint?
Dich dürfte die folgenden CSS-Angaben interessieren:
float
clear
width (sorry, zu faul, dir die entspreechenden SELFHTML-Kapitel rauszusuchen)ok, dann schaue ich mal, aber wirklich helfen tut mir das auf anhieb nicht.
Nur ein Hinweis noch: deine Felder sind 20 Elefanten links und z.B. 10 Kühe von ihrer Standardposition entfernt angeordnet und dazu noch 121 Pinguine breit.
den habe ich verstanden. es fehlen die einheiten. die kommen nun also rein...
-
Hi!
Jegliche von static abweichende Positionierung ist solange unbedingt zu vermeiden, solange man nicht genau weiss, was man tut.
wie war das denn gemeint?
So wie es da steht. Das "aus-dem-Fluss-nehmen" hat so weitreichende Konsequenzen für den Seitenaufbau, dass man die Verwendung vermeiden sollte.
Dich dürfte die folgenden CSS-Angaben interessieren:
float
clear
width (sorry, zu faul, dir die entspreechenden SELFHTML-Kapitel rauszusuchen)ok, dann schaue ich mal, aber wirklich helfen tut mir das auf anhieb nicht.
Ersetze zuerst deine sinnlosen spans durch sinngebende labels. Dann formatiere die label per CSS so, dass diese eine gewisse Breite haben, links umflossen werden und den normalen Fluss wieder herstellen:
label {width:10em; float:left; clear:left;}
Als nächstes weist du nun den Eingeabefelder auch eine fixe Breite zu, sowie einen gewissen Abstand (in diesem Fall beträgt der Abstand 11em-10em = 1em), da die Breite der Label nicht mitgerechnet wird) :
input {width:15em; margin-left:11em;}
Nach dem letzten Formularelement musst du noch ein Element haben, welches den Fluss wiederherstellt, dem also ein clear:left; zugewiesen wird.
Gruß aus Iserlohn
Martin
-
Danke Dir!
Werde ich sofort probieren!
-
-
Hallo,
Tipp: mach neu!
jo mach ich. das macht mir nix. ich will ja das ergebis bekommen, wie ich es brauche.gute Einstellung. :-)
Und nimm meinem Namensvetter den sehr kurz angebundenen guten Rat nicht übel; dein jetziger Quellcode, so wie du ihn hier gezeigt hast, ist wirklich ein wüstes Mischmasch von "alten" HTML-Layoutattributen und fehlerhaftem CSS.Jegliche von static abweichende Positionierung ist solange unbedingt zu vermeiden, solange man nicht genau weiss, was man tut.
wie war das denn gemeint?Die Positionierung von Elementen mit CSS ist nicht so einfach, wie es oft aussieht. Viele CSS-Tricks wirken sich anders aus, als ein Uneingeweihter es vermuten würde. Das gilt vor allem für position:absolute, aber auch position:relative hat seine Fallstricke.
Solange du also nicht genau weißt, was diese Angaben genau bewirken (auch die Nebenwirkungen), solltest du sie zunächst meiden. Und dein Quellcode lässt auch mich vermuten, dass du dich nicht wirklich auskennst, sorry.float
clear
width
ok, dann schaue ich mal, aber wirklich helfen tut mir das auf anhieb nicht.Mit float kannst du ein Element nach links oder rechts aus dem normalen Elementfluss herausnehmen, während der restliche Text drumherum "fließt". Mit clear wird dieser Umfluss wieder aufgehoben.
den habe ich verstanden. es fehlen die einheiten. die kommen nun also rein...
Wäre besser so, ja. CSS-Positionsangaben oder Abmessungen ohne Einheiten sind nämlich eigentlich ungültig und sollten von einem streng arbeitenden Browser deshalb komplett ignoriert werden. Manche Browser versuchen stattdessen, eine passende Einheit zu erraten und raten u.U. sogar richtig. Darauf verlassen möchte ich mich aber nicht. :-)
Schönen Tag noch,
Martin
--
Irgendwann in grauer Vorzeit benutzte einer unserer prähistorischen Vorfahren ein Schimpfwort anstelle der Keule.
Die Zivilisation hatte begonnen.
-
Hallo Martin!
Nichts für ungut und vielen Dank auch für Deinen Beitrag. Ich gebe gern zu, dass ich nur weiss, dass es dank CSS die Positionierungsbefehle und Möglichkeiten gibt, welche ich hin und wieder nutze, aber mit diesem Formular habe ich so meine Schwierigkeiten.
Naja und von Label hatte ich bisher noch nichts gelesen.
Die Positionierung von Elementen mit CSS ist nicht so einfach, wie es oft aussieht. Viele CSS-Tricks wirken sich anders aus, als ein Uneingeweihter es vermuten würde. Das gilt vor allem für position:absolute, aber auch position:relative hat seine Fallstricke.
Gerade hier scheint eins meiner Probleme zu liegen, denn wenn ich auf absolut umstelle, geht es, allerdings sind dann meine Elemente alle absolut von 0,0 aus positioniert. Das wäre für mich nur im absoluten Notfall ok.
Solange du also nicht genau weißt, was diese Angaben genau bewirken (auch die Nebenwirkungen), solltest du sie zunächst meiden. Und dein Quellcode lässt auch mich vermuten, dass du dich nicht wirklich auskennst, sorry.
Kein Problem. Ich weiss, dass ich auch meine Schwächen habe! :-)
Ich habe nun vieles von dem realisiert, was "der andere" Martin mir auf den Weg gab umgesetzt, aber es will einfach nicht klappen. Es ist generierter Code. Ich muss es also grundsätzlich kapieren, damit ich den Code auch richtig mit meinem Generator erzeugen kann. Hier mein Versuch, welcher auch wieder fehl schlug...
<body>
<div align="center" style="height:60;">
<h1 class="farbig">Kontaktformular</h1>
<p class="anno">Mit diesem Formular können Sie uns erreichen.</p>
<!--in diesem container sollen die formularfelder positioniert werden-->
<div style="top:65px;" align="center">
<label class="td" style="position:relative;left:20px;top:10px;float:left;clear:left;width:20px;">Vorname</span><input type="text" name="VName" value="" size="20" MaxLength="40"class="farbig" style="position:relative;left:120px;top:10px;width:121;margin-left:1em;">
<label class="td" style="position:relative;left:20px;top:37px;float:left;clear:left;width:20px;">Name</span><input type="text" name="Name" value="" size="20" MaxLength="40"class="farbig" style="position:relative;left:120px;top:37px;width:121;margin-left:1em;">
<label class="td" style="position:relative;left:260px;top:8px;float:left;clear:left;width:20px;">E-Mail</span><input type="text" name="SenderMail" value="" size="20" MaxLength="40"class="farbig" style="position:relative;left:360px;top:8px;width:121;margin-left:1em;">
<label class="td" style="position:relative;left:260px;top:35px;float:left;clear:left;width:20px;">Homepage</span><input type="text" name="Homepage" value="" size="20" MaxLength="40"class="farbig" style="position:relative;left:360px;top:35px;width:121;margin-left:1em;">
<label class="td" style="position:relative;left:20px;top:78px;float:left;clear:left;width:20px;">Ihr Text</span><textarea name="Text"class="farbig" cols="15" rows="5" style="position:relative;left:120px;top:78px;width:361;margin-left:1em;"></textarea>
</div>
<input type="submit" name="next" value="Abschicken" class="farbig">
<input type="reset" name="next" value="Zurücksetzen" class="farbig">
<input type="button" name="print" value="Drucken" class="farbig" onClick="javascript:window.print()">
</div>-
Hi,
<label>Vorname</span>
Das war wohl nix ...
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
<label>Vorname</span>
Du wachsames Auge!
Vielen Dank!cu,
AndreasThomäs
-
-
-
-
-
Leider hat auch das nicht wirklich was gebracht. Ich habe nun die Pixelangaben mit drin und von Position:absolute; auf relative umgestellt. Damit scheinen zumindest die Angaben in Top teilweise zu stimmen.
Versuche mit Clear und Float in Left und Right blieben allerdings ohne Erfolg. Auch wenn ich die Width noch mit ins Spiel bringe wird es nicht besser. Es sieht immer noch alles ziemlich verworren aus.
Ich möchte keine fertige Lösung präsentiert haben, nur eine kleine sinnvolle Erklärung warum es so, wie ich es mache nicht gehen kann...
Danke
Thomäs<body>
<div align="center" style="height:60;">
<h1 class="farbig">Kontaktformular</h1>
<p class="anno">Mit diesem Formular können Sie uns erreichen.</p>
<!--in diesem container sollen die formularfelder positioniert werden-->
<div style="top:65px;" align="center">
<span class="td" style="position:relative;left:20px;top:10px;float:left;width:30px;">Vorname</span><input type="text" name="VName" value="" size="20" MaxLength="40"class="farbig" style="position:relative;left:120px;top:10px;width:121;">
<span class="td" style="position:relative;left:20px;top:37px;float:left;width:30px;">Name</span><input type="text" name="Name" value="" size="20" MaxLength="40"class="farbig" style="position:relative;left:120px;top:37px;width:121;">
<span class="td" style="position:relative;left:260px;top:8px;float:left;width:30px;">E-Mail</span><input type="text" name="SenderMail" value="" size="20" MaxLength="40"class="farbig" style="position:relative;left:360px;top:8px;width:121;">
<span class="td" style="position:relative;left:260px;top:35px;float:left;width:30px;">Homepage</span><input type="text" name="Homepage" value="" size="20" MaxLength="40"class="farbig" style="position:relative;left:360px;top:35px;width:121;">
<span class="td" style="position:relative;left:20px;top:78px;float:left;width:30px;">Ihr Text</span><textarea name="Text"class="farbig" cols="15" rows="5" style="position:relative;left:120px;top:78px;width:361;"></textarea>
</div>-
Hi!
Leider hat auch das nicht wirklich was gebracht. Ich habe nun die Pixelangaben mit drin und von Position:absolute; auf relative umgestellt. Damit scheinen zumindest die Angaben in Top teilweise zu stimmen.
Ich sprach aber von der Standard-Einstellkung static. Lass die Finger von position: - vergiss am besten, dass es diese CSS-Regel gibt.
Versuche mit Clear und Float in Left und Right blieben allerdings ohne Erfolg. Auch wenn ich die Width noch mit ins Spiel bringe wird es nicht besser. Es sieht immer noch alles ziemlich verworren aus.
Lass mal die Positionierung weg. Könnte dann schon besser aussehen.
Ich möchte keine fertige Lösung präsentiert haben, nur eine kleine sinnvolle Erklärung warum es so, wie ich es mache nicht gehen kann...
position:absolut/relative nehmen die Elemente aus dem Fluss, so dass sie sich gegenseitig in Position und Größe nicht mehr beeinflussen. Dies wird jedoch von float benötigt (vereinfachend).
P.S.: Komm weg von inline-Styles (style="...") und kümmer dich mal um zentrale Formatierungen.
Gruß aus Iserlohn
Martin
-
Hallo Nochmals
Ich sprach aber von der Standard-Einstellkung static. Lass die Finger von position: - vergiss am besten, dass es diese CSS-Regel gibt.
Verstehe. Ich habe den Befehl nun mal komplett rausgeworfen und siehe da, es wurde zumindest etwas besser. Aber es sind nun immer noch Umbrüche nach den Labels vorhanden. Ich werde also etwas mit Clear und Float "spielen"
position:absolut/relative nehmen die Elemente aus dem Fluss, so dass sie sich gegenseitig in Position und Größe nicht mehr beeinflussen. Dies wird jedoch von float benötigt (vereinfachend).
das werde ich mir noch ein paar mal durchlesen müssen, bis ich es verstanden habe...:-)
P.S.: Komm weg von inline-Styles (style="...") und kümmer dich mal um
Ich benutze grundsätzlich NUR externe CSS-Dateien, um alles zentral zu formatieren. In diesem Fall wollte/musste ich es der Einfachheit halber aber so machen, da ich den Code selbst generiere und es sich innerhalb einer Seite leicht liest...
-
Hi,
position:absolut/relative nehmen die Elemente aus dem Fluss, so dass sie sich gegenseitig in Position und Größe nicht mehr beeinflussen.
Falsch. position:relative nimmt Elemente NICHT aus dem Fluß, und ein relativ positioniertes Element beeinflußt durchaus nachfolgende Elemente, da ja der Platz für das Element an der Stelle reserviert wird, wo es mit position:static läge, auch wenn es dann um die bei left/top/right/bottom gegebenen Werte verschoben wird ...
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hi,
Hi!
Falsch. position:relative nimmt Elemente NICHT aus dem Fluß, und ein relativ positioniertes Element beeinflußt durchaus nachfolgende Elemente, da ja der Platz für das Element an der Stelle reserviert wird, wo es mit position:static läge, auch wenn es dann um die bei left/top/right/bottom gegebenen Werte verschoben wird ...
Man lernt nie aus...
Gruß aus Iserlohn
Martin
-
-
-
-
-
Der Einfachheit halber sende ich nochmals kurz den Code der 4 Formularfelder samt Beschriftung:
<label class="td" style="left:20px;top:10px;float:left;clear:left;">Vorname</span><input type="text" name="VName" value="" size="20" MaxLength="40"class="farbig" style="left:120px;top:10px;width:121;margin-left:1em;">
<label class="td" style="left:20px;top:37px;float:left;clear:left;">Name</span><input type="text" name="Name" value="" size="20" MaxLength="40"class="farbig" style="left:120px;top:37px;width:121;margin-left:1em;">
<label class="td" style="left:260px;top:8px;float:left;clear:left;">E-Mail</span><input type="text" name="SenderMail" value="" size="20" MaxLength="40"class="farbig" style="left:360px;top:8px;width:121;margin-left:1em;">
<label class="td" style="left:260px;top:35px;float:left;clear:left;">Homepage</span><input type="text" name="Homepage" value="" size="20" MaxLength="40"class="farbig" style="left:360px;top:35px;width:121;margin-left:1em;">Vielleicht können wir anhand dieser 4 Felder aufklären, wie ich vorgehen muss, oder was ich noch ändern muss, damit es so aussieht, wie es aussehen soll?
Wie man vielleicht schon am Code erkennen kann, sind 2 Felder Links und rechts daneben die anderen beiden. In meinem Browser sind aber nach diesem Code alle alle Labels links von Ihren Felder (soweit so gut) aber das 3 und das 4 Feld sind unter dem 2 Feld angeordnet. Da passt also was nicht...
-
Hallo,
<label class="td" style="left:20px;top:10px;float:left;clear:left;">Vorname</span>
Immer noch falsche Paarung: label geöffnet, span geschlossen.
Die Angaben left und top sind auch noch übriggeblieben. Dadurch, dass die position-Angabe jetzt weggefallen ist, sind sie zwar wirkungslos, stören aber beim Lesen. ;-)<input type="text" name="VName" value="" size="20" MaxLength="40"class="farbig" style="left:120px;top:10px;width:121;margin-left:1em;">
Auch hier wieder die verwaisten left- und top-Angaben; bei der Breite fehlt noch die Einheit. Der margin ist _sehr_ knapp bemessen, aber das kann man zum Schluss noch tunen.
Für die restlichen drei Label/Input-Paare glit entsprechendes.
Wie man vielleicht schon am Code erkennen kann, sind 2 Felder Links und rechts daneben die anderen beiden.
Nö, woran sollte man das erkennen?
Aaah, an den wirkungslosen left- und top-Angaben?In meinem Browser sind aber nach diesem Code alle alle Labels links von Ihren Felder (soweit so gut) aber das 3 und das 4 Feld sind unter dem 2 Feld angeordnet.
Natürlich. Dass du das ganze Schema mehrspaltig haben wolltest, ist eine neue Forderung, die das Ganze wieder komplizierter macht. Versuch doch erstmal die einfache Variante, dann sehen wir weiter! ;-)
So long,
Martin
--
Wenn du beim Kochen etwas heißes Wasser übrig hast, friere es ein.
Heißes Wasser kann man immer gebrauchen.
Schon Urlaubspläne für 2006?
-