Button am Ende der Seite fixieren

  • Hallo,


    ich übe bisschen mit HTML, CSS und JS.


    Baue gerade eine kleine Webseite.


    Mein Problem ist folgendes:

    Ich möchte nachdem die Daten eingetragen wurden zwei Buttons untereinander stehen haben.

    Dazu soll "Bestellen" unter den Eingabe Feldern stehen und der Button "Stornieren" ganz am Ende der Seite.

    Funktioniert an sich auch, sobald ich aber das Fenster sehr klein ziehe, ist "Stornieren" quasi mittendrin (siehe Bild).


    Code
    1. <div>
    2. <input type="button" value="Bestellen" >
    3.     <br>
    4. <input type="button" class="below" value="Stornieren">
    5. </div>
    6. ------------
    7. .below{
    8. position: absolute;
    9. bottom: 0;
    10. }

    tesr.PNG


    Wie behebe ich das?


    MfG,

    werdas34

  • Einen Link kann ich nicht zur Verfügung stellen, da die Seite nicht online ist. Oder meinst du was anderes?


    Wenn man auf den Link Weitere Wahlmöglichkeiten klickt, wird mittels JS display von none auf block umgestellt, damit der ausgeblendete Teil angezeigt werden kann. In diesem Fall tritt der Fehler auf, wenn aber der display auf none ist funktioniert es.


    Wie man auf dem Bild sehen kann steht neben dem select "Raum" ein kleines i. Ich hätte es gern mit CSS hochgestellt , aber keinen Weg gefunden wie das funktioniert. Deshalb auch ich nun Unicode Zeichen rausgesucht und implementiert.

    Wie kann man mitt CSS den Text hochstellen?




    MfG,

    werdas34

  • was meinst du mit hochstellen ?

    Einfach ein Stück höher als der Rest ?

    Dafür gibt es margin-top ,margin-bottom, line-height und vieleicht auch padding unter bestimmten vorraussetzungen.


    Dein anderer Fehler kann ich mit den vorhanden Code irgendwie nicht nach stellen.

    Wenn du deine Code nicht Online stellen kannst dann geh mal auf http://codepen.io und füge deinen Code da ein . Baue das alles so ein wie du es hast und bis dein Jetziges Problem erkennbar ist. Damit können alle Helfer dein Problem erkennen und dir auch hellfen.


    Mit den vorhanden Code ist bei mir der Storno Button immer unten und egal wie weit ich das Fenster verkleinere es sieht nie so aus wie bei dein Bild.


    Auf deiner Seite ist doch bestimmt noch mehr Code vorhanden als wie du hier postest oder ?

  • Mit hochstellen meine ich sowas wie man es aus der Mathematik kennt: x².

    Kannst du vielleicht ein Beispiel machen mit padding etc. Hätte es selber probiert aber habe es nicht hinbekommen.


    Ich kann den Fehler auf codepen nicht nachstellen, deswegen lade ich hier den Code hoch. Zur Info: Ich nutze als Browser Mozilla Firefox und als IDE Brackets.



    Das ist jetzt mehr als die Seite betrifft (bei CSS zumindest), aber vielleicht hat ja irgendwas Seiteneffekte.

  • Erstmal zu den Hochstellen. Weil das margin und translate nicht funktioniert hatte wie ich wollte viel mir wieder ein das es da im html und css doch schon was gibt


    Code
    1. <sub>tief</sub>
    2. <sup>Hoch</sup>

    und mit css gibt es ja

    Code
    1. vertical-align:super;
    2. vertical-align:sub;

    Das sollte deine Hochstellen schon mal positive erfolgs aussichten geben.


    Das dein Button immer unten bleibt würde ich als not behilf sagen das du aus position:absolute relative machst

    Code
    1. .below{
    2. position: relative;
    3. bottom: 0;
    4. }

    zumindest hat es beim kurzen testen in Codepen geklappt.


    Nur wenn du es richtig machen willst solltest du es gleich mit Flexbox machen und die ganzen festen heigh und width Angaben mit % und anderen Angaben tauschen. Auch das Float ist in meisten Fällen Fehl an Platz.


    Probier es einfach mal aus ,damit ist dein ganzen Seitenlayout einfacher zu gestallten

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/