Möglicher Weise kann man das irgend wie retten, indem man nur den fraglichen Header überarbeitet aber dazu müsste man das HTML und das CSS im Zusammenhang sehen. Hast Du eine URL?
Beiträge von Sempervivum
-
-
So sieht das HTML schon entschieden besser aus. Perfekt wäre es, wenn Du es nicht als Screenshot sondern als Text in Code-Tags, das </> in der Werkzeugleiste oben, posten würdest.
Dann habe ich vorhin bemerkt, dass mir bei der Formulierunng in meinem Posting #4 ein Fehler unterlaufen ist. Der letzte Satz muss lauten:
ZitatUnd dann ist der Grund, warum es nicht funktioniert, offenbar, dass Du das CSS, das Du gepostet hast, auf den Flex-Container anwenden musst und nicht auf das Formular, das offenbar ein Flex-Item oder ein Kind davon ist.
Das was jetzt fett geschrieben ist fehlte.
Damit das Ganze funktioniert, müsste das HTML etwa so aussehen:
Code<div class="align-vertical-center"> <section> <h1>Say Hallo</h1> <!-- und der ganze Rest mit u. a. der Social-Buttons --> </section> <form> <!-- hier die Formularelementd --> </form> </div>und das CSS so:
Codediv.align-vertical-center { display: flex; align.items: center; }Hier habe ich natürlich nur das angegeben, worauf es ankommt.
Das div.align-vertical-center ist der Flex-Container und section und form die Flex-Items.
Das align-items: center; wirkt nur auf die direkten Kinder des Flex-Containers, die Flex-Items.
-
Ich habe mal etwas einfaches realisiert:
Eine Art quadratischen Rahmen definiert und die Bilder mit object-fit darin eingebettet. Und zwar so, dass jedes Bild vollständig sichtbar ist und nichts abgeschnitten wird. Dabei entstehen jetzt Leerräume, entwder seitlich oder oben und unten, je nach Orientierung. Sieh es dir mal an:
https://webentwicklung.ulrichbangert.de/thread363-swipe-images-2.html
-
Am einfachsten, wenn Du die beteiligten IDs in ein zweidimensionale Array einträgst und darüber eine Schleife legst. In der Schleife dann die Funktion myRange aufrufen mit den IDs als Parameter.
Alternative: Die drei beteiligten Elemente jeweils z. B. in einem Fieldset gruppieren. Dann eine Schleife über diese Fieldsets und jeweils die Berechnung durchführen.
-
PS: Mir scheint, ich habe das vorhin noch nicht richtig verstanden: Das Problem ist, dass das Skript vom Ende gesehen das erste Leerzeichen durch ein <br> ersetzt, so dass dort Zeilenumbrüche hinkommen, wo keine sein sollen. Wenn Du es nicht lösen kannst, melde dich wieder.
-
Verstehe, das ist natürlich ein Problem. Eine hundertprozentige Lösung wäre eine automatische Silbentrennung, aber das ist eine Wissenschaft für sich und nicht so auf die Schnelle zu machen. Vielleicht nur den Fall erkennen und dem Benutzer einen Hinweis geben, dass er manuell einen Umbruch einfügen soll?
-
Das ist zunächst mal kein Wunder. Ich nehme an, deine Bilder haben nicht alle das selbe Format. Ich werde es mir ansehen und versuchen, das CSS anzupassen.
-
Um sicher zu gehen, habe ich das mit der Textarea mal untersucht und konnte bei den automatischen Umbrüchen keine Steuerzeichen finden.
Darauf hin habe ich eine Demo mit dem Verfahren gemacht, das ich beschrieben habe. Ist nicht besonders kompliziert und scheint gut zu funktionieren:
HTML
Alles anzeigen<!DOCTYPE html> <html lang="en"> <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); helptext = ''; for (let i = 0; i < text.length; i++) { helptext += text.charAt(i); helpcontainer.innerHTML = helptext; let currentWidth = helpcontainer.clientWidth; if (currentWidth > maxWidth) { helptext = helptext.replace(/\s([^\s]+)$/, '<br>$1'); } } textarea.value = helptext; }); </script> </body> </html> -
Du könntest den Zeilenumbruch des Benutzers in der DB speichern und die zusätzlichen erst beim Zeichnen hinzu fügen. Die Funktion kann man sicher so erweitern, dass sie vorhandene Zeilenumbrüche beibehält.
ZitatGibt es evtl. mit jquery oder js eine möglichkeit?
Ich wüsste nicht, wie man aus einer Textarea die automatisch eingefügten Zeilenumbrüche heraus lesen könnte. Aber es wäre eine Möglichkeit, das Verfahren, das ich oben angedeutet habe, zu verwenden: Den Text in einen Hilfscontainer zu schreiben und ständig zu prüfen, ob der Text nicht hinein passt und in dem Fall den Text umzubrechen.
-
Ups, da haben sich jetzt unsere Postings überschnitten. Als erstes würde ich diese Inflation von div-Containern auf das notwendige reduzieren.
Und dann ist der Grund, warum es nicht funktioniert, offenbar, dass Du das CSS, das Du gepostet hast, auf den Flex-Container und nicht auf das Formular, das offenbar ein Flex-Item oder ein Kind davon ist.
-
Bevor es Flexlayout gab, war es gar nicht so einfach, mit CSS etwas vertikal zu zentrieren. Aber jetzt kein Problem, informiere dich über Flexlayout, z. B. hier:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
align-items ist dann das was Du brauchst.
-
Hier wird eine Funktion angeboten, die beim Zeichnen des Textes die Zeilenumbrüche automatisch einfügt:
https://www.php.net/manual/de/function.imagettfbbox.php
(nach "Automatic line breaks" suchen).
Möglicher Weise könntest Du die Texte ohne Zeilenumbrüche in der DB speichern und sie mit Hilfe dieser Funktion erst beim Zeichnen hinzu fügen. Würde auch insofern Sinn machen, weil Du für die Zeilenumbrüche die Fontsize und die verfügbare Breite brauchst, die mehr an die Grafik gebunden sind.
Oder es clientseitig machen, indem Du die Funktion oben nachbildest, indem Du den Text in einen HTML-Container schreibst.
-
Zitat
Ich möchte ein Gedicht als Grafik Speichern.
Wo möchtest Du diese Grafik denn speichern, lokal oder auf dem Server?
-
Hier wird das Problem diskutiert
https://stackoverflow.com/questions/2034…iphone-and-ipad
und geschrieben, dass iOS-Geräte ein Video nur abspielen, wenn die Controls eingeschaltet sind. Macht auch Sinn, denn das Autoplay ist i. allg. geblockt und man muss das Video ja irgend wie starten.
-
Kann man sich das irgend wo online ansehen?
-
Einen schönen Ostermontag! Ich habe mal eine Demo mit scale gemacht. War eine Sache von Minuten, jetzt wo ich weiß, wie es sein soll. Man muss:
- Das Bild an Stelle des Containers mit scale verkleinern
- Den Ursprung für die Transformation an die linke Kante legen
- Zusätzlich den Container in der Breite verkleinern, damit die Inhalte rechts der Animation folgen
-
Nein, da habe ich leider keine Idee. Wenn das Div am Anfang ein display:none hat, funktioniert die Animation nicht, aus den Gründen, die bei Stackoverflow beschrieben werden. Und das display ist nicht animierbar.
So, jetzt ist es spät genug für mich, gute Nacht!
-
Zitat
Ja, so ungefähr. Aber das hatten wir ja vorhin schon einmal.
Das Problem ist, dass das Bild von der linken oberen Ecke eingeblendet wird und nicht aus der Mitte heraus.
Bei mir nicht, es wird von links und der Mitte (vertikal) eingeblendet. Was für einen Browser benutzt Du? Unterstützt diese vielleicht kein Flex?
-
Sieh dir dies an, das müsste sein, was Du dir vorstellst:
-
Zitat
Das Menü soll sich ja verschieben. Wenn das Logo nicht eingeblendet ist, dann soll das Menü ganz normal positioniert sein. Wenn das Logo eingeblendet ist, dann soll sich das Menü nach rechts verschieben.
Ich denke, das verstehe ich jetzt. Nur wenn ich es richtig verstehe, sind wir dann genau da wo wir mit animierter Höhe und Breite und vertikaler Zentrierung waren. Moment, ich mache ein Fiddle ...