normale Schaltfläche ohne Rand?

[incaron]

Hallo zusammen,

ich würde gerne wieder meine Schaltflächen (ganz normale Buttons zur Absendung von Formulardaten) ohne überflüssigen Rand darstellen. D.h. bei einer normalen Darstellung, gibt es rechts und links Ränder, es geht aber auch ohne.
Ich hatte das mal, leider ist meine Dokumentation darüber verloren gegangen und ich suche nun wieder verzweifelt danach.

Vielleicht kennt ja noch jemand die Lösung.

MfG
incaron

[Christian Seiler]

Hallo incaron,

Ich hatte das mal, leider ist meine Dokumentation darüber verloren gegangen und ich suche nun wieder verzweifelt danach.

Verstehe ich Dich richtig, wenn Du <input type="submit" ...> und <input type="reset" ...> formatieren willst?

Das geht mit CSS:

input[type=submit], input[type=reset] {
  border: 0px;
}

das funktioniert so allerdings nur im Mozilla.

Wenn Du das im IE auch noch zum Laufen bringen willst, dann muss Dir klar sein, dass diese Formatierung für Buttons *und* Textfelder gelten wird:

input {
  border: 0px;
}

Notfalls kannst Du mit Klassen arbeiten:

<input class="button" type="submit" ...>
<input class="button" type="reset" ...>

input.button {
  border: 0px;
}

So hast Du zwar mehr Schreibarbeit im HTML-Code aber dafür klappt das im IE wie gewünscht.

Ob das allerdings so eine gute Idee ist, keinen Rahmen anzugeben... das verwirrt den Benutzer doch sicherlich, oder etwa nicht? (Du kannst natürlich eine *andere* Art Rahmen angeben)

Grüße,

Christian

[Incaron]

Hallo Christian,

danke für deine Antwort.

Hab mich vielleicht falsch ausgedrückt.
Ich möchte nicht, das ich keinen Rahmen habe, sondern ich möchte den überflüssigen Platz rechts und links vom Button weghaben.

Bei kurzen Texten z.b. "OK" hat man kaum Rand, jedoch bei längeren texten, z.b. "Domain prüfen" hat man einen ziemlich langen Rand.
Es ist möglich diesen Rand aufzuheben. Leider weiss ich nur nicht mehr wie.
Die Beispieldatei ist mir bei einem Datencrash verloren gegangen.

[Christian Seiler]

Hallo Incaron,

Bei kurzen Texten z.b. "OK" hat man kaum Rand, jedoch bei längeren texten, z.b. "Domain prüfen" hat man einen ziemlich langen Rand.
Es ist möglich diesen Rand aufzuheben. Leider weiss ich nur nicht mehr wie.

Du suchst vielleicht nach den CSS-Eigenschaften margin oder padding? Wenn nicht, dann skiziere mal per ASCII-Art genau, was Du meinst.

Also:

+---------------------------+
   |    Dies ist ein Button    |
   +---------------------------+
^^^ ^^^^                    ^^^ ^^^
 1    2                      3   4

Der Rand bei 1 wäre margin-left in CSS, der Rand bei 2 wäre padding-left in CSS, der Rand bei 3 wäre padding-right in CSS und der Rand bei 4 wäre margin-right in CSS.

Grüße,

Christian

[Incaron]

Hallo Christian,

sehr schön dargestellt. :-)
Also ich möchte in deiner Skizze die Ränder 2+3 entfernen.
Habe also folgenden Eintrag in der CSS-Datei vorgenommen.

INPUT { padding-right: 0px; padding-left: 0px }

Leider passiert nix. Hmmm, ne Idee warum?

[Christian Seiler]

Halli incaron,

Also ich möchte in deiner Skizze die Ränder 2+3 entfernen.
Habe also folgenden Eintrag in der CSS-Datei vorgenommen.

INPUT { padding-right: 0px; padding-left: 0px }

Leider passiert nix. Hmmm, ne Idee warum?

Seltsam... Jetzt hab' ich es selbst noch mal probiert... Ich kann mit padding-left und padding-right einen Rand innen *hinzufügen*, aber wegnehmen kann ich ihn nicht. (auch nicht mit negativen Angaben) Hmmmm. Doppel-Hmmmm. Wenn es mit padding nicht klappt, dann würde ich jetzt einfach mal darauf tippen, dass das nicht geht, mir ist aber schleierhaft, wieso...

Ich hab' mal den Titel geändert, vielleicht meldet sich noch jemand.

Grüße,

Christian
[verwirrt, ratlos]

[Axel Richter]

Hallo Christian,

Seltsam... Jetzt hab' ich es selbst noch mal probiert... Ich kann mit padding-left und padding-right einen Rand innen *hinzufügen*, aber wegnehmen kann ich ihn nicht. (auch nicht mit negativen Angaben) Hmmmm. Doppel-Hmmmm. Wenn es mit padding nicht klappt, dann würde ich jetzt einfach mal darauf tippen, dass das nicht geht, mir ist aber schleierhaft, wieso...

Tja, sieht so aus, als könnte man dem sperrigen Button nur mit einer Breiten-Angabe beikommen. Opera 6.05 macht Ihn als einziger von sich aus nicht so breit.

<input style="width:18ex;" type="button" value="Das ist ein Button"></input>

Quetscht Ihn zusammen, bis er tropft!!! ;-)

Gruß

Axel

[Incaron]

Hi Axel,

das war wonach ich gesucht habe. Danke!