Input Box und Button in der gleichen Höhe

Web und Design, xt:Commerce Add comments

Ein kleiner Beitrag, der aber vielleicht dem Einen oder dem Anderen hilft: Man hat ein Eingabefeld und einen Button, die sind nicht richtig positioniert: der Button etwas nach oben gerückt. Das Beispiel bezieht sich auf ein XTC-Template. Ist aber natürlich auf alles anwendbar.
{$ADD_QTY}{$ADD_CART_BUTTON}
inp_und_button.png

Joa… sieht blöd aus.

So wird’s besser:

<span class="buttonundfeld">{$ADD_QTY}{$ADD_CART_BUTTON}</span>

Und das passende Style dazu:

.buttonundfeld input { vertical-align:middle; }

Das sieht dann so aus. Und zwar im FF und IE6:

inp_und_button2.png

Einfach, aber wirkungsvoll.

Und ganz unauffällig kommt etwas Werbung..

5 Responses to “Input Box und Button in der gleichen Höhe”

  1. Recall Says:

    Hi in welchem Verzeichniss findet man die datei in der man das ganze einfügen soll?

    Danke & Gruß

  2. Twols Says:

    Naja, das Stylesheet in stylesheet.css. Und der Button ist in \module\product_info\product_info_v1.html. Alles in dem Templateordner. Wenn es sich um einen xt-Shop handelt.

  3. Svel Says:

    Hallo,
    ich habe genau nach solch einer Lösung gesucht.
    Ich verwende das Yaml-Template (somit div) und habe neben dem Kaufen-Button noch den Drucken-Button dahinter.
    Die Seite läuft leider noch lokal, so dass ich keine URL posten kann.

    Ich probiere seit Stunden, die beiden Buttons mit dem Mengenfeld auf gleiche Höhe zu bekommen - nichts funktioniert.

    derzeit sieht der Code in diesem Bereich so aus:

    Das sieht dann SO aus:
    http://people.freenet.de/info_sandra/shot.jpg
    Egal ob ich die Buttons per Span einbaue und dem Div ne andere Class zuweise usw. es kommt einfach nicht auf eine HÖhe.
    Im Styleshee habe ich eingefügt:
    .buttonundfeld { text-align: right; vertical-align:top; }

    Wenn ich das mit Input mache (wie oben), dann haut es mir alles nach links und die ganze Sache soll rechtsbündig sein.

    Ich bin echt am verzweifeln mit dem Ding. Hat irgendjemand vielleicht ne zündende Idee, wie ich das in den Griff kriege ??

    Danke !

  4. Twols Says:

    Also, so einfach lässt sich das nicht sagen. Am besten bau die ein Paar sachen in eine separate HTML-Datei ein, um sie hier zu zeigen.

  5. Svel Says:

    Danke für die Antwort

    was hättste denn gern ? ;-)

    Ich geh davon aus, ich werd die Seiten sowieso kommende Woche mit einem Passwortschutz zum Testen hochladen. Dann kann ich ja die URL mal schicken. Ist sicherlich einfacher.

    Ich hoffte halt, jemand hier kann zaubern und hat den passenden Code quasi im Hut ..

Leave a Reply

WP Theme & Icons by N.Design Studio
Internetservice Köln
Entries RSS Comments RSS Anmelden