input Feld + Senden-Button exakt gleiche Breite ?

[Andreas_B.]

Hallo!

Wie schaffe ich es, das ein input-Formular wo man zb seinen Namen eingeben kann, genau exakt gleich breit wird, wie der Button darunter ?
Aber so dass es valide nach xhtml1.0 Strict bleibt!?

Ich mein, beim Feld gebe ich die Größe ja mit size= an, und beim Button aber mit width:
Möchte das aufs Pixel genau gleich hinbekommen.
Wie macht man denn sowas, ausser dem Button durch eine Grafik zu erstzen?
(möchte ich nicht, den hab ich mit CSS gestylet)

MfG Andre

 

[Frey]

Größe der Buttons+Felder

:arrow: Hast du das Formular schon geschrieben? Wenn ja, kannst du ja den Quellcode in deinen Beitrag mit einbinden.

Ich hätte das jetzt so gemacht:

<p><input style="WIDTH: 132px; HEIGHT: 22px" size=18 name=my_name></p>
<p><input style="WIDTH: 132px; HEIGHT: 22px" type=submit value="Hier der Button"></p>

Ps. Ist auch valide ;)

 

[Andreas_B.]

Hallo Frey!

Jaja, das Formular habe ich bereits fertig.

Also meine Eingabefelder sehen so aus:

<input class="contact" type="text" name="Name" value="" size="40" title="Name" maxlength="40" />

usw.

und der Button ist so eingebunden:

<input class="send" type="submit" name="submit" value="Abschicken" />

Class dazu:

.send {background: #ffffff; border: #000000; height: 18px; width: 300px border: 0px;}

Nun muss das ja irgendwie gehn, dass ich den Button oder eben das Feld auch anderes die Styleinfos zuordnen kann, so das ich sie exakt gleich breit hinbekomme?

 

[Prophet]

Entweder du Formatierst wie es Frey bereits gezeigt hat beides direkt über das Style-Attribut oder du machst es folgendermaßen:

input
{
   width:132px;
}

Damit werden dann alle Input-Elemente formatiert.

Du kannst natürlich auch sagen das die Width-Eigenschaften in beiden deiniert wird:

.contact, .send
{
   width:132px;
}

Aber ich verstehe dein Problem nicht ganz du hattest doch bereits zwei Klassen definiert. Du hättest doch gleich beiden die selbe Breite zuweisen können, oder?

Natürlich darf dafür nicht das Size-Attribut definiert sein da es sonst zum Konflikt zwischen CSS- und HTML-Informationen kommt.

Benutzt doch bitte die BBCodes 'Code' und 'HTML' wenn ihr Quelltext postet. Das erleichtert das Lesen und fördert die hilfsbereitschaft der Forenmitglieder. Ich habe sie jetzt nachträglich für euch eingefügt.

 

[Andreas_B.]

WICHTIG und OT:
@moderator:
Ich werde ständig ausgeloggt, kann mich dann nicht mehr einloggen, da steht immer PW falsch, was aber nicht stimmt, dann muss ich mir ein neues zusenden lassen, nachdem ich das eingebe kommt:
"Die Anfrage nach einem neuen Kennwort ist älter als 24 Stunden und damit nicht mehr gültig. Bitte wiederholen Sie mit diesem Formular Ihre Anfrage."
Was ist hier los?? :shock:

________

@Frey
Besten Dank!
Das ist ja cool. :)
So funktioniert es nun "fast".
Im FF ist alles bestens, bei IE ist das Formular dann trotzdem leider immer noch um ca. 1px kürzer als der Button.

@Prophet
Danke, aber wenn ich das Size-Attribut weglasse, ist es nicht mehr valide, pack ichs dazu, passt wieder alles.
Die Lösung von Frey ist also schon ganz gut.

 

[Prophet]

Das Size-Attribut ist Optional durch das weglassen wird deine Seite mitsicherheit nicht invalide.
http://de.selfhtml.org/html/referenz/attribute.htm#input

Wegen des Fehlers musst du mal eine E-Mail oder PN an der Administrator schicken. Im moment wird der Server umgestellt es könnte daher zu Fehlern kommen. Versuch es am besten morgen nochmal falls es nicht gehen sollte.

 

[Andreas_B.]

Hallo Prophet!

Da hast du natürlich recht.
War ein Fehler von mir, lag natürlich nicht an dem size=
Habe das nun weggelassen.

Gut, wie oben gesagt, einziges Problem ist nun "nur" noch, das im FF jetzt alles passt, aber das Eingabefeld im IE bleibt auch dadurch leider um ca. 1px zu lang. Habe bei beiden width:132px; drin - trotzdem, im IE ist einfach nicht exakt ok.