nicht angemeldet
Formularpositionierungsprobleme mit CSS
Hallo!
Folgendes Problem bewegt mich zu diesem Post:
Ich habe ein Formular mit mehreren Text Input Feldern die teilweise in einer Zeile stehen.
Nun möchte ich, dass diese Felder aneinander ausgerichtet sind.
Leider verhalten sich einige Felder aber überhaupt nicht so, wie ich diese in CSS definiert habe (wollte?!?).
Das Feld "geburtsdatum" bricht selbsständig in eine neue Zeile?!?
Im IE bricht das Feld "geschlecht" ebenfalls in eine neue Zeile?!?
Sämtliche Felder, die an zweiter Position in einer Zeile stehen übernehmen die Werte die Ihnen gegeben worden sind nicht?!?
Währe froh wenn mir jemand mit dem Zaunpfahl winken könnte um mir zu zeigen wo hier mein Denkfehler liegt...
Quelltext:
<h2>Gratis Broschüren Bestellung!</h2>
<p>Bitte fülle die nachfolgenden Felder aus und du erhälst in den nächsten Tagen unsere Broschüre per Post zugesandt.</p>
<form action="<?php print $_SERVER['PHP_SELF']; ?>" method="post">
<label for="vorname" style="float:left; text-align:right; width:90px; margin-right:5px;">Vorname:</label><input type="text" name="vorname" width="150px" style="background-color:#B4D1E9;"/>
<label for="nachname" style="text-align:right; width:90px; margin-right:5px;">Nachname:</label><input type="text" name="nachname" width="150px" style="background-color:#B4D1E9;"/>
<p><label for="adresse" style="float:left; text-align:right; width:90px; margin-right:5px;">Adresse:</label><input type="text" name="adresse"style="background-color:#B4D1E9; width:360px;"/></p>
<label for="plz" style="float:left; text-align:right; width:90px; margin-right:5px;">PLZ:</label><input type="text" name="plz" width="150px" style="background-color:#B4D1E9;"/>
<label for="ort" style="text-align:right; width:90px; margin-right:5px;">Ort:</label><input type="text" name="ort" width="150px" style="background-color:#B4D1E9;"/>
<p></p>
<label for="tel" style="float:left; text-align:right; width:90px; margin-right:5px;">Tel:</label><input type="text" name="tel" width="150px" style="background-color:#B4D1E9;"/>
<label for="email" style="text-align:right; width:90px; margin-right:5px;">E-Mail:</label><input type="text" name="email" width="150px" style="background-color:#B4D1E9;"/>
<p></p>
<label for="geburtsdatum" style="float:left; text-align:right; width:90px; margin-right:5px;">Geboren am:<input type="text" name="geburtsdatum" width="150px" style="background-color:#B4D1E9;"/>
<label for="geschlecht" style="text-align:right; width:90px; margin-right:5px;">Geschlecht:</label><input type="radio" name="geschlecht" value="Männlich" />Männlich<input type="radio" name="sexus" value="Weiblich" />Weiblich
<p align="center" style="clear:both;"><input type="submit" value="Senden" align="middle"/><input type="reset" value="Zurücksetzen" align="middle"/></p>
</form>
Danke + Lg.
Lukas
Anbei mal der Link zur Online Testversion: http://www.schaufler.cc/c4y/Bestellen.php
-
Hi Lukas!
Beim schnellen Überfliegen fiel mir folgende Zeile auf:
<label for="geburtsdatum" style="float:left; text-align:right; width:90px; margin-right:5px;">Geboren am:<input type="text" name="geburtsdatum" width="150px" style="background-color:#B4D1E9;"/>Ich hoffe, ich konnte helfen.
Genrell solltest du deinen Code validieren, bevor du weitere Fragen stellst.
MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)-
Genrell solltest du deinen Code validieren, bevor du weitere Fragen stellst.
Tut mir leid, dass hab im Eifer das Gefechts leider total vergessen...
So -nun schreit der W3C Validator nicht mehr und "geburtsdatum", so wie "geschlecht" machen keinen Zeilenumbruch mehr.Das Problem mit der Positionierung der 2ten Elemente in einer Zeile bleibt leider bestehen.
Bitte entschuldigt, den Validator nicht vorher benutzt zu haben.
Würde mich freuen, trotz meines Schnitzers, noch eure Hilfe in Anspruch nehmen zu dürfen...Lg.
Lukashttp://www.schaufler.cc/c4y/Bestellen.php
-
Hi Lukas!
Das Problem mit der Positionierung der 2ten Elemente in einer Zeile bleibt leider bestehen.
Das kann ich nicht nachvollziehen. Es sieht doch anscheindend alles so aus, wie von dir gewollt, oder nicht?
Was meinst du mit
Sämtliche Felder, die an zweiter Position in einer Zeile stehen übernehmen die Werte die Ihnen gegeben worden sind nicht?!?
?
Klingt eher nach einem Fehler in deinem PHP-Code.
MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)-
Was meinst du mit
Sämtliche Felder, die an zweiter Position in einer Zeile stehen übernehmen die Werte die Ihnen gegeben worden sind nicht?!?
Die Textfelder "nachname", "ort, "email" und das Radio Button Feld "geschlecht" sollten auch aneinander Ausgerichtet (in einer Höhenlinie) sein - genauso wie die Textfelder "vorname", "adresse", "plz", "tel" und "geburtsdatum"
Gemacht habe ich das über die vorhergehende Label Elemente durch style="text-align:right; width:90px; margin-right:5px;"
Sprich ein 90px breites Feld in dem der rechtsbündige Text sitzt und einen Außenabstand von 5px nach rechts hat.
Somit sind alle Label Felder gleich lang und der Aufbau der Textfelder erfolgt in einer (gedachten) Höhenlinie - dies funktioniert aber eben nur in den Textfeldern "vorname", "adresse", "plz", "tel" und "geburtsdatum".
Die darauffolgenden Elemente ("nachname", "ort, "email" und das Radio Button Feld "geschlecht") sollten sich vom vorhergegangenen Textfeld (mit einem 90px breitem Label dazwischen) positionieren.
-
Hi Lukas!
Jetzt habe ich dich verstanden. ^^
Versuche ein display:block; für das label-Element.
MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)-
Versuche ein display:block; für das label-Element.
Hallo Hopsel!
Danke für den Tipp - habe ich schon versucht, jedoch kommt dadurch nach <label></label> ein Zeilenumbruch zu stande (jedoch nur bei den Texteingabefeldern die als 2ter in einer Zeile stehen).
Die zur Verfügung stehende Gesamtbreite für das Formular sind 645px womit ein automatischer Zeilenumbruch nicht in frage kommen kann?!?
2 x 90px (Label)
2 x 150px (Texteingabefelder)-
Hi Lukas!
Aber ohne display:block; nutzt die Breitenangabe für das label-Element absolut nichts.
Dann kannst du es höchstens noch mit relatvier Positionierung versuchen.
MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)-
Aber ohne display:block; nutzt die Breitenangabe für das label-Element absolut nichts.
Aber warum verhalten sich die Labels, die am Anfang einer Zeile stehen im IE und FF richtig?!?
Dann kannst du es höchstens noch mit relatvier Positionierung versuchen.
Danke - wird wohl nichts anderes übrig bleiben
-
Hi Lukas!
Aber warum verhalten sich die Labels, die am Anfang einer Zeile stehen im IE und FF richtig?!?
Was sollen sie denn tun?
Logischer Weise stehen sie linksbündig in einer geraden Linie am linken Rand. Warum sollten sie "falsch" (also versetzt) angezeigt werden.
Hat schon alles seine Richtigkeit. :)MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)-
Was sollen sie denn tun?
Logischer Weise stehen sie linksbündig in einer geraden Linie am linken Rand. Warum sollten sie "falsch" (also versetzt) angezeigt werden.
Hat schon alles seine Richtigkeit. :)Na ja - weil Sie alle Rechtsbündig ausgerichtet sind mit einer geraden Linie am rechten Rand - was ja auch meine Absicht war/ist....
Nur die nachfolgenden Labels (sofern Sie in der selben Zeile stehen) wollen sich nicht wie angegeben ausrichten...Lg.
Lukas
-
-
-
-
-
-
-
-
-