Paypal Jetzt Kaufen Formular position right

[mooon0815]

Hallo zusammen Community,

ich stehe ein wenig auf dem Schlauch und hoffe mir kann hier vielleicht jemand einen Hinweiß oder Tip geben.

Ich möchte gerne einen Paypal Button auf einer Seite einbinden. Die Seite ist mit Flex aufgebaut, 2 spaltig, abwechselnd untereinander Bilder und Text.

Das Paypal Formular habe ich in einem div Element und möchte es nun gerne rechts unter Text positionieren. Leider klappt das gerade einfach nicht ganz und ich verstehe nicht warum..

vielen Dank für jeden Hinweiß!

mit besten Grüßen

<div>
                <form class ="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                <input type="hidden" name="cmd" value="_s-xclick">
                <input type="hidden" name="hosted_button_id" value="WQQWYRAC5CSCJ">
                <table>
                    <tr><td><input type="hidden" name="on0" value="Flaschengröße">Flaschengröße</td></tr><tr><td><select name="os0">
                    <option value="100 ml">100 ml €7,00 EUR</option>
                    <option value="250ml">250ml €12,00 EUR</option>
                    </select> </td></tr>
                </table>
                <input type="hidden" name="currency_code" value="EUR">
                <input type="image" src="https://www.paypalobjects.com/de_DE/DE/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal.">
                <img alt="" border="0" src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" width="1" height="1">
            </form> 
</div>

und im CSS:

form.paypal {
    display: flex;
    background-color: #FFFBD6;
    flex: 1;
    margin-left: 10%;
    margin-right: 10%;
    text-align: right;
}

[Rolf B]

Hallo mooon0815,

wenn Du das DIV mit dem FORM drin unter irgendwas positionieren willst, müsstest Du uns das irgendwas vielleicht noch zeigen.

Es ist jedenfalls für dein Anliegen nicht sinnvoll, das Form zur Flexbox zu machen, das bezieht sich auf das Innere des Form und ordnet die Table, den Submit-Button und das Paypal-Pixel nebeneinander an. Wenn Du das möchtest, ok, aber das DIV an sich wird dadurch nicht beeinflusst.

Es ist meines Erachtens auch nicht sinnvoll, ein hidden input mittels einer table mit einem select zu verknüpfen. Viel sinnvoller wäre hier wohl eine Beschriftung des select mittels eines Label. Das hidden input erfüllt diesen Zweck nicht. Ob die table irgendeinen Zweck erfüllt, außer das Layout-Grauen der 90er heraufzubeschwören, würde ich übrigens bezweifeln. Ist das eine Vorlage von Paypal? Muss das HTML in einer HTML-Mail funktionieren?

Es ist auch die Frage, warum Du der Form die Eigenschaft flex:1 gibst. Die flex-Eigenschaft ist nur sinnvoll, wenn das Element KIND einer Flexbox ist. D.h. das div-Element müsste display:flex haben, damit flex:1 für das Form irgendwas bewirkt. Die Wirkung von flex:1 ist, dass du dem Element damit erlaubst, sich soweit auszudehnen, dass es die Flexbox füllt.

Es gibt natürlich Fälle, wo man display:flex und flex:1 für ein Element verwendet. Und zwar dann, wenn man zwei ineinander geschachtelte Flexboxen hat. Die innere Flexbox kann dann beide Eigenschaften haben.

Ob das div überhaupt einen Sinn hat, kann ich nicht sagen. Wenn mehr als das Form drin ist, vielleicht schon. Aber ein div mit nur einem Kind-Element, hm, ob das als Positionierhilfe unbedingt nötig ist, müsste man sich genauer anschauen. Aber dazu fehlen die Informationen über das Umfeld des Paypal-Form.

Rolf