WebIOPi Buttons positionieren

Heute ist Stammtischzeit:
Jeden Donnerstag 20:30 Uhr hier im Chat.
Wer Lust hat, kann sich gerne beteiligen. ;)
  • Hallo

    als Neueinsteiger habe ich nun versucht nach diesem Beispiel mich in die Thematik einer Weboberfläche für meinen Pi rein zu "wurschteln".
    Soweit funktioniert es auch.
    Ich habe nun auch einen zweiten Button eingefügt der auch einen zweiten Ausgang (Relais) ansteuert.
    Soweit habe ich das nun auch verstanden.
    Leider sind die Buttons nun horizontal zentriert und untereinander.
    Ich würde sie aber gerne frei positionieren am besten mit Koordinaten, damit ich später über ein Hintergrund Bild legen kann.
    Z.B. Grundriss = Türöffner
    Kann mir jemand sagen wo im html File man dies am geschicktesten tut und wie.
    Ich habe schon einiges ausprobiert. Ich habe es auch geschafft einen Button zu plazieren allerdings lagen dann beide ander Stelle.:wallbash:
    Hier der momentane Code


    BYe André

  • Hi all

    keiner einen Tipp für einen Anfänger ?
    Ich habe nun ein wenig weiter gebastelt und einen dritten Button dazugefügt.
    Soweit immer noch alles klar.
    Ich habe nach einiger Recherche und probieren auch eine Art Notlösung gefunden.

    Ich habe im body die Zeile

    Code
    <body>
            <div id="controls" align="center"></div>
    </body>


    durch die folgenden Zeilen


    ersetzt.
    Damit kann ich die Buttons auch an so ziemlich jeden möglichen und unmöglichen Ort verschieben.
    Mit obiger Einstellung liegen sie alle drei direkt untereinander
    Es hat nur den Schönheitsfehler dass der erste Button nach dem Nullpunkt ausgerichtet wird und die folgenden Buttons den Button 1 als Ausgangspunkt nehmen.
    Wenn man dies weiß, kann man die Abweichung mit einrechnen, aber schöner wäre es wenn wirklich alle "Absolut" am Nullpunkt ausgerichtet wären.
    Dazu jemand eine Idee?

    BYe André

    Einmal editiert, zuletzt von elektrolurch (9. August 2014 um 15:25)

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!