leider bin ich aus der HTML, PHP und CSS schon ne ganze Weile draußen.
ich möchte mehrere Buttons mit gewissem Abstand nebeneinander, und vieleicht 2, 3 Reihen untereinander haben. Also ein 'Schalt-tableau'. Die 'Buttons' sind als PNG verfügbar. Stelle mir vor, das es dazu ein Roll-Over / Highlite gibt.
Ich kenne die Self-HTML Seite, und habe versucht dies mit CSS zu realisieren. Aber ich bin da gerade nicht mehr so ganz fit, und dann hat sich doch einiges getan seit Jahren.
Wer kann mir da bitte mal nen Ansatz geben, wie man mit CSS oder PHP, oder wie auch immer dies lösen kann? - Irgendwie benötige ich ja da ein Raster, Tabelle, oder ....
Wer kann mir da bitte mal nen Ansatz geben, wie man mit CSS oder PHP,
oder wie auch immer dies lösen kann? - Irgendwie benötige ich ja da ein
Raster, Tabelle, oder ....
Tabelle ist ein einfaches Mittel für den schnellen Erfolg. Gilt als veraltet und in Webdesigner-Kreisen als "bä...", aber was solls, funzt ...
Die Tabelle und die Buttons kann man ja mit CSS noch im Nachhinein beliebig aufmotzen.
Das Zip habe ich mir angeguggt. Ich möchte schon ganz gerne meine Grafik-Button da einbinden. Und es geht mir ja auch um das Formatieren der Button.
Ich weiß jetzt nicht wirklich, wie den CSS-Part mit z.B. Flex was erreiche. Habe das schon mal implementiert, aber es funzt nicht, es kommt einfach der HTML/CSS-Text, der das Script sein soll.
Wo muss ich dieses Flex z.B. initialisieren, aufrufen?
es funzt nicht, es kommt einfach der HTML/CSS-Text, der das Script sein
soll.
Wie meinst du das? Wo kommt was? Zeige dein PHP Script und einen Screenshot von der Ausgabe.
Vermutlich kommst du besser voran indem du erst mal eine statische HTML Datei erstellt, die wie gewünscht aussieht. Also ganz ohne Webserver und ohne PHP.
Auch keine große Sache ... die JS-Funktion verarbeitet dann die Reaktion auf den Button-Klick weiter ...
Wozu braucht man da irgendwelche Frameworks oder Libs und Tools? Das schreibt man mit etwas Erfahrung so hin. Nun kommt es natürlich noch darauf an, wie die Seite sonst noch so aussehen soll und was der TO mit den Klicks bewirken will ...
Anstatt der Pixelgrafiken kann man auch SVGs (Vektorgrafiken) verwenden, die dann deutlich weniger Speicher benötigen und schneller geladen sind.
Anstatt der Pixelgrafiken kann man auch SVGs (Vektorgrafiken) verwenden,
die dann deutlich weniger Speicher benötigen und schneller geladen sind.
Die Button's haben grad mal so 4Kb. Denke nicht das dies übermäßig ist.
der Button soll dann den PHP-Code ausführen, welcher dann wiederum ein Phyton-Script ausführt, und von da dann der IO des Raspi's angesteuert wird.
Dies geht dann in PHP mit Exec .... ?!
Habe gesucht, ob es von PHP direkt geht, aber das ist anscheinend nicht der Fall. Also gibt es halt mehrere Phyton-Scripte.
Bisher denke ich so an 8 I/O's, also 16 Button's.
Soll jetzt erstmal was zum wieder einsteigen sein. Und auch nen gewissen Nutzen haben. Der Raspi steuert dann die 8 Relais (über Treiber) diese schalten dann die 230V. 2-polig.
ich möchte mehrere Buttons mit gewissem Abstand nebeneinander, und
vieleicht 2, 3 Reihen untereinander haben
Relevante Frage ist, ob immer sagen wir 7 buttons nebeneinander sein sollen und wenn das nicht auf den Bildschirm passt der Benutzer eben horizontal scrollen muss,
oder ob nur so viele buttons nebeneinander sollen wie auf die dargestellte Seitenbreite passen und die nächsten dann eben umgebrochen in die nächste Zeile müssen (Fliesstext).
Und was passieren soll wenn man mit der Tastatur über die Seite navigiert, soll die Seite so scrollen, dass der aktuelle button immer im sichtbaren Fensterbereich liegt oder darf da nichts scrollen ?
"Bootet" quasi sofort, ist irgendwie "dichter" an der Hardware (GPIO). Braucht keine SD/SSD. Es gibt auch Varianten mit LAN, wenn du kein WLAN willst. Ist robuser und billiger.
Nein. Ich bekomme ja den CSS Code nicht zum laufen.
Frage : muss dieser im 'head' oder 'body' sein? oder kann dies an
x-beliebiger Stelle sein?
Der CSS Code muss zwischen head /head stehen. Aber wenns nur 2 oder 3 Elemente sind, würd ich die CSS Anweisung direkt zwischen div und /div schreiben, was zwar net die sauberste Lösung iss, aber in so einem Fall verschmerzbar.
Merke dir SelfHtml, das ist die beste Anleitung die es gibt. Sie wird seit mehr als 20 Jahren aktuell gehalten und verbessert. Auf SelfHtml kannst du dich verlassen.
Du kannst die ganzen Beispiele direkt auf der Webseite ausprobieren und verändern.
@TO:
Meinst Du so etwas wie in den angehangenen Bildle? Das habe seinerzeit mal für meine Webcams gemacht. Ist vermutlich nicht in jedem Punkt professionell, aber es funktioniert wie gewünscht.
Merke dir SelfHtml, das ist die beste Anleitung die es gibt
Das weiß ich eigentlich. Da bin ich auch immer. Nur konnte ich die gezeigten Fragmente nich zum Laufen bringen. Die Seite kenn ich auch seit 1900, ähm 1990 oder so.
Merke dir SelfHtml, das ist die beste Anleitung die es gibt
Das weiß ich eigentlich. Da bin ich auch immer. Nur konnte ich die
gezeigten Fragmente nich zum Laufen bringen. Die Seite kenn ich auch
seit 1900, ähm 1990 oder so.
Ungefähr bei der Hälfte der Seite sind beide Varianten in der umgebenden HTML-Struktur dargestellt, inline und als externe Datei. Und es ist kaum zu übersehen, dass die beide innerhalb von <head></head> stehen...
Bitte schön!
Ich habe aus den Dateien alles entfernt was für Dich unwichtig ist. Kopiere beide Dateien auf Deinen Webserver - beide in das gleiche Verzeichnis. Im Browser rufe dann die button.html auf. Wenn man auf die Buttons klickt führt das das erst mal ins Leere, Du mußt die href-Attribute der Buttons mit Leben füllen, also Link zu Seite oder JS-Funktion je nachdem was Du bezweckst.
Ansonsten mußt Du die html natürlich anpassen so wie Du es brauchst. So ist es erstmal nur ein Grundgerüst, Leben mußt Du der Seite schon selbst einhauchen.
Habe ich ehrlich gesagt 'übersehen'. Ich bin gleich auf 'Syntax'.
Ich muss da mal durch. Hab da einiges aufzuholen. Dazu habe ich ja nun ne Herausfordung.
Nichts für Ungut, aber lasst das heutzutage mit float.
Heute nutzt man Flexbox oder Grid Layout.
Die Links unten zeigen mit Beispielen wie. Layout lassen sich verschachteln, sodass man beliebige Anordnungen bauen kann, ohne in die CSS Hölle von vor vielen Jahren zu kommen.
Ich erinnere mich noch an die Zeiten, als man für sowas noch Tabellen
nutzte.
Der Witz ist: Der Hype Flexboxen mit Grid-Layout sind effektiv nix anderes. Nur wurde der Scheiß aus dem HTML-Teil in den CSS-Teil verlagert, was natürlich nicht ohne wahnwitzigen Syntax-Bombast abging.
Am Ende sieht's (wenn man beides richtig verwendet hat) exakt gleich aus. Der "moderne" Code ist nur ca. um den Faktor 1,5..2 größer.
Das ist technologischer Fortschritt, wie ich ihn liebe...
Ich erinnere mich noch an die Zeiten, als man für sowas noch Tabellen
nutzte.
Der Witz ist: Der Hype Flexboxen mit Grid-Layout sind effektiv nix
anderes. Nur wurde der Scheiß aus dem HTML-Teil in den CSS-Teil
verlagert, was natürlich nicht ohne wahnwitzigen Syntax-Bombast abging.
Am Ende sieht's (wenn man beides richtig verwendet hat) exakt gleich
aus. Der "moderne" Code ist nur ca. um den Faktor 1,5..2 größer.
Das ist technologischer Fortschritt, wie ich ihn liebe...
So kann man das wohl sehen, wenn man einfach gestrickt ist und die Größe des Mundwerks negativ mit jener der Sachkenntnis korreliert.
Kompetentere Menschen erkennen, daß Grid und Flexbox vieles bieten, das mit Tabellen nicht möglich ist -- beispielsweise für Webseiten, die auf mehreren unterschiedlichen Screens nutzbar sein und gefällig aussehen sollen.
HTML-Tabellen sind gut für die Darstellung tabellarischer Daten. Ihr Mißbrauch für Layoutzwecke war immer nur eine Krücke, weil damals leider keine besseren Möglichkeiten zur Verfügung standen.
Die lässt sich rein nur mit CSS sortieren. Ich hab der Tabelle und den Tabellenzeilen display:grid; gegeben, und dann mit order, CSS variablen, ein paar labeln und checkboxen, sortiert.
Also ich sehe da neben viel CSS auch noch ein bisschen JavaScript. :-)
Der Einzeiler ist optional. Der passt nur an, was als URL angezeigt wird, damit der Filter auch das Neuladen der Seite überlebt.
Ohne JS wird ein Button angezeigt, um die Filter zu speichern. Das Sortieren & Filtern selbst passiert aber weiterhin sofort, ohne das man extra den Knopf drücken müsste.
