wooty: Anfängerproblem mit <input>-Feldern auf unterschiedlichen Höhen.

Hallo liebe Forumnutzer. Ich bin heute frisch in HTML eingestiegen und habe schon ein Problem wo meine Google-ei mich nichtmehr weiterbringt. Ich habe zunächst versucht ein Login-Modul zu entwerfen, es sollte noch nicht funktionieren aber zumindest die Optik sollte identisch sein. Ich weiß nicht ob das jetzt unbedingt angebracht ist, aber um euch meine Lage erstmal darzulegen hier der Quelltext der "Seite".

<head>
    <title>Erster Versuch</title>

<style type="text/css">
        h1{
            color:#0081BC;
            font:normal small-caps 24pt 80%;
            font-family:impact
           }

#login {
            width:300px;
            height:55px;
            background-image:nachmpool.jpeg;
            color:#000000;
            font:10pt;
            font-family:franklin gothic medium;
            border:2px medium black thin groove;
            padding:2px
                    }

}
   </style>

</head>

<body bgcolor="CCFF99">

<h1 align="center">Herzlich Willkommen auf meiner st&uuml;mperhaften Seite!</h1>
   <div id="login">
    <p>Login:
     <input name="login" type="text" size="20" maxlength="60" >
     <br/> Passwort:<input name="login" type="text" size="20" maxlength="60">
    </p>
   </div>

</body>
</html>

Ich möchte das Eingabefeld unbedingt auf der Höhe mit dem jeweiligen Namen des Feldes haben, aber die Eingabefelder sollen wie mit dem Tabulator eingerückt auf einer Höhe stehen. Habe es bereits mit drei erzwungenen Leerzeichen versucht ; 2 pixel abweichung ca.. Gibt es eine Möglichkeit die beiden auf eine Höhe zu bringen bzw. eine ganz andere (elegantere) Möglichkeit diese Loginfelder zu gestalten?

Mit freundlichen Grüßen,
Wooty

  1. Ich weiß nicht ob das jetzt unbedingt angebracht ist, aber um euch meine Lage erstmal darzulegen hier der Quelltext der "Seite".

    Ein Onlinebeispiel mit Link wäre besser ;)

    Aber da fehlt etwas: Der Doctype und das öffende HTML-Element.

    <head>
        <title>Erster Versuch</title>

    <style type="text/css">
            h1{
                color:#0081BC;
                font:normal small-caps 24pt 80%;

    Punkt bei einem Screendesign sind idR. unsinnig - px oder em sind z.B. zielführender.

    font-family:impact

    Den optionalen Strichpunkt am Ende solltest du dir angewöhnen.

    }

    #login {
                width:300px;
                height:55px;
                background-image:nachmpool.jpeg;

    url() fehlt um den Bildpfad.

    color:#000000;
                font:10pt;

    wieder "pt"

    font-family:franklin gothic medium;

    Hochkommata um die Schriftfamilie.

    border:2px medium black thin groove;
                padding:2px
                        }

    }
       </style>

    </head>

    <body bgcolor="CCFF99">

    Weg damit, das kann auch ins CSS:

    <h1 align="center">Herzlich Willkommen auf meiner st&uuml;mperhaften Seite!</h1>

    align="center" kann weg, ab ins CSS damit - text-align ist dein Freund.

    Das ü selbst kannst du ausschreiben, bennannte Referenzen sind nur für die HTML-Steuerzeichen notwendig (" ' < > und &) - am besten du gewöhnst dir hier an, diese immer zu maskieren (auch wenn es unter bestimmten voraussetzung nicht erforderlich ist).

    <div id="login">

    Das div-Element möchte so gerne ein form-Element sein.

    <p>Login:
         <input name="login" type="text" size="20" maxlength="60" >
         <br/> Passwort:<input name="login" type="text" size="20" maxlength="60">
        </p>

    Das p-Element kannst du dir schenken, hier kannst du ein fieldset-Element und ggf. ein legend-Element verwenden. Das br-Element ist nicht erforderlich, weg damit. Das Wort "Login" und das wort "Passwort" kannst du in label-Element hüllen.

    </div>

    </body>
    </html>

    Ich möchte das Eingabefeld unbedingt auf der Höhe mit dem jeweiligen Namen des Feldes haben, aber die Eingabefelder sollen wie mit dem Tabulator eingerückt auf einer Höhe stehen. Habe es bereits mit drei erzwungenen Leerzeichen versucht ; 2 pixel abweichung ca.. Gibt es eine Möglichkeit die beiden auf eine Höhe zu bringen bzw. eine ganz andere (elegantere) Möglichkeit diese Loginfelder zu gestalten?

    Erst mal dein HTML in Ordnung bringen - mit den genannte korrekturen (insbesondere jenen am Forumlar selbst) ist die Basis für deine wünsche breits geschaffen, die Dinger dann zu formatieren ist dann einfach.

    1. Danke für die schnellen Tipps. Werde mich daran machen die Details durchzugehen. Doctype und einleitendes html tag hatte ich ursprünglich - das "ü" wird von meinem "HTML-Editor" automatisch umgewandelt, von daher ist mir da eine große Schwierigkeit generell genommen.

      Danke nochmals.
      Wooty

      1. Doctype und einleitendes html tag hatte ich ursprünglich

        Dann mal wieder rein damit :)

        • das "ü" wird von meinem "HTML-Editor" automatisch umgewandelt, von daher ist mir da eine große Schwierigkeit generell genommen.

        Wenn man deinen HTML-Editor nicht dazu bringen kann, das nicht zu tun: wirf ihn weg und nimm einen anderen. Notepad++ ist z.B. empfehlenswert.

        1. Hallo

          • das "ü" wird von meinem "HTML-Editor" automatisch umgewandelt, von daher ist mir da eine große Schwierigkeit generell genommen.

          Wenn man deinen HTML-Editor nicht dazu bringen kann, das nicht zu tun: wirf ihn weg und nimm einen anderen.

          Die Tatsache, dass Wooty den Namen des Editors in Anführungszeichen setzt, lässt mich vermuten, dass es Phase5 ist. Wenn das stimmt, lässt sich konstatieren, dass sich die Umwandlung der Umlaute abschalten lässt.

          Notepad++ ist z.B. empfehlenswert.

          FACK

          Tschö, Auge

          --
          Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
          Terry Pratchett, "Wachen! Wachen!"
          Veranstaltungsdatenbank Vdb 0.3