nicht angemeldet
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