Hallo,
wie kann ich das zweite Textfeld in diesem Formular vergrößern?
Wenn ich hier
line-height: 30px;
150 px statt 30 px nehme, werden beide Felder 150 px hoch,
aber ich brauche nur das zweite.
Danke
Hallo,
dafür musst du bei CSS mit Klassenselektoren oder mit weiteren ID-Selektoren arbeiten. Aber da du nichts weiter über deinen Quelltext verrätst, kann man dir auch schlecht weiter helfen!
Schöner ist auch, wenn man die CSS-Formatierungen auslagert und nicht in der HTML-Datei direkt angibt.
Gruß
Christa
nicht einfach einen Screenshot ins Forum kippt, der schlecht lesbar und noch schlechter durchsuchbar ist. Und ganz viel Zeug enthält, die für die Frage nicht relevant ist.
Sebastian
Man schraubt mit der Zeit die Ansprüche zurück!
Ich habe den Code mit diesem Tool generiert:
https://addressbin.com/tools/optin/
Deshalb ist es so schlecht formatiert, aber wenn man auf die Grafiken klickt kann man es ganz gut lesen.
Ich konnte schon alles anpassen was ich wollte, die Farben, Beschriftung, Größe usw., nur bei dem zweiten Feld komme ich nicht weiter.
Sonst gibt es keinen Code dazu, ich habe es einfach im html in eine Tabelle eingefügt.
Dann kopier doch mal den kompletten Text deiner HTML-Datei hierher. Damit das nicht als HTML interpretiert wird, benutze dieses Symbol zum Einfügen:
gefühlt sind übrigens 80 % des geposteten Codes absolut überflüssig, wozu braucht man eine solche aufwändige Formatierung für ein popliges Formular mit einem einzeiligen Eingabefeld (oder vielleicht auch mit zwei) und einem Sendebutton?
Das ist aus einem KotCode-Generator mit eingebautem AVS (Antiverstehsystem). Wo kämen wir denn hin, wenn jeder HTML verstünde? Dann würde niemand mehr solche Code-Mist-Seiten besuchen wollen …
Sebastian
1 Like
Danke, jetzt weiss ich warum der Code so chaotisch ist. Hier ist der Code, nur zur Info, aber es wird wahrscheinlich nichts bringen, wenn er absichtlich unlesbar gemacht wurde.
<style>
/* line 1, (__TEMPLATE__) */
#optin-form-outer {
line-height: 1;
/* HTML5 display-role reset for older browsers */ }
/* line 3, (__TEMPLATE__) */
#optin-form-outer, #optin-form-outer div, #optin-form-outer span, #optin-form-outer applet, #optin-form-outer object, #optin-form-outer iframe,
#optin-form-outer h1, #optin-form-outer h2, #optin-form-outer h3, #optin-form-outer h4, #optin-form-outer h5, #optin-form-outer h6, #optin-form-outer p, #optin-form-outer blockquote, #optin-form-outer pre,
#optin-form-outer a, #optin-form-outer abbr, #optin-form-outer acronym, #optin-form-outer address, #optin-form-outer big, #optin-form-outer cite, #optin-form-outer code,
#optin-form-outer del, #optin-form-outer dfn, #optin-form-outer em, #optin-form-outer img, #optin-form-outer ins, #optin-form-outer kbd, #optin-form-outer q, #optin-form-outer s, #optin-form-outer samp,
#optin-form-outer small, #optin-form-outer strike, #optin-form-outer strong, #optin-form-outer sub, #optin-form-outer sup, #optin-form-outer tt, #optin-form-outer var,
#optin-form-outer b, #optin-form-outer u, #optin-form-outer i, #optin-form-outer center,
#optin-form-outer dl, #optin-form-outer dt, #optin-form-outer dd, #optin-form-outer ol, #optin-form-outer ul, #optin-form-outer li,
#optin-form-outer fieldset, #optin-form-outer form, #optin-form-outer label, #optin-form-outer legend,
#optin-form-outer table, #optin-form-outer caption, #optin-form-outer tbody, #optin-form-outer tfoot, #optin-form-outer thead, #optin-form-outer tr, #optin-form-outer th, #optin-form-outer td,
#optin-form-outer article, #optin-form-outer aside, #optin-form-outer canvas, #optin-form-outer details, #optin-form-outer embed,
#optin-form-outer figure, #optin-form-outer figcaption, #optin-form-outer footer, #optin-form-outer header, #optin-form-outer hgroup,
#optin-form-outer menu, #optin-form-outer nav, #optin-form-outer output, #optin-form-outer ruby, #optin-form-outer section, #optin-form-outer summary,
#optin-form-outer time, #optin-form-outer mark, #optin-form-outer audio, #optin-form-outer video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
background: auto; }
/* line 25, (__TEMPLATE__) */
#optin-form-outer article, #optin-form-outer aside, #optin-form-outer details, #optin-form-outer figcaption, #optin-form-outer figure,
#optin-form-outer footer, #optin-form-outer header, #optin-form-outer hgroup, #optin-form-outer menu, #optin-form-outer nav, #optin-form-outer section {
display: block; }
/* line 28, (__TEMPLATE__) */
#optin-form-outer ol, #optin-form-outer ul {
list-style: none; }
/* line 30, (__TEMPLATE__) */
#optin-form-outer blockquote, #optin-form-outer q {
quotes: none; }
/* line 32, (__TEMPLATE__) */
#optin-form-outer blockquote:before, #optin-form-outer blockquote:after,
#optin-form-outer q:before, #optin-form-outer q:after {
content: "";
content: none; }
/* line 36, (__TEMPLATE__) */
#optin-form-outer table {
border-collapse: collapse;
border-spacing: 0; }
/* line 39, (__TEMPLATE__) */
#optin-form-outer input, #optin-form-outer select, #optin-form-outer button {
border: auto;
background: auto;
padding: auto; }
/* line 44, (__TEMPLATE__) */
#optin-form-outer input.text {
border: 1px solid #cccccc;
width: 92%; }
/* line 47, (__TEMPLATE__) */
#optin-form-outer input.text, #optin-form-outer input.submit {
margin-bottom: 20px;
border-radius: 3px;
font-family: inherit;
font-size: inherit; }
/* line 53, (__TEMPLATE__) */
#optin-form-outer input.text, #optin-form-outer input.submit, #optin-form-outer label {
line-height: 30px; }
/* line 56, (__TEMPLATE__) */
#optin-form-outer .preamble {
margin-bottom: 20px;
font-size: 20px;
font-weight: bold; }
<style>
/* line 1, (__TEMPLATE__) */
#optin-form-outer {
color: #444444;
font-family: "Arial", sans-serif;
line-height: 30px;
font-size: 16px; }
/* line 7, (__TEMPLATE__) */
#optin-form-outer input, #optin-form-outer label {
display: block;
padding: 0 5px; }
/* line 11, (__TEMPLATE__) */
#optin-form-outer input {
padding: 0 2%; }
/* line 14, (__TEMPLATE__) */
#optin-form-outer input.submit {
border: 1px solid #4b0;
border-top: 1px solid #bbbbbb;
box-shadow: 0px 0px 0px 1px #4b0;
background: #4b0;
color: white;
width: 96%;
text-shadow: 0 1px black;
font-weight: 400;
cursor: pointer; }
/* line 26, (__TEMPLATE__) */
#optin-form-outer label {
font-weight: bold;
text-shadow: 1px 1px white; }
<style>
/* line 2, (__TEMPLATE__) */
#optin-form-outer #optin-form-inner {
background: #eeeeee;
margin: 0px auto;
border-radius: 5px;
box-shadow: 0px 0px 1px 1px #cccccc;
border-top: 1px solid white;
padding: 20px; }
/* line 10, (__TEMPLATE__) */
#optin-form-outer input {
box-shadow: 0px 2px 3px 0 #dddddd; }
<div id="optin-form-outer"><div id="optin-form-inner"><form method="post" action=""><p class="preamble">Sign up for our newsletter</p><label for="name">Name</label><input class="text" name="name" type="text"><label for="email">Email Address</label><input class="text" name="email" type="text"><input class="submit" value="Subscribe Today" type="submit"></form></div></div>verdammt, wo bleibt der Rest meines Beitrags?? Ach, jetzt habe ich’s!
Neuer Versuch:
Du solltest die komplette HTML-Datei mit deinen Formatierungen einstellen, nicht nur Bruchstücke. Das Eingestellte ist auch noch falsch, 3x wird <style> geöffnet und nie geschlossen. Nach dem Korrigieren sieht das fertige HTML-Dokument so aus:
Aber es sind genau die Farben und die Texte von dem Generator, ich dachte, du konntest alles anpassen? Ich helfe zwar gern, aber nicht, wenn ich 5x nachfragen muss und eine Info nach der anderen aus der Nase ziehen muss!
Der Quelltext deines Generators hat 5508 Zeichen.
Mein handgeschriebener Quelltext, wo ich Teile der CSS-Formatierung übernommen habe, hat 434 Zeichen in der HTML-Datei und 743 Zeichen in der CSS-Datei.
Und so sieht ein Screenshot von meinem Formular aus (die Eingabefelder habe ich absichtlich deutlich schmaler gemacht, aber die Breite kann in der CSS-Datei festgelegt werden):
Im übrigen weiß ich nicht, wozu du das zweite Feld 5x so hoch wie das erste haben willst, denn es bleibt trotzdem ein einzeiliges Eingabefeld. Willst du etwas Mehrzeiliges haben, dann musst du das auch entsprechend im HTML-Quelltext angeben, da ändert eine Formatierung nichts!
1 Like
Danke, ich dachte wenn das Feld größer wird dann wird es auch automatisch mehrzeilig, ich kenne mich mit CSS nicht aus.
Ich dachte man muss nur eine Zeile im Code ändern, wo die Feldgröße festgelegt ist, Ich werde lieber bei html bleiben, wenn es so kompliziert ist.
Das ist nicht schlimm, schlimm finde ich nur, wie schwer du es dir damit tust, genau zu präzisieren, was du haben willst.
CSS ist auch nicht kompliziert, wenn man weiß, was man tut, aber die Sache mit dem mehrzeiligen Eingabefeld ist übrigens HTML und nicht CSS. Über CSS kann man die Anzeigehöhe ändern, aber die Tatsache, dass es ein mehrzeiliges Eingabefeld ist, wird in der HTML-Datei festgelegt!
Nur: so lange du nicht damit rausrückst, was du genau brauchst, kann dir auch keiner helfen! Wie gesagt, das HTML-Dokument und die CSS-Datei so, wie oben der Screenshot aussieht, habe ich fertig, dafür habe ich keine 10 Minuten gebraucht!