Elemente nebeneinander positionieren

[lars7]

Hallo,

ich habe eine wirklich peinliche Anfängerfrage:

Ich arbeite gerade an einem Formular zur Registrierung, welches Ajax benutzt. Dieses Formular befindet sich innerhalb eines positionieren "CSS-Feldes". Um die einzelnen Eingabefelder hübsch nebeneinander darzustellen, habe ich eine Tabelle gewählt, die sich in dem CSS-Feld befindet. Eine Zeile beinhaltet jeweils 5 Spalten (Beschriftung, InfoIcon, Eingabefeld, ZustandsIcon, Fehlermeldungsfeld).

Beispiel: Username, InfoIcon, Eingabefeld, UserfreiIcon oder FehlermeldungNichtFrei

Was mich dabei jedoch genervt hat, war, dass sich je nach dem, was ein oder ausgeblendet wurde, die Tabelle etwas verschoben hat. Bspw entweder wurde der UserFreiIcon angezeigt oder die Fehlermeldung, dass der Username nicht frei sei, und dadurch schob sich die Tabelle immer ein bisschen nach links oder rechts. Außerdem hatte ich gelesen, dass Tabellen nicht empfehlenswert für das Design einer Page sein.

Nun wollte ich es ohne probieren. Erst versuchte ich eine neue CSSKlasse (einen Bereich) zu erstellen, die ich innerhalb meines ersten CSSFeldes positionieren wollte, um eine feste Stelle für die ehemalige Tabelle zu haben, aber das klappte nicht ganz. Dann kam ich auf die Idee, dass ich -statt einer Tabelle - ja auch einfach den Text runterschreiben könnte. Dann würde ja alles nebeneinanderstehen, wie es sollte. Das klappt aber nun überhaupt nicht! Hinter jedem Element sind Zeilenumbrüche, dabei soll doch einfach alles nur NEBENEINANDER dargestellt werden.

hier mal ein Beispiel:

ehemalige Tabellenspalte

                    <td align="right">Emailaddress</td>
                    <td id="quEmail" title="Emailaddress" onClick="info()"></td>
                    <td><input id="email" type="text" class="inputFieldLonger" name="email1" maxlength="50" onChange="checkEmail()"></td>
                    <td id="answer_email_img" style="display:none"><img src="<spring:url value="/static/images/ok.gif" htmlEscape="true" />" height="20" alt="ok"/></td>
                    <td id="answer_email"></td>

Versuch ohne Tabelle

          Username <span class="ui-icon ui-icon-info" id="quUsername" title="Username" onClick="info()"></span>
           <input id="username" type="text" class="inputFieldLonger" name="username" maxlength="30" onChange="checkUsername()">
           <img id="answer_username_img" style="display:none" src="<spring:url value="/static/images/ok.gif" htmlEscape="true" />" height="20" alt="ok"/>
           <span id="answer_username"></span>

Ohne Tabelle sind hinter jedem Element Zeilenumbrüche. Dabei will ich doch nur den Text neben das Bild, dann ein Eingabefeld und dann eine Statusmeldung oder noch ein Bild ausgeben. Habe schon versucht jedes Element in ein span zu packen, weil ich dachte, dass dort angeblich keine Zeilenumbrüche gemacht werden, aber das ging auch nicht.

Ist meine Idee vielleicht eine schlechte Idee und sollte ich lieber bei der Tabelle bleiben? Oder habt ihr andere Erfahrungswerte? Ich kann schlecht jede einzelne Zeile per CSS positionieren, oder?

Vielen Dank :-)

 

[Elroy]

Ich arbeite gerade an einem Formular zur Registrierung,

Hallo.

Was hälst du von der Idee dein Formular einfach als Formular auszuzeichnen. Eine Tabelle ist dann nicht mehr nötig.
Wie man ein Formular erstellt kannst du hier lernen.

Gruss
Elroy

 

[lars7]

wie meinst du das? meine ehemalige Tabelle und auch der Text oben waren natürlich in einem Formular drin?

<form id="register" class="text" action="${pageContext.request.contextPath}/register" method="post" onSubmit="return checkBeforeSubmit()">

....

</form>

 

[lars7]

habe mir das nochmals angeschaut. was ich noch nicht kannte, war <fieldset>, aber das hat mir auch nicht geholfen

      <fieldset>
                <label for="username">Username</label>
                <span class="ui-icon ui-icon-info"></span>
                <input id="username" type="text" class="inputFieldLonger" name="username" maxlength="30" onChange="checkUsername()">
                <img id="answer_username_img" style="display:none" src="<spring:url value="/static/images/ok.gif" htmlEscape="true" />" height="20" alt="ok"/>
                <span id="answer_username"></span>


            </fieldset>

es sind immer noch zeilenumbrüche durch die bilder drin.....:-(

 

[lars7]

kann mir denn niemand helfen? das kann doch nicht sein! ich möchte doch einfach nur text - icon - eingabefeld - icon/text nebeneinander haben, ohne dass es ständig hin und herwackelt, wenn etwas davon ein oder ausgeblendet wird! :-(

Bitte um Hilfe!

:-)

 

[lars7]

ich habe die lösung, sie lautet css : float!