 |
Die letzten 5 Postings in diesem Thema » Alle anzeigen
| von c3o |
Das wichtige daran ist eigentlich nur, dass der Nebeneinander-Effekt mit einem float:left auf den Beschriftungen erzeugt wurde.
<label> ist ein selten genutzter Tag, der hier aber von der Logik her wunderbar gepasst hat. Ansich hätte es aber auch ein <div> oder sonstwas sein können. Netter Nebeneffekt: wenn man auf die Beschriftung klickt, wird das dazugehörige Eingabefeld aktiviert.
Die <p> um die Eingabefelder herum sind ausschließlich für die Strict-Standardardkompatibilität nötig. Der Standard besagt, dass Fließtext und alles was dazu gehört, auch Eingabefelder, nicht einfach so im <body> herumkugeln dürfen.
Das * { -moz-box-sizing:border-box; box-sizing:border-box } ist ein Trick, um einem IE5-Bug zu begegnen.. ist in diesem Fall aber eh nicht wirksam, hätte man weglassen können.
Ansonsten müsste alles recht logisch nachvollziehbar sein.
HTH
c3o |
| von HerrRossi |
Lieber c3o ! 
*sprachlos bin* D a n k e ! ! ! !
Also daß ich so schnell eine so kompetente Antwort bekomme, hätte ich nicht erwartet. Und das Ganze ist sogar noch valide! Da fehlen mir echt die Worte jetzt. Von anderen Foren bin ich ja gewöhnt, daß ich statt konstruktiver Antworten nur dumme Anmachen und blöde Meldungen bekomme.
Danke, daß Du Dir diese Mühe gemacht hast. Werd mich jetzt so schnell als möglich mit Deinem Code beschäftigen - damit mir ein Licht aufgeht. Hatte es bisher echt nicht geschafft, das Ergebnis so hinzubekommen. Schon gar nicht valide.
Herr Rossi ernennt c3o zum KOCA !  ( King of competent answers ) 
Ich wußte ja, warum ich in diese Community gewechselt bin. *g*
Liebe Grüße nach Graz von einem Landsmann aus Wien
Herr Rossi 
PS : Sollt ich je nach Graz kommen - da steht ein Bier dafür!!! |
| von c3o |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="">
<style type="text/css">
<!--
* { -moz-box-sizing:border-box; box-sizing:border-box }
body {
background-color:#8393CA;
color:black;
font-family:Verdana,Helvetica,Arial,sans-serif;
font-size:80%;
}
#blauebox {
margin-top:100px;
margin-left:100px;
width:680px;
background-color:#B0C0F7;
padding:20px;
}
form {
border:1px dashed #000;
padding:10px 20px;
}
label {
width:190px;
float:left; clear:left;
border:1px solid #000;
background-color:#FDC689;
text-align:center;
padding:3px;
margin-bottom:3px;
margin-right:25px;
}
input {
font-family:Verdana,Helvetica,Arial,sans-serif;
font-size:1em;
}
input.text {
width:370px;
border:1px solid #000;
background-color:#FFE4A7;
padding:3px;
margin-bottom:3px;
}
input.submit {
width:190px;
border:1px solid #000;
background-color:#FFF;
font-weight:bold;
padding:3px;
}
//-->
</style>
</head>
<body>
<div id="blauebox">
<form action="#" method="get">
<p><label for="vorname">Dein Vorname</label><input class="text" type="text" size="60" id="vorname" name="vorname"></p>
<p><label for="familienname">Dein Familienname</label><input class="text" type="text" size="60" id="familienname" name="familienname"></p>
<p><label for="stadt">Deine Stadt</label><input class="text" type="text" size="60" id="stadt" name="stadt"></p>
<p><input class="submit" type="submit" value="Abschicken"></p>
</form>
</div>
</body>
</html>
|
|
| von HerrRossi |
Grüß Euch!
Ich habe jetzt seit bald 2 Wochen ein Problem, wo mir zwar schon viele Leute viele Ratschläge gegeben haben, einen Lösungsansatz habe ich bis dato aber nicht. Vielleicht kann mir HIER ja wer helfen.
Es geht um Folgendes :
Ich möchte eine html-Seite schreiben, auf der unter anderem ein Formular ausgegeben werden soll, das genau so aussehen soll wie auf diesem Bild.
Wichtig ist - die Rechtecke um die Bezeichnungen sowie die rechteckigen Eingabefelder sollen gleich hoch und auf der selben Linie sein.
Die Felder sind natürlich CSS-formatiert. Egal, ob im Code selbst oder in einer ausgelagerten CSS-Datei. Es wäre mir auch egal, ob dazu eine unsichtbare Tabelle verwendet wird oder nicht.
Nur eines muß unbedingt erfüllt sein - und daran scheitere ich eben :
Vor dem <html> Tag der Seite MUSS ein
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
stehen. Und ich habe es bis jetzt nicht geschafft, unter der Bedingung ein Formular zu bekommen, daß so aussieht wie auf dem Bild im Link. 
Kann mir vielleicht wer helfen und einen Denkansatz geben oder ist wer so begeisterter html-Autor, daß er mir den Code schreiben könnte?
Ich bin für jede Hilfe dankbar!
Liebe Grüße
Herr Rossi |
|
|
|
