Cyberholli: css - Weite von Formularfeldern

SELF-Forum

css - Weite von Formularfeldern

Cyberholli
– Informationen zu den Bewertungsregeln

Hallo Ihr,

habe ein CSS-Formular, in welchem die Felder vor den Formulareingaben gleich weit sein sollen.
Klappt soweit auch.
Nur wenn ich die Schriftgröße in der Klasse "formtxt" größer als 1.2 em setze, erhalte ich eine unerwünschte Treppchenbildung.
Was kann ich machen, um auch mal größeren Text einsetzen zu können?

Viele Grüße
Cyberholli

Hier der Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Formular</title>
<style type="text/css">
<!--
body{text-align:center;}
.schrift {font-size: 14pt; font-family: Comic sans MS, Arial; }
#boxzentriert
{
 border:1px solid maroon;
 width: 60%;
 height:auto;
 margin:auto;
 text-align:left;
 background-color:yellow;

}

.formtxt
{
 border:1px solid maroon;
 width:30%;/**/
 font-family: Comic sans MS, Arial;
 font-size:1.2em;
 float:left;/**/

}
.txt
{
 border:1px solid maroon;
 /* width:30%;*/
 font-family: Comic sans MS, Arial;
 font-size:20px;
}

-->
</style>
</head>

<body>
<div id="boxzentriert">
<!--       <p class="schrift">Mustertext</p>
 -->
 <form method="GET" >
 <span class="formtxt">Betreff:</span>
 <input type="text" class="txt" name="betreff" ><BR>

<span class="formtxt">Name:</span>
 <input type="text" class="txt" name="n_name"  ><br>

<span class="formtxt">Vorname: *</span>
 <input type="text" class="txt" name="v_name" ><br>

<span class="formtxt">Geschlecht:</span>
 <select name= "geschlecht" class="txt" value="Anrede">
 <option>Herr
 <option>Frau   </select><br>
 </form>

</div>
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. css - Weite von Formularfeldern

    Griever
    – Informationen zu den Bewertungsregeln

    Hi.

    Welchen Browser benutzt du?

    MFG
    Griever

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. css - Weite von Formularfeldern

      Cyberholli
      – Informationen zu den Bewertungsregeln

      Hallo,

      habe es im Netscape 8, Firefox 1.5 und dem aktuellen Internet-Explorer betrachtet.

      Viele Grüße
      Cyberholli

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. css - Weite von Formularfeldern

        Griever
        – Informationen zu den Bewertungsregeln

        Hi.

        IE funktioniert aber prächtig. Mach mal ein Screenshot, von dem, was du meinst ...

        Den Webspace kriegst du gratis hier:

        Gwebspace.

        Kannst ruhig mein Konto verwenden. Das spart dir dann Zeit wegen der anmeldung.

        Username: ggriever
        Passwort: 99867

        Mit einem Screenshot ist das besser zu sehen.

        MFG
        Griever

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. css - Weite von Formularfeldern

          Cyberholli
          – Informationen zu den Bewertungsregeln

          Voilà,

          mit der freundlichen Unterstützung von Griver ist der Zusammenschnitt der Screenshots unter folgender URL zu betrachten:
          http://www.gwebspace.de/ggriever/1215.jpg

          Danke
          Cyberholli

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. css - Weite von Formularfeldern

            Griever
            – Informationen zu den Bewertungsregeln

            Hi.

            Nun ja. Was machen wird da denn? hm...

            Versuch es mal mit

              
float:left; /* Diese Angabe hattest du schon in ".formtxt" */  
clear:left; /* Diese Angabe ist ggf. die Lösung */

            Ich hoffe, dass ich dir weitergeholfen habe.

            Ach ja. Der Webspace kann ruhig für weitere Dateien genutzt werden. Solltest du zufällig hier wieder mal posten, kannst du ruhig darauf verweisen. Ist genug MB frei und ich kann ja immernoch veraltete Dateien killen.

            MFG
            Griever

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. css - Weite von Formularfeldern

              Cyberholli
              – Informationen zu den Bewertungsregeln

              Hallo Griever,

              habs auch schon mit "clear" versucht. Leider ergebnislos.

              Werde jetzt mal den Vorschlag vom Axel ausprobieren.

              Viele Grüße

              Cyberholli

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

  2. css - Weite von Formularfeldern

    Axel Richter
    – Informationen zu den Bewertungsregeln

    Hallo,

    Nur wenn ich die Schriftgröße in der Klasse "formtxt" größer als 1.2 em setze, erhalte ich eine unerwünschte Treppchenbildung.
    Was kann ich machen, um auch mal größeren Text einsetzen zu können?

    Hier der Quelltext:

    <style type="text/css">
    <!--

    ...

    .formtxt
    {
    border:1px solid maroon;
    width:30%;/**/
    font-family: Comic sans MS, Arial;
    font-size:1.2em;
    float:left;/**/
    }

    .txt
    {
    border:1px solid maroon;
    /* width:30%;*/
    font-family: Comic sans MS, Arial;
    font-size:20px;
    }

    -->
    </style>
    </head>

    <body>
    <form method="GET" >
    <span class="formtxt">Betreff:</span>
    <input type="text" class="txt" name="betreff" ><BR>

    Deine SPAN.formtxt sind mit float:left aus dem Textfluss genommen. Die Zeilenhöhe für das BR wird deshalb nur von den INPUTS bestimmt. Da die auf 20px Höhe festgelegt sind, ist eben die Zeile auch nur geringfügig höher. Dadurch passen, bei hohen SPAN.formtxt, eben manchmal mehr als eine Zeile neben ein SPAN.

    Du brauchst im FORM ein zeilenbildendes Element, welches das float:left wieder aufhebt.

    Einfache Lösung: Füge

    br {clear:left;}

    in Dein CSS ein.

    Solltest Du Interesse an besseren Lösungen haben, dann schau Dir mal meinen Vorschlag an.

      
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Formular</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
<!--  
* {  
 margin:0;  
 padding:0  
} /*gleiche Ausgangslage für alle Browser, wenn Abstände gewünscht, dann explizit setzen.*/  
  
body {  
 margin:1em;  
 text-align:center;  
}  
  
#boxzentriert {  
 border:1px solid maroon;  
 width: 60%;  
 margin:auto;  
 text-align:left;  
 background-color:yellow;  
} /*wenn die FORM der einzige Inhalt der Box ist, kann sie selbst die Box sein. Dann wäre das die CSS-Definition für form oder #formid, wenn die FORM eine ID bekommt.*/  
  
.formtxt {  
 border:1px solid maroon;  
 font-family: Comic sans MS, Arial;  
 font-size:1.5em;  
 display:block;  
 width:30%;  
 float:left;  
 margin-right:1ex;  
} /*eventuell kannst Du auf diese Klasse verzichten, wenn Du der FORM eine ID gibst und dann den Selector #formid label verwendest*/  
  
.txt {  
 border:1px solid maroon;  
 font-family: Comic sans MS, Arial;  
 font-size:20px; /*warum hier px?*/  
} /*eventuell kannst Du auf diese Klasse verzichten, wenn Du der FORM eine ID gibst und dann den Selector #formid input, #formid select verwendest*/  
  
form p {  
 clear:left;  
 margin:4px;  
} /*eventuell auch mit dem Selector #formid p*/  
-->  
</style>  
</head>  
  
<body>  
<div id="boxzentriert">  
<form action="#" method="GET">  
 <p><label class="formtxt" for="betreff">Betreff:</label>  
 <input type="text" class="txt" name="betreff" id="betreff"></p>  
  
 <p><label class="formtxt" for="n_name">Name:</label>  
 <input type="text" class="txt" name="n_name" id="n_name"></p>  
  
 <p><label class="formtxt" for="v_name">Vorname: *</label>  
 <input type="text" class="txt" name="v_name" id="v_name"></p>  
  
 <p><label class="formtxt" for="geschlecht">Geschlecht:</label>  
 <select name="geschlecht" id="geschlecht" class="txt">  
  <option>Herr</option>  
  <option>Frau</option>  
 </select></p>  
</form>  
</div>  
</body>  
</html>

    Bitte auch die Kommentare lesen.

    Auftretende Fragen können sicher hier geklärt werden.

    viele Grüße

    Axel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. css - Weite von Formularfeldern

      Cyberholli
      – Informationen zu den Bewertungsregeln

      Hallo Axel,

      danke, hast dir ja richtig Mühe gemacht.
      Einige Ideen sind mir noch fremd, was allerdings nichts zu sagen hat.
      Um Deinen Vorschlag richtig nachvollziehen zu können, werde ich mich am Wochenende in Ruhe und ein paar Tassen Kaffee darüber setzen.

      Darf ich mich bei Verständnisückfragen an Deine private e-mail-Adresse wenden?
      Wobei ich den Rest des Forums damit nicht ausschließen möchte.

      Viele Grüße
      Cyberholli

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. css - Weite von Formularfeldern

        Axel Richter
        – Informationen zu den Bewertungsregeln

        Hallo,

        Um Deinen Vorschlag richtig nachvollziehen zu können, werde ich mich am Wochenende in Ruhe und ein paar Tassen Kaffee darüber setzen.

        Gut.

        Darf ich mich bei Verständnisückfragen an Deine private e-mail-Adresse wenden?

        Nein, bitte nicht.

        Wobei ich den Rest des Forums damit nicht ausschließen möchte.

        Eben.

        viele Grüße

        Axel

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln