Es gibt einen Weg, wenn er auch nicht besonders schön ist: Mit Javascript und transform:scale() die Größe von #main an die Breite des Browserfensters anpassen. Den Skalierungsfaktor musst Du berechnen.
Beiträge von Sempervivum
-
-
Zitat
hast du eine Empfehlung für einen Editor für mich
Selbst bin ich gerade auf Visual Studio Code umgestiegen und sehr zufrieden. Um richtige PHP-Unterstützung zu bekommen, musste ich etwas frickeln und ein paar Plugins installieren. Aber sonst gut und nicht so ein Monster wie Visual Studio Community.
-
Eine Idee habe ich auch: Eine Sessionvariable führen mit dem Status. Dieser kann zwei Zustände haben:
1. Vokabel anbieten
2. Eingabe des Benutzers prüfen
Zufallswert ermitteln machst Du dann nur bei 1, damit ist das ursprünglich Problem gelöst, dass bei der Prüfung der Zufallswert erneut ermittelt wird.
-
Man müsste sich mal das generierte HTML ansehen. Wenn die Seite online ist, dann poste doch mal die URL und beschreibe, wo man diese Testarea findet.
-
Einfach ganz am Anfang. Ich habe es mit dem HTML-Inspektor getestet und hatte sofort drei Spalten ohne noch etwas anpassen zu müssen.
-
Man kann sich diese ganze Rechnerei ersparen durch dieses CSS:
Code* { box-sizing: border-box; }Dann werden die Abmessungen so berechnet, wie man es für das Layout erwartet.
-
PS: Reihenfolge und Gestaltung der Bedienelemente kann man auch über eine Option steuern:
-
Wenn sie direkt beieinander sind, hast Du wahrscheinlich für beide das gleiche float angegeben. In dem Fall kannst Du einen Abstand durch ein margin herstellen.
ZitatUnd wo kann ich die Anzahl entries, die angezeigt werden sollen ändern?
Werte in der Dropdown-Liste:
https://datatables.net/reference/option/lengthMenu
Anfangswert:
https://datatables.net/reference/option/pageLength
ZitatWie mache ich es, dass ich das ganze auf eine Tabelle mit mehr Kolumnen übertragen kann?
Ich erwarte, dass das selbst anpassend ist, d. h. die Parameter werden aus der Tabelle gelesen und daraus die Suchfelder aufgebaut.
Ist jedenfalls in diesem Beispiel so, wenn man sich das JS ansieht:
https://datatables.net/examples/api/multi_filter.htmlZitatUnd die Beschriftung?
Findest Du ebenfalls in den Optionen unter "Internatianalization":
https://datatables.net/reference/option/ -
Hiernach:
https://developer.mozilla.org/de/docs/Web/HTML/Element/textarea
gibt es maxlength nur in HTML5. Hast Du auch den entsprechenden Doctype?
-
Ich hatte es im HTML-Inspektor getestet. Jetzt habe ich es noch Mal in eine Testseite eingetragen und auch dort funktioniert es einwandfrei.
-
Das ist häufig so bei Bibliotheken: Elemente werden dynamisch durch Javascript angelegt, dann sind sie im HTML-Inspektor sichtbar aber nicht im Quelltext.
Das CSS hatte ich getestet, vielleicht funktioniert es bei dir nicht, weil die Klassen anders sind. Ich untersuche es mal.
-
Die Positionen kannst Du sehr leicht vertauschen, indem Du im CSS bei float left und right vertauschst:
Code.dataTables_wrapper .dataTables_filter { float: left; text-align: right; } .dataTables_wrapper .dataTables_length { float: right; } -
Sehr gute Idee, dieses Tut zu schreiben. Fragen bzg. Kontaktformular werden ja häufig gestellt und dann kann man auf diesen Thread verweisen und muss nicht jedes Mal bei Adam und Eva anfangen.
-
Oh, bin in die falsche Zeile gerutscht. Eigentlich wollte ich dies posten:
https://datatables.net/examples/api/multi_filter.html
Vergiss das globale Suchfeld oben rechts, die spaltenspezifischen Suchfelder befinden sich unter der Tabelle.
Man kann es aber auch so einrichten, dass man die Spalte mit einem Select auswählen kann, wie Du es beschrieben hast.
-
Gut gemacht, JR!
-
So einfach ist das:
PHP<?php $images = glob("images/*.{jpg,jpeg,png,gif}", GLOB_BRACE); echo '<img src="' . $images[0] . '">'; ?>Wenn es lokal laufen soll, brauchst aber einen Webserver, z. B. XAMPP.
-
Gebaut nicht, aber das von CSS-Tricks läuft bei mir. Ich vermute, dieses Skript ist deshalb so kompliziert, weil nicht jeder Browser Drag&Drop unterstützt und man deshalb eine Rückfallebene eingebaut hat.
-
Ich bevorzuge ja das Flexlayout:
HTML
Alles anzeigen<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> </head> <body> <style> main { display: flex; flex-direction: row; width: 100vw; } .container.left { display: flex; flex: 1 1 33%; flex-direction: column; align-items: center; background-color: yellow; } .container.right { display: flex; flex: 1 1 66%; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; background-color: lightgrey; } .box.left, .box.right { flex: 1 1 50%; display: flex; flex-direction: column; align-items: center; } .header1 { width: 80%; height: 30px; background-color: black; text-align: center; margin-left: 1.5%; border-radius: 15px; margin-top: 5px; font-size: 20px; color: white; } .button { width: 150px; height: 100px; background-color: white; margin-left: 5px; margin-top: 0px; margin-bottom: 5px; border-radius: 20px; text-align: center; font-size: 18px; opacity: 0.8; } @media only screen and (max-width: 550px) { .container.right, .container.left { flex: 1 1 50%; } .box.left, .box.right { flex: 1 1 100%; } } </style> <header class="allgemein">Intranet <a href="Intranet.html"> <div class="logo"></div> </a> <a href="Intranet.html"> <div class="exe"></div> </a> </header> <main> <div class="container left"> <div class="box left"> <p class="header1">Links</p> <div class="button"> <div class="header2">Konstruktions- richtlinien </div> <div class="datei-word"></div> </div> <div class="button">hallo</div> <div class="button">hallo</div> <div class="button">hallo</div> <div class="button">hallo</div> </div> <div class="box left"> <p class="header1">Links</p> <div class="button">hallo</div> <div class="button">hallo</div> <div class="button">hallo</div> </div> </div> <div class="container right"> <div class="box right"> <p class="header1">Links</p> <div class="button"> <div class="header2">Konstruktions- richtlinien </div> <div class="datei-ordner"></div> </div> <div class="button">hallo</div> <div class="button">hallo</div> </div> <div class="box right"> <p class="header1">Links</p> <div class="button"> <div class="header2">Konstruktions- richtlinien </div> <div class="datei-ordner"></div> </div> <div class="button">hallo</div> <div class="button">hallo</div> </div> <div class="box right"> <p class="header1">Links</p> <div class="button"> <div class="header2">Konstruktions- richtlinien </div> <div class="datei-ordner"></div> </div> <div class="button">hallo</div> <div class="button">hallo</div> </div> <div class="box right"> <p class="header1">Links</p> <div class="button"> <div class="header2">Konstruktions- richtlinien </div> <div class="datei-ordner"></div> </div> <div class="button">hallo</div> <div class="button">hallo</div> </div> </div> </main> </body> </html> -
Zitat
nur dass ich einen bestimmten Ordner angebe
Das erlaubt Javascript nicht. Du musst jedes Mal die Bilder interaktiv auswählen.
-
Dafür würdest Du einen lokalen Webserver und PHP benötigen. Die Bilder kannst Du dann mit glob() einlesen. Dabei werden sie gleich sortiert, so dass Du das neueste anzeigen kannst.