Hallo Forengemeinde,
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 ....
<mein Beispiel-Anfang:
Thomas S. schrieb:> Hallo Forengemeinde,> 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.
Hallo Mitwirkende,
erstmal danke für die Infos.
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?
Das Flex Layout ist eine Methode, HTML Dokumente zu gestalten. Da gibt
es nichts zu initialisieren.
Thomas S. schrieb:> 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.
Kurt schrieb:> Schon mal "absolute position" versucht?
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?
Frank E. schrieb:> 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.
Thomas S. schrieb:> 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 ?
Guck dir mal die Webserver-Lösungen zum ESP32 an!
"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.
Thomas S. schrieb:> 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.
Thomas S. schrieb:> 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?https://wiki.selfhtml.org/wiki/Einstieg_in_CSS/Stylesheets_einbinden#Einbindung
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.
Den css-Code könnte ich einstellen.
Hans schrieb:> Meinst Du so etwas wie in den angehangenen Bildle?
Yeps.
Hans schrieb:> Den css-Code könnte ich einstellen.
Das wäre echt propper.
Nemopuk schrieb:> 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.
Kurt schrieb:> Der CSS Code muss zwischen head /head stehen.
Aha ! ... das wusste ich so nicht.
Thomas S. schrieb:> Nemopuk schrieb:>> 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.>> Kurt schrieb:>> Der CSS Code muss zwischen head /head stehen.> Aha ! ... das wusste ich so nicht.
Aha. Steht aber bei Selfhtml.
https://wiki.selfhtml.org/wiki/Einstieg_in_CSS/Stylesheets_einbinden
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...
Thomas S. schrieb:> Hans schrieb:>> Den css-Code könnte ich einstellen.> Das wäre echt propper.
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.
Hans schrieb:> Leben mußt Du der Seite schon selbst> einhauchen.
Da danke ich Dir erstmal. Klar will ich die Seite selbst bauen. Mir
fehlte es nur am Grundgerüst. Und um wieder da was zu lernen.
Ob S. schrieb:> Aha. Steht aber bei Selfhtml
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.
Thread beobachten
Seitenaufteilung abschalten