Button gruppe positionieren

  • Ich habe eine Button Gruppe. Die möchte ich über position:absolute positionieren.
    Klappt aber nicht. geht das grundsätzlich nicht?


    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #wrapper {


    width:420px;
    height:650px;
    border: 1px solid blue;
    margin: 5px;
    position:relative;
    }


    p{
    position:absolute;
    color: red;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5em;
    left:10px;
    top:200px;
    }


    .btn-group .button {
    positon: absolute;
    top:300px;
    left:10px;
    width:50px;
    height:40px;
    background-color: #4CAF50;
    color: white;
    padding: 5px 5px;
    font-size: 15px;


    }


    .btn-group .button:hover {
    background-color: #3e8e41;
    }
    </style>
    </head>
    <body>


    <div id="wrapper">
    <p id="bringTitel">Arbeitsspeicher3</p>



    <div class="btn-group">
    <button class="button">Button</button>
    <button class="button">Button</button>
    <button class="button">Button</button>
    <button class="button">Button</button>
    </div>
    </div>
    </body>
    </html>

  • in der Anwendung - hier ist nur ein vereinfachendes Beispiel- habe ich 3 Gruppen mit je 10 Buttons. Muss ich jetzt jeden Button einzelnt ansprechen. Bekommt jeder seine eigenen Css Anweisungen?

  • Wenn Du sie denn absolut positionieren willst, dann ja. Da anzunehmen ist, dass die Position irgend welchen Regeln folgt, könntest Du sie automatisch mit Javascript festlegen. Ich bin jedoch kein Freund von absoluter Positionierung und würde eine andere Lösung suchen. Diese Sache ist ein Problem, womit man dabei konfrontiert werden kann.


    Beschreibe doch mal, vielleicht mit einer Skizze, was Du mit den Buttons vor hast und warum Du sie absolut positionieren möchtest, dann kann man wahrscheinlich eine einfachere Lösung finden.

  • Hallo


    Zitat

    Bekommt jeder seine eigenen Css Anweisungen?


    Ja klar, da du unbedingt


    Zitat

    Die möchte ich über position:absolute positionieren.


    haben willst.


    position: absolute ist halt zum Anordnen von Elementen so ziemlich das unsinnigste Verfahren. Aktuell am sinnvollsten ist Flexbox.


    Gruss


    MrMurphy

  • Ich entnehme den Kommentaren BEIDER Fachleiute, dass Position absolut anscheinend nicht mehr state of the art ist.


    Vielleicht sollte da mal einer bei Youtube ein entsprechendes Video auflegen.Da habe ich anscheinend stundenlang Antiquitäten geschaut.


    Bevor ich wieder das falsche Video schau oder veraltete Tutorials studiere, könnte mir einer an meinem Beispiel zeigen wie man die optimal Buttons in die Mitte vom wrapper bekommt?


    LG


    Joachim

  • ch habe es mir angesehen: Ist gut. Aber wie bekomme ich die Buttons mit Flexbox in die gewünschte Position.


    ich möchte eine Reihe Bilder anzeigen,
    dann 10 Buttons


    dann eine Reihe Bilder
    dann 10 Buttons


    eine Reihe Bilder
    dann 10 buttons


    Statt der Bilder kann es hier auch eine Textzeile jeweils sein.

  • Hallo Jochen


    Bist du sicher dass das Button-Element überhaupt richtig ist? Deine Beschreibung hört sich eher nach dem a-Element für die Links an.


    Für 10 Bilder in einer Reihe erscheint mir die bisherige Breite des wrapper arg knapp bemessen.


    Gruss


    MrMurphy

  • Ich habe das Ganze noch in einen Wrapper gepackt.
    Die Höhen- Position bestimme ich mit dem height (Y achse) im outerwrapper.
    wie lege ich die Position auf der x achse? fest.


    Und wenn ich jetzt zum Beipiel 200 px unter dem Outerwraper einen Text haben möchte, mach ich das neuerdings auch noch mit margin-top oder Position absolut oder gibt es etwas "moderneres"





    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #wrapper {


    width:1050px;
    height:650px;
    border: 1px solid blue;
    margin: 5px;
    position:relative;
    }


    #outerwrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
    left:200vh;
    }
    #innerwrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    }


    </style>



    </head>



    <body>
    <div id="wrapper">
    <div id="outerwrapper">
    <div id="innerwrapper">
    </div>
    </div>
    </div>
    <script>
    for (var i = 0; i < 3; i++) {
    var currentlineimg = document.createElement("div");
    currentlineimg.className = "lineimg";
    for (var j = 0; j < 5; j++) {
    var im = document.createElement("img");
    im.src = "http://lorempixel.com/output/animals-q-c-50-50-" + (j+1) + ".jpg"
    currentlineimg.append(im);
    }
    innerwrapper.append(currentlineimg);
    var currentlinebtn = document.createElement("div");
    currentlinebtn.className = "linebtn";
    for (var j = 0; j < 5; j++) {
    var btn = document.createElement("button");
    btn.innerHTML = "BTN" + (i * 10 + j + 1);
    currentlinebtn.append(btn);
    }
    innerwrapper.append(currentlinebtn);
    }


    </script>
    </body>
    </html>

  • meineFfragen beziehen sich somit auf der Positionierung innerhalb des outer wrappers. wie positioniere ich z.b. einen Text an eine bestimmte Stelle im outer wrapper


    und wie schiebe ich den inner wrapper nach links und rechts (state of the art)?

  • Hallo


    Zitat

    wie positioniere ich z.b. einen Text an eine bestimmte Stelle im outer wrapper


    Gar nicht. Heutzutage sollen sich die Elemente den unterschiedlichen Endgeräten und damit den Bildschirmbreiten anpassen. Bestimmte Positionierungen sollten deshalb vermieden werden.


    Gruss


    MrMurphy

  • Beschreibe doch mal, welches Ziel Du mit dieser Anordnung verfolgst, dann kann man deine Fragen wahrscheinlich besser einordnen und beantworten. Vor allem, warum Du die Elemente anders als zentriert oder links- oder rechtsbündig anordnen möchtest.

  • Guten Morgen Sempervivum,


    ich habe ein einfaches Beispiel für ein typisches Layout meiner kleinen Anwendungen bei pastebin eingestellt.
    Es ist total mit position absolut aufgebaut. Da erkennst du meine Ziele vielleicht einfacher als wenn ich alles verbal beschreiben würde.


    Vielleicht kannst du mir an diesem Beispiel zeigen wie man "heutzutage" so etwas programmiert.
    Wenn es zuviel Arbeit ist kann ich verstehen wenn du lieber den Sonnenschewin geniesst


    LG


    Joachim


    http://pastebin.com/zz7LQKjG

  • Das kannst Du auch ohne Flex-Layout sehr einfach erreichen, indem Du zunächst die Elemente mit text-align:center horizontal zentrierst. Damit ersparst Du dir schon Mal die Berechnung der x-Positionen.
    Die vertikalen Abstände kannst Du leicht mit margin-top einstellen.
    Und um für die Tabelle einen freien Raum zu schaffen (ich nehme an, sie wird dynamisch angelegt) würde ich sie in einen Wrapper mit min-height verpacken. Wenn Du min-height verwendest, reserviert dieser Wrapper eine Mindesthöhe, erweitert sich aber, wenn die Tabelle größer wird.
    Ein weiterer Vorteil, wenn Du nicht absolut positionierst ist, dass alles automatisch hoch oder runter rutscht, wenn Du bei einem Element die Höhe änderst. Bei absoluter Positionierung musst Du dagegen alles neu berechnen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!