noe Geschrieben 12. Januar 2011 Geschrieben 12. Januar 2011 Hi! Ich bin ziehmlich neu im Gebiet Internet-programmierung und hab eine Frage zu PHP forms. Ich hab folgende forms in meinem html-body: <form method=post enctype=multipart/form-data action=processor.php onSubmit="return validatePage1();"> <ul class=mainForm id="mainForm_1"> <li class="mainForm" id="fieldBox_2"><label class="formFieldQuestion">age</label><textarea class=mainForm name=field_2 ...></textarea></li> <li class="mainForm" id="fieldBox_6"><label class="formFieldQuestion">Save Search As</label><input class=mainForm type=text name=field_6 ... li> ...weitere listenelemente ... JavaScript ... submit-button </form>[/PHP] Und ich würde es gerne so haben, dass label und textarea schön aligned sind, also links der label, rechts das Eingabefeld, so wie hier zum Beispiel: ........ Was ich aber erhalte ist ein ungleichmäßiger Abstand zwischen label und feld, je nach Größe des Felds/Labels. Kann mir jemand sagen wie man das im css file spezifizieren kann. Ich hab da schon einges versucht, mit dem position-attribut, oder dem float attribut, es kommt aber nicht so heraus wie ich es gern haben möchte. Vielen Dank im vorraus, Noe Zitieren
_n4p_ Geschrieben 12. Januar 2011 Geschrieben 12. Januar 2011 gib einfach allen labels eine feste breite, und zwar immer die gleiche Zitieren
Ueberdosis Geschrieben 13. Januar 2011 Geschrieben 13. Januar 2011 gib einfach allen labels eine feste breite, und zwar immer die gleiche nope... gibt den Labels die CSS-Eigenschaft "display: block;". Zitieren
noe Geschrieben 13. Januar 2011 Autor Geschrieben 13. Januar 2011 Funktioniert leider nicht - also die labels & Eingabefelder erscheinen nun untereinander. In Home ist zu sehen wie die Seite aussieht wenn man gar keine css einfügt, und wie sie aussieht wenn man display:block verwendet. Den labels eine feste Breite zu zuordnen funktioniert auch nicht - sieht aus als ob man gar keine css verwendet hätte. Zitieren
_n4p_ Geschrieben 13. Januar 2011 Geschrieben 13. Januar 2011 stimmt, ich hatte das float: left; vergessen. display: block; allerdings kann in dem fall gar nicht funktionieren, entweder führt es zu dem beschriebenen verhalten oder es ist überflüssig. bei den checkboxen ist noch zu beachten, das die zumindest im Firefox automatisch ein margin-left: 4px; bekommen. damit die auch genau ausgerichtet sind musst du für die checkbox also entweder margin-left: 0px; einstellen oder die breite des labels um 4px verringern. Zitieren
noe Geschrieben 13. Januar 2011 Autor Geschrieben 13. Januar 2011 Das hatte ich auch schon versucht, aber allein ein float:left; scheint nicht zu genügen, die label sind ja sowieso schon links, und bleiben da auch. Ich hab dann versucht auch die felder rechts zu befördern - wenn das funktionieren würde würd ich alles einfach in einem kleineren rechteck packen. Ich weiß aber nicht wie die Eingabefelder, als ganze bezeichnet werde. Bei folgender Spezifikation: label.formFieldQuestion { float: left; } label.formFieldOption { float: right; } input.formFieldStyle { float: right; } #formFields { float: right; } kommt folgendes raus: Home Zitieren
etreu Geschrieben 13. Januar 2011 Geschrieben 13. Januar 2011 Wenn du float verwendest, dann solltest du auch Gebrauch von clear machen. Ich favorisiere zur Zeit display:inline-block. Diese Eigenschaft wird allerdings erst ab IE7 unterstüzt. Wenn du also ältere Browser unterstützen must/willst, dann brauchst du entweder float (wobei manchmal eine umgekehrte Reihenfolge der Elemente im Markup hilfreich sein kann) oder probierst es über die position-Werte (ein Container wird relativ positioniert und die darin enthaltenen Element absolut. Letzteres funktioniert ganz gut, wenn du die Felder in Zeilen unterbringen kannst. Zitieren
_n4p_ Geschrieben 14. Januar 2011 Geschrieben 14. Januar 2011 ich weiß nich, ist es so schwer 2 informationen zusammenzusetzen? ich sprach von fester breite und hab später das float: left; ergänzt, von float right war keine rede. clear braucht man an der stelle nicht zwingend, weil sowieso alles in <li> geschachtelt ist. <html> <head> <title>Test</title> <style type="text/css"> <!-- .left { float: left; width: 200px; } .formFieldOption { margin-right: 8px; } .checkbox { margin-left: 0px; } --> </style> </head> <body> <ul id="mainForm_1"> <li id="fieldBox_4"> <label class="left">Star</label> <select id="field_4" name="field_4"> <option value=""></option> <option value="Any">Any</option> </select> </li> <li id="fieldBox_5"> <label class="left">With Photo</label> <span> <input type="radio" value="yes" id="field_5_option_1" name="field_5" class="checkbox"> <label for="field_5_option_1" class="formFieldOption">yes</label> <input type="radio" value="no" id="field_5_option_2" name="field_5" class="checkbox"> <label for="field_5_option_2" class="formFieldOption">no</label> </span> </li> <li id="fieldBox_6"> <label class="left">Save Search As</label> <input type="text" value="" size="20" id="field_6" name="field_6" class="mainForm"> </li> <li class="mainForm"><input type="submit" value="Submit" class="mainForm" id="saveForm"></li> </ul> </body> </html> ist nur mal fix hingeklatscht, aber ich hoffe es ist jetzt klar was ich sagen wollte ... Zitieren
noe Geschrieben 14. Januar 2011 Autor Geschrieben 14. Januar 2011 Es klappt zwar noch nicht, aber ich werd's mir genauer ansehn. Danke! Zitieren
_n4p_ Geschrieben 14. Januar 2011 Geschrieben 14. Januar 2011 also bei mir sieht das vorhin gepostete dann so aus wie im anhang Zitieren
noe Geschrieben 15. Januar 2011 Autor Geschrieben 15. Januar 2011 Funktioniert jetzt auch bei mir. Ich hatte der Einfachheit halber nicht alle Listeelemente gepostet und musste noch einpaar Sachen anpassen. Danke! Zitieren
Empfohlene Beiträge
Dein Kommentar
Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.