Michael w: button in Farbe und nebeneinander anzeigen

Hallo!

Ich lasse mir mit folgendem Code Verzeichnisse als Buttons ausgeben

<?php $handle = opendir('.'); if($handle){ while(($entry = readdir($handle)) !== false){ if($entry != '.' && $entry != '..' && $entry != '.htaccess'){ echo "<button onclick=\"location.href='./$entry'\">$entry</button><br>"; } } closedir($handle); } ?>

Nun möchte ich das die Buttons nebeneinander und in z.B. anderen Farben und eventuell Formen ausgeben lassen (mit bootstrap vielleicht?). Leider läuft alles ins leere was ich probiert habe, könnt Ihr mir vielleicht helfen?

Danke schonmal im voraus

LG

Michael

  1. Hallo,

    Nun möchte ich, dass die Buttons nebeneinander und in z.B. anderen Farben und eventuell Formen ausgeben lassen

    Mit css sollte das gehen.

    Leider läuft alles ins leere was ich probiert habe,

    Was hast du denn schon probiert?

    Gruß
    Kalk

    1. @@Tabellenkalk

      Nun möchte ich, dass die Buttons nebeneinander […]

      Mit css sollte das gehen.

      Du meinst br { display: none }? 😉

      LLAP 🖖

      -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. Hallo,

        Du meinst br { display: none }? 😉

        Hey, guter Tipp. Nicht.

        Das br hab ich übersehen. 😎

        Also: erst das html bereinigen und dann mit css neu lackieren!

        Gruß
        Kalk

  2. Hallo Michael,

    meine persönliche Meinung: vergiss Bootstrap für diesen Zweck. Das ist ein CSS Framework für Seitenlayouts. Da gibt's möglicherweise ein paar Klassen, mit denen Du Buttons manipulieren kannst, aber nur dafür Bootstrap reinzuziehen, das ist nicht angemessen. Wenn Du Bootstrap eh drin hast, sieht das anders aus...

    Dass die Buttons nebeneinander stehen und nicht untereinander, das hast Du selbst veranlasst. Weißt Du, wozu in HTML das br Element dient?

    Zu Kalks Hinweis: Weißt Du, was CSS ist und wie man Styles nutzt? Wenn nicht: Hier ist ein Einstieg.

    Sonstige Hinweise:

    Das Zeichen ' ist in Dateinamen erlaubt, wenn du eine solche Datei im Ordner hast ist der Button defekt. Das müsstest Du escapen.

    Du bekommt Verzeichnisse und Dateien zurück. Wenn Du nur Dateien willst, solltest Du mit glob(".", GLOB_MARK) arbeiten, da bekommst Du ein Array aus Strings mit Datei- und Verzeichnisnamen, und durch GLOB_MARK hängt an Verzeichnissen ein / oder \ hinten dran (der Wert von DIRECTORY_SEPARATOR).

    $files = array_filter(glob("*", GLOB_MARK), function($f) { return substr($f, -1, 1) !== DIRECTORY_SEPARATOR; });

    Rolf

    -- sumpsi - posui - clusi
    1. hallo

      Du bekommt Verzeichnisse und Dateien zurück. Wenn Du nur Dateien willst, solltest Du mit glob(".", GLOB_MARK) arbeiten, da bekommst Du ein Array aus Strings mit Datei- und Verzeichnisnamen, und durch GLOB_MARK hängt an Verzeichnissen ein / oder \ hinten dran (der Wert von DIRECTORY_SEPARATOR).

      Hier sollen URIs ausgegeben werden, nicht Dir-Pfade!

      -- https://beat-stoecklin.ch/pub/index.html
      1. Hallo beatovich,

        Hier sollen URIs ausgegeben werden, nicht Dir-Pfade!

        Vielleicht verstehe ich Dich gerade miss. Mein Sample-Code filtert die Verzeichnisse aus und lässt nur die Dateien stehen. Der übrige Code des OP setzt dann im click-Handler des Button location.href auf "./"+$dateiname, macht also einen Pseudolink daraus. Ich habe nicht getestet, ob das zuverlässig funktioniert, das mag der OP entscheiden.

        Solange im aufgelisteten Ordner nur publizierte Dateien stehen, kann man auf diese Weise Verweise bilden. Wer sich so eine Adresse als Bookmark speichert, hat irgendwann Pech.

        Good practice ist das Ganze nicht, das ist mir definitiv durchgegangen zu erwähnen. Buttons sind hier das falsche Element, es sollten Links sein, weil auf eine andere Ressource verwiesen wird. Und man braucht dann auch nicht unnötig Script im Browser. Diese Links kann man button-artig stylen, wenn's gewünscht ist.

        Rolf

        -- sumpsi - posui - clusi
        1. hallo

          Hallo beatovich,

          Hier sollen URIs ausgegeben werden, nicht Dir-Pfade!

          Vielleicht verstehe ich Dich gerade miss. Mein Sample-Code filtert die Verzeichnisse aus und lässt nur die Dateien stehen.

          Meine Bemerkung betrifft die Art des Slashes. Hier muss nicht der default vom System übernommen werden sondern der für URIs vorgesehene.

          Solange im aufgelisteten Ordner nur publizierte Dateien stehen, kann man auf diese Weise Verweise bilden. Wer sich so eine Adresse als Bookmark speichert, hat irgendwann Pech.

          Da wäre dann im Fall von a-Elementen ein rel="noindex" angebracht.

          Good practice ist das Ganze nicht, das ist mir definitiv durchgegangen zu erwähnen. Buttons sind hier das falsche Element, es sollten Links sein, weil auf eine andere Ressource verwiesen wird.

          Nur wenn du diese Ressourcen auch indexiert haben willst.

          Und man braucht dann auch nicht unnötig Script im Browser. Diese Links kann man button-artig stylen, wenn's gewünscht ist.

          Kommt auf den Kontext, den wir nicht kennen an.

          1. Hallo beatovich,

            Meine Bemerkung betrifft die Art des Slashes. Hier muss nicht der default vom System übernommen werden sondern der für URIs vorgesehene.

            Das passiert mNn nicht. Im glob-Ergebnis steht bei Directory-Einträgen, die Verzeichnissen entsprechen, ein betriebssystemabhängiger Slash am Namensende, und diese Einträge werden ausgefiltert. glob ist nicht rekursiv, d.h. Slashes innerhalb der Treffer kommen auch nicht vor. Beim Aufbauen der Buttons setzt der OP ein uri-konformes /.

            Was übersehe ich?

            Rolf

            -- sumpsi - posui - clusi
            1. hallo

              Das passiert mNn nicht. Im glob-Ergebnis steht bei Directory-Einträgen, die Verzeichnissen entsprechen, ein betriebssystemabhängiger Slash am Namensende, und diese Einträge werden ausgefiltert. glob ist nicht rekursiv, d.h. Slashes innerhalb der Treffer kommen auch nicht vor. Beim Aufbauen der Buttons setzt der OP ein uri-konformes /.

              Was übersehe ich?

              Wenn Du nur Dateien willst, solltest Du mit glob(".", GLOB_MARK) arbeiten, da bekommst Du ein Array aus Strings mit Datei- und Verzeichnisnamen, und durch GLOB_MARK hängt an Verzeichnissen ein / oder \ hinten dran (der Wert von DIRECTORY_SEPARATOR).

              -- https://beat-stoecklin.ch/pub/index.html
  3. hallo

    if($handle){ while(($entry = readdir($handle)) !== false){ if($entry != '.' && $entry != '..' && $entry != '.htaccess'){ echo "<button onclick="location.href='./$entry'">$entry</button><br>"; } }

    Bei deinem $entry liegt Folgendes vor

    • html kontext -> html-kodieren!
    • javascript URI -> encodeURI()!
    -- https://beat-stoecklin.ch/pub/index.html
  4. @@Michael w

    Nun möchte ich das die Buttons

    Nein, du möchtest keine Buttons.

    Buttons sind für Aktionen auf einer Seite. Für Verlinkungen zu anderen Seiten sind Buttons falsch; Links richtig.

    Nicht <button onclick="location.href='./$entry'">$entry</button>, sondern <a href='./$entry'>$entry</a>.

    Insbesondere für Nutzer assisitver Technologien wie Screenreader ist wichtig, dass die richtigen HTML-Elemente für den richtigen Zweck verwendet werden.

    Mit CSS kannst du den Links eine Hintergrundfarbe geben und sie wie Buttons aussehen lassen. Auch Rahmen, runde Ecken, …

    Ob das gut ist, Links wie Buttons aussehen zu lassen, wäre noch eine andere Frage.

    LLAP 🖖

    -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. hallo

      Ob das gut ist, Links wie Buttons aussehen zu lassen, wäre noch eine andere Frage.

      Wie macht man das?

      -- https://beat-stoecklin.ch/pub/index.html
      1. Hallo,

        Links wie Buttons aussehen zu lassen

        Wie macht man das?

        Bachgrund−Colour: gray

        Gruß
        Kalk

      2. Hallo beatovich,

        Ob das gut ist, Links wie Buttons aussehen zu lassen, wäre noch eine andere Frage.

        Wie macht man das?

        Mit Vorsicht zu genießen: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/appearance

        Bis demnächst
        Matthias

        -- Pantoffeltierchen haben keine Hobbys.
      3. @@beatovich

        Ob das gut ist, Links wie Buttons aussehen zu lassen, wäre noch eine andere Frage.

        Wie macht man das?

        Mit „wie Buttons“ meinte ich nicht wie die Systembuttons auf dem jeweiligen System.

        LLAP 🖖

        -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. hallo

          @@beatovich

          Ob das gut ist, Links wie Buttons aussehen zu lassen, wäre noch eine andere Frage.

          Wie macht man das?

          Mit „wie Buttons“ meinte ich nicht wie die Systembuttons auf dem jeweiligen System.

          sondern solche? https://t3.ftcdn.net/jpg/00/00/57/58/500_F_575800_S2HRbc8VfBqMVAgCqsjb8VAJTd9AKz.jpg

          -- https://beat-stoecklin.ch/pub/index.html