Button am Ende der Seite fixieren

werdas34 · 9. April 2019

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

<div>
    <input type="button" value="Bestellen" > 
    <br>
    <input type="button" class="below" value="Stornieren">
</div>
------------
.below{
    position: absolute;
    bottom: 0;
}

html-seminar.de/woltlab/attachment/1850/

Wie behebe ich das?

MfG,

werdas34

Arne Drews · 10. April 2019

Naja, als erstes ist position:absolute da eher fehl am Platz, aber um detailliert helfen zu können, benötigen wir schon etwas mehr Quellcode, idealer Weise einen Link, wo wir das Verhalten sehen/analysieren können.

werdas34 · 12. April 2019

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?

Code

function showOptions(){
    var opt = document.getElementsByClassName("notShown");
    var vis = opt[0].style.display;
    if(vis == "none"){
        opt[0].style.display = "block";
    }else{
        opt[0].style.display = "none";
    }
}
-------------
<p class="optional" onclick="showOptions()">Weitere optionale Wahlmöglichkeiten:
            </p>
            <!--ausgeblendeter Teil-->
            <div  class="notShown" >
            <input type="text" placeholder="Fensterplatz (Ja/Nein)">
            <input type="text" placeholder="Gewünschter Sitznachbar" style="width:250px;"><br>
            
            <select  size="1">
              <option value="Raum1">Raum1</option>
              <option value="Raum2">Raum2</option>
              <option value="Raum3">Raum3</option>
              <option value="Raum4">Raum4</option>
            </select>
                
            <a onclick="showRooms()">
            ⁽ &#8305 ⁾</a>
                <br>
                
                <textarea class="tarea" name="extras" maxlength="10000">Besondere Anforderungen z.B. Handicap</textarea>           
                </div>
                <!--ausgeblendeter Teil--> 
            <div>
            <input type="button" value="Bestellen" > 
            <br>
           <input type="button" class="below" value="Stornieren"> 
                </div>

Alles anzeigen

MfG,

werdas34

basti1012 · 12. April 2019

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 ?

werdas34 · 13. April 2019

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.

HTML

<!DOCTYPE html>
<html lang="de">

    <head>
        <title>RaMOS</title>
        <meta charset="utf-8"> 
        <link href="style.css" rel="stylesheet" type="text/css">
        <script src="optional.js"></script>
    </head>
    <body>
       <div class="header">
            <a href="index.html"><img src="Logo.png"  ></a>
        <h1>RaMOS</h1>      
        </div> 
        
        <div class="wrapper" >
            <p class="description"><b> Beschreibung</b> <br> 
            Bla Bla Promootion usw sssssssssss</p>
        
        
        
        <div class="overlay">
                    <img src="VeranstaltungsIMG.png" alt="VeranstaltungsIMG" height="250px" width="300px">
            
            <div class="formular">
            <form>
            <input type="text" placeholder="Vorname" >
            <input type="text" placeholder="Nachname"><br>
            <input type="text" placeholder="Geburtsdatum(TTMMJJ)"><br>
            <input type="text" minlength="5" maxlength="5" placeholder="PLZ" >
            <input type="text" placeholder="Wohnort">
            <input type="text" placeholder="Straße">
            <input type="text" placeholder="Hausnummer"><br>
            <input type="email" placeholder="Email"><br>
                
            <select name="Test" required  size="1">
              <option value="Datum1">Datum1</option>
              <option value="Datum2">Datum2</option>
              <option value="Datum3">Datum3</option>
              <option value="Datum4">Datum4</option>
            </select>
            <input type="text" placeholder="Anzahl der Tickets"><br>

            
            <p class="optional" onclick="showOptions()">Weitere optionale Wahlmöglichkeiten:
            </p>
            <!--ausgeblendeter Teil-->
            <div  class="notShown" >
            <input type="text" placeholder="Fensterplatz (Ja/Nein)">
            <input type="text" placeholder="Gewünschter Sitznachbar" style="width:250px;"><br>
            
            <select  size="1">
              <option value="Raum1">Raum1</option>
              <option value="Raum2">Raum2</option>
              <option value="Raum3">Raum3</option>
              <option value="Raum4">Raum4</option>
            </select>
                
            <a onclick="showRooms()">
            ⁽ &#8305 ⁾</a>
                <br>
                
                <textarea class="tarea" name="extras" maxlength="10000">Besondere Anforderungen z.B. Handicap</textarea>           
                </div>
                <!--ausgeblendeter Teil--> 
            <div>
            <input type="button" value="Bestellen" > 
            <br>
           <input type="button" class="below" value="Stornieren"> 
                </div>
            
            </form>
                </div>
        </div>
        </div>
    
        </body>
</html>
-----------------------------------
* { 
    margin 0px;
    padding: 0px;
    font-family: sans-serif;
}

.header{
    background-color: blue;

}

.header h1{
    text-align: center;
    font-size: 50px;
    color: white;
}

.header img{
    float:left;  
    margin: 6px;
    height: 50px;
    width: 90px;
}

.header img:hover{
    transform: scale(1.05);
    
}

.header p{
    font-family: sans-serif;
    font-size: 20px;
    align-content: flex-end;
    float:right;
    margin: 17px 20px;
    background-color: grey
}

.header p:hover{
    transform: scale(1.05);
}

.wrapper{
    width: 900px;
    max-width: 90%;
    margin: 0 auto;
    padding: 20px;
} 

.event{
    float: left;
    margin-bottom: 60px;
    padding: 10px;
    width: 250px;
    height: 250px;
    //border: solid;
}

.event img {
    width: 250px;
    height: 250px;
}

.event p{
    font-family: sans-serif;
    font-size: 15px;
    color: black;
}

.event a{
    text-decoration: none;
}

.event:hover{
    transform: scale(1.05);
}

.code{
    width:300px;
    height: 300px;
    margin: 0 auto;
    text-align: center;
    border: solid;
    border-radius: 10px;
}

.code p{
    font-size: 14px;
    text-align: center;
    font-family: sans-serif;
    margin-top: 50px;
}

.code input{
    margin: 20px;
}

.description{
    font-size: 25px;
}

.description b{
    font-size: 30px;
}

.overlay img{
    margin: 5px;
    width: 600;
    float: right;
}

.formular{
    margin: 5px;
    width: 500px;
}

.formular input{
    font-size: 17px;
    width: 200px;
    margin: 5px;
    padding: 2px;
    color: black;
}

.formular ::placeholder{
    color: grey;
}

.formular select{
    font-size: 17x;
    width: 220px;
    margin: 5px;
    padding: 2px;
    color: black;
}

.formular button{
    font-size: 20px;
    width: 200px;
    margin: 5px;
    padding: 2px;
}

.optional{
    color:blue;
    text-decoration: underline;
    margin: 5px;
}

.notShown{
   display: none;
}

.notShown div{
    width: 230px;
}

.notShown a{
    color: blue;
    font-weight: bold;
    text-decoration: none;
}

.tarea{
    width:500px;
    height: 100px;
    margin: 5px;
}

.below{
    position: absolute;
    bottom: 0;
}

.raum{
    align-self: center;
}

.login{
    width:300px;
    height: 300px;
    margin: auto auto;
    padding: 10px;
    text-align: left;
    border: solid;
    border-radius: 10px;
}

.login input{
    margin: 5px; 
}

.login p{
    font-family: sans-serif;
}

.menu{
    position: absolute;
}

.menu nav{ 
    font-family: sans-serif;
    font-size: 20px;
}

.menu a{
    margin-left: 15px;
    text-decoration: none;
    color: blue;
    font-family: sans-serif;
    font-size: 15px;  
}
-------------------------
function showOptions(){
    var opt = document.getElementsByClassName("notShown");
    var vis = opt[0].style.display;
    if(vis == "none"){
        opt[0].style.display = "block";
    }else{
        opt[0].style.display = "none";
    }
}


function showRooms(){
    window.open("Room.html", "Raeume", "width=600, height= 400");
}

Alles anzeigen

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

basti1012 · 14. April 2019

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

<sub>tief</sub>
<sup>Hoch</sup>

und mit css gibt es ja

Code

vertical-align:super;
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

.below{
    position: relative;
    bottom: 0;
}

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/

Button am Ende der Seite fixieren

Jetzt mitmachen!

Teilen

Tags