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.
Mike M. schrieb:> Nichts für Ungut, aber lasst das heutzutage mit float.> Heute nutzt man Flexbox oder Grid Layout.
Das dachte ich mir schon. Deshalb Danke für die Tip's. Ich werde es
sobald ich dafür wieder Zeit habe durchackern.
Daniel A. schrieb:> 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...
Ob S. schrieb:> Daniel A. schrieb:>> 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.
Manchmal ergänzen sich HTML Tabellen und Grids auch, oder man kann Grids
als Tabellen nutzen.
Die Tabelle auf der Seite hier:
https://repo.dpa.li/apt/dpa-image-builder/images/
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.
Ein T. schrieb:> 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.
Thread beobachten
Seitenaufteilung abschalten