Die Standard-Überschriften kannst Du doch beliebig mit CSS anders stylen. Warum möchtest Du selbst welche definieren?
Beiträge von Sempervivum
-
-
Zitat
Was ist "best use"? Meiner Auffassung nach der schlankere HTML-Code in Form einer einzigen ul ohne Unterliste. Was meint Ihr?
Ich bin da anderer Meinung: Hier spielt nicht nur eine Rolle, wie schlank der HTML-Code ist und wie leicht er sich stylen lässt sondern auch die Logik bzw. Semantik: Die Unterpunkte sind jeweils einem Hauptpunkt unter- bzw. zugeordnet und das sollte sich auch direkt im HTML wiederspiegeln.
ZitatIn CSS brauche ich so so oder so einen Klassenselektor für die Unterliste.
Nicht unbedingt:
CSS für die Listenelemente der Hauptliste:
Codenav>ul>li { }CSS für die Listenelemente der Unterliste:
Codenav>ul>li>ul>li { } -
Mit Gridlayout ist das recht einfach, hier eine Demo:
HTML
Alles anzeigen<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Zwei-Spalten-Layout mit Grid</title> <style> body { margin: 0; } .grid-2-cols { margin-left: 3em; display: grid; grid-template-columns: 1fr 1fr; gap: 1em 1em; } section { padding: 0.5em; } </style> </head> <body> <section> <h1>Die Hauptüberschrift</h1> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </section> <div class="grid-2-cols"> <section> <h2>Die Überschrift</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </section> <section> <h2>Die Überschrift</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </section> <section> <h2>Die Überschrift</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </section> <section> <h2>Die Überschrift</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </section> <section> <h2>Die Überschrift</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </section> <section> <h2>Die Überschrift</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </section> </div> </body> </html>Ich verstehe deine Frage erst Mal so, dass Du dieses Layout haben möchtest. Wenn Du auch das "Weitere Ergebnisse ...:" haben willst, muss man das noch etwas erweitern.
-
Bootstrap für das Layout ist heute überflüssig, denn es gibt Grid und Flex.
-
Das Metatag mit dem charset ist nur die eine Seite der Medaille. Du musst deine Dateien aber auch in UTF-8 speichern, sonst hilft das nichts.
-
Wie Axel es gemacht hat, sehe ich, aber nicht deinen Code. Posten diesen doch mal.
-
Zitat
Der Befehl wird dadurch schon ganz schön aufwändig:
Das trifft allerdings zu
Wenn Du dagegen mein Posting nicht ignorierst, ist es für jeden Button ein Einzeiler, wie bisher, plus ein paar Zeilen CSS, diese aber nur einmal für alle Buttons. -
Ich würde anders herum vorgehen: Es bei dem a-href-Tag belassen, das button-Tag weglassen und das a-href-Tag mit CSS so gestalten, dass es wie ein Button aussieht. Wird ebenfalls so empfohlen, z. B. bei Stackoverflow.
-
Zitat
Dies ist eine Code Competition bei der ich nur JavaScript verwenden darf.
Das erklärt natürlich einiges. Ich hatte mich schon gewundert, warum Du dafür keine serverseitige Lösung andenkst, aber dachte "er wird schon wissen, was er tut"
-
Ich habe zwar keine Ahnung von Firebase aber mit solchen asynchronen Vorgängen ist es immer gleich: Dort wo Du die Liste generierst, bist Du nicht direkt in der Funktion readData sonden in der anonymen Funktion des then. Notierst Du dort return, verlässt Du letztere Funktion mit diesem Rückgabewert aber nicht readData. Du musst bei dem asynchronen Konzept bleiben und deinen weiteren Code in der anonymen Funktion notieren und ausführen. Ggf. damit es eleganter ist und falls die Funktion readData universeller sein soll, diesen Code in einer Funktion als Callback übergeben.
-
Der Code ist jederzeit zugänglich durch Rechtsklick - Seitenquelltext anzeigen o. ä. aber hier ist er nochmal:
HTML
Alles anzeigen<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Swipe Demo</title> <style> body { margin: 0; } #img-container { width: 100%; display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; } #img-container img { width: calc(100vmin - 20px); height: calc(100vmin - 20px); object-fit: contain; min-height: 1px; flex: 0 0 100%; scroll-snap-align: center; } </style> </head> <body> <div id="img-container"> <img src="images/bild1.jpg"> <img src="images/bild2.jpg"> <img src="images/bild3.jpg"> <img src="images/bild4.jpg"> <img src="images/bild5.jpg"> <img src="images/buddenbrookhaus_01.jpg"> <img src="images/burgtor_01.jpg"> </div> </body> </html> -
-
Ich bin zwar nicht Sailor
aber ich bin ein wenig verwirrt: Ganz am Anfang hast Du von vertikalem Scrollen geschrieben und auch bei dem Link dort wird vertikal gescrollt. Aber zuletzt geht es um horizontales Scrollen?Für des horizontale habe ich vor ein paar Tagen für einen anderen Thread so etwas gemacht:
https://webentwicklung.ulrichbangert.de/thread363-swipe-images-2.html
Funktioniert auch auf Touch-Geräten durch Wischen.
-
Zitat
Wären die Formulare dann auch einzeln Speicherbar?
Dafür müsstest Du den Dateinamen der Zieldatei angeben. Entweder durch Eingabe durch den Benutzer (fehleranfällig) oder indem Du ein Select dafür anlegst. Dann braucht es das Formular nur einmal zu geben, voraus gesetzt, die Dateien sind alle gleich aufgebaut.
-
Zitat
wenn ich zb. 20 Bilder in einer Thumbnail -ansicht untereinander habe und zb. auf das 9. klicke, wie kann dann das 9. Bild kommen und ich in beide Richtungen swipen, also vor zum 1. und bis zum letzten.
Das lässt sich machen, wenn man mit Ankern arbeitet:
https://webentwicklung.ulrichbangert.de/thread363-swipe-images-3.html
Allerdings hat man dann nicht dieses schöne weiche Scrollen.
ZitatOder tüfteln wir da grad an etwas herum, für das es coole dienste wie eben zb. fancybox gibt ?
Das kann gut sein: Ich kenne da ein Skript namens Swiper, wo man die Galerie formatfüllend anlegen kann und ebenfalls durch Wischen navigieren:
https://swiperjs.com/demos/#thumbs_gallery
Wie Du siehst hat man auch dieses weiche Scrollen wenn man auf ein Thumbnail klickt. Außerdem lässt sich diese Galerie auch am PC durch Wischen mit der Maus bedienen. Ich habe schon Benutzer kennen gelernt, die es vom Handy kannten und erwarteten, dass es auch am PC funktioniert.
-
Ich habe hier mal zwei Varianten zusammen gestellt, wie man etwas über ein Bild legen kann. Was dort Text ist, wäre bei deinem Anwendungsfall das Siegel. Versuche, das auf deine Seite zu übernehmen.
-
Zitat
wie ich hunderte Meetings im Localstorage abspeichern kann
Für größere Datenmengen ist Localstorage weniger geeignet, aber es gibt eine Alternative: IndexedDB:
-
Hallo Sascha, willkommen im Forum!
Selbstverständlich ist das möglich. Eine Template-Datei anlegen mit Platzhaltern. Gängig sind dabei doppelte geschweifte Klammern:
{{datum}}
Und dann ein Formular, wo es für jeden Wert ein Eingabefeld gibt. Beim Abschicken dann mit PHP die Template-Datei laden, die Platzhalter ersetzen und unter dem Zielnamen speichern
-
Hallo Olli,
ich bin mal folgender Maßen vorgegangen: Das letzte Wort, d. h. hinter Leerzeichen oder <br> ermitteln und prüfen, ob es in eine Zeile passt. Wenn nicht, Hinweis an den Benutzer ausgeben. Hat man den Fehlerfall erst Mal erkannt, kann man auch andere Reaktionen programmieren, z. B. zwangsweise einen Zeilenumbruch einzufügen.
Wenn das Wort passt, kann man ganz normal beim ersten Leerzeichen vom Ende aus gesehen einen Zeilenumbruch einfügen.
HTML
Alles anzeigen<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8" /> <title>Automatic Wrapping</title> <style> #text-container, #help-container { display: inline-block; border: 2px solid lightblue; min-height: 1em; } #text-container { width: 200px; } #help-container { min-width: 200px; } </style> </head> <body> <div id="text-container" contenteditable="true"></div> <div id="help-container"></div> <textarea id="help-textarea"></textarea> <script> const container = document.getElementById('text-container'); const helpcontainer = document.getElementById('help-container'); const textarea = document.getElementById('help-textarea'); const maxWidth = 200; container.addEventListener('keyup', (event) => { let text = container.innerHTML; console.log(text); let helptext = ''; for (let i = 0; i < text.length; i++) { helptext += text.charAt(i); helpcontainer.innerHTML = helptext; // Aktuelle Breite des Hilfscontainers ermitteln let currentWidth = helpcontainer.clientWidth; // Ist diese Breite groesser als die maximale? if (currentWidth > maxWidth) { // Jetzt ermitteln wir das letzte (u. U. sehr lange) Wort helptext2 = helptext.match(/(\s|<br>)([^\s]+)$/)[2]; // und tragen es in den Hilfscontainer ein helpcontainer.innerHTML = helptext2; // Ist die Breite des Hilfscontainers bzw. die Breite // des letzten Wortes kleiner oder gleich der max. Breite? if (helpcontainer.clientWidth <= maxWidth) { // Alles OK: Zeilenumbruch beim letzten Leerzeichen einfuegen helptext = helptext.replace(/\s([^\s]+)$/, '<br>$1'); } else { // Das Wort ist zu lang und passt nicht in die Zeile: // Hinweis an den Benutzer console.log('Das Wort ' + helptext2 + ' ist zu lang'); // Schleife abbrechen, damit der Hinweis nicht wiederholt wird break; } } } textarea.value = helptext; }); </script> </body> </html> -
So etwas kann man sehr gut mit vue.js machen:
https://vuejs.org/v2/cookbook/us…nsume-apis.html
Dann brauchst Du kein $.get weil das Holen des JSON durch axios erledigt wird.
Da Du schreibst, dass Du die Daten mit einer Schleife verarbeitest, brauchst Du auch mit Vue eine Iteration. Das wird hier beschrieben: