Beiträge von Sempervivum

Da gäbe es zwar das "order" bei Flex aber am einfachsten ist es, wenn Du einfach in deinem Editor den Textblock nach oben verschiebst.

Offenbar resultiert es immer in einem Fehler, wenn Du ein Verzeichnis als URL in einem Ajax-Aufruf angibst. Schreibe stattdessen ein Miniscript, das mit file_exists() prüft, ob das Verzeichnis existiert und gib eine entspr. Kennung z. B. "true"/"false" zurück, die kannst Du dann in done() auswerten kannst.

Darüber kannst Du dir mit phpinfo() Klarheit verschaffen. Einfach in der Ausgabe nach "xdebug" suchen.

Ich verstehe das so, dass die graue Navigation nach oben soll und weiter die ganze Zeile ausfüllen und dann darunter links die gelbe Navigation links und und der Container mit "Puschelreich - Maine Coon Zucht" rechts daneben? Dann verschiebe die graue Navigation #steuerungoben über die beiden anderen Blöcke. Lege einen Container um #steuerunglinks und section und ordne dann beide nebeneinander an.

Das ist nicht nur Erfahrung und ein geschultes Auge sondern die Entwicklerwerkzeuge des Browser sind da sehr hilfreich. Kann nur empfehlen, dich damit vertraut zu machen. Maus drüber, Rechtsklick - "Element untersuchen" und Du siehst sofort, was Sache ist.

html-seminar.de/woltlab/attachment/1855/

Der orangene Rahmen ist das Padding, das dich stört.

Ist ja cool, da habe ich wohl viel zu kompliziert gedacht.

Ja, ich benutze Visual Studio Code und mit der Erweiterung PHP Debug kann man PHP-Skripts debuggen. Setzt voraus, dass auf dem Webserver XDebug installiert ist.

Ich halte das mit dem Festlegen der Position für nicht ganz trivial: Die Schrift ist fast immer eine Proportionalschrift und dann ist es schwer, aus der Mausposition die Zeichenposition zu ermitteln. Ich würde mir statt dessen die Cursorposition im Text merken und dort das Smilie einfügen.

Ups, ich hab's: War nicht visibility sondern overflow, was man auf visible setzen muss.

Zitat

Mit visibility tut sich bei mir gar nix.

Ist ja merkwürdig: Bei mir hat es einwandfrei funktioniert, wenn ich es mit den Developertools umgeändert habe. Aber jetzt hast Du das selbe hinein editiert und es funktioniert nicht. ???

Bei mir bleibt er nicht stehen am Containerrand sondern wird unsichtbar. Das kannst Du beheben, indem Du visibility auf visible setzt für den Container mit den Smilies. Aber Du kannst das CSS nicht ändern? Dann vielleicht mit JS die betr. Anweisung überschreiben?

Das ist eine interessante Frage. Bei HTML5 ist eine Zahl als ID in der Tat valide. Es gibt aber eine Einschränkung: Für CSS gilt dies nicht, d. h. es gibt da eine Diskrepanz. Deshalb ist es trotzdem zu empfehlen, auf numerische IDs zu verzichten.

Mit Containment:

https://jsfiddle.net/Sempervivum/Ldnz5mx6/11/

Ich dachte, Du würdest dir so etwas vorstellen:

https://jsfiddle.net/Sempervivum/Ldnz5mx6/4/

Da muss man nur noch das containment ausrechnen, damit man das Bild nicht über die Grenzen hinaus bewegen kann.

Zitat

Das Problem ist, dass sich das Bild an die Seite, bzw den Bereich anpasst.

Das muss eigentlich nicht zwangsläufig so sein und wird wahrscheinlich durch dein CSS verursacht. Möchtest Du das Bild denn in einen Container legen oder soll es das ganze Fenster ausfüllen?

Nicht direkt ein Player, aber jQuery-UI ermöglicht so etwas:

https://jqueryui.com/draggable/

Wenn ich mich richtig erinnere, ist es umfangreich konfigurierbar und man kann es so einstellen, dass man nicht über die Grenzen hinaus ziehen kann.

Das betr. ul, d. h. die zweite Stufe, die nach unten aufklappt, muss nach jetzt absolut positioniert werden, wenn sie die übrigen Inhalte überdecken statt nach unten schieben soll:

html-seminar.de/woltlab/attachment/1849/

Fehlt nur noch ein heller Hintergrund, damit man die Schrift besser lesen kann.

Du hast dein Layout mit floats ausgelegt und es kommt häufig vor, dass das zu Problemen und unerwarteten Effekten führt. Dieses Problem lässt sich leicht lösen, wenn Du die Listenelemente statt dessen mit Flexlayout anordnest:

        #steuerungoben ul {
            display: flex;
            list-style-type: none;
        }

        #steuerungoben li {
            display: inline;
        }

        #steuerungoben a {
            display: block;
            width: 190px;
            /* background-color: yellow;*/
            /* float: left; */
            /* border-right: 1px red solid; */
            /* color: yellow; */
            text-decoration: none;
            line-height: 24px;
            text-align: center
        }

Ich empfehle, das Layout insgesamt auf Flex umzustellen. Du kannst Dich hier informieren:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://www.html-seminar.de/css-flexbox.htm

Ja, hier zeigen sich die Tücken von eval und der Debugger bringt es an den Tag: Der String, der übergeben wird, sieht so aus:

column1.push([object Object])

weil Du einen String zusammen baust und Javascript wandelt das Objekt paragraph in diese Stringdarstellung um.

Lösung:

window["column" + column].push(paragraph);

Dabei nutzt man aus, dass eine Variable ein Element des window-Objektes ist, das mit dem Variablennamen angesprochen werden kann.

Ich würde es jedoch vorziehen, auf diesen Trick zu verzichten und das Ganze in einem zweidimensionalen Array abzulegen:

        var columns = [[], [], [], [], []];
        var counter = 0;
        console.log("gestartet");
        const columnpositions = [2, 8, 22, 38, 57];
        const possibilitys = [0, 1, ""];
        function createElement(column) {
            console.log("new Element");
            counter++;
            var character = possibilitys[Math.round(Math.random() * 2)];
            $("#Background").append("<p id='" + counter + "'>" + character + "</p>");
            var paragraph = $("#" + counter).css({ "left": columnpositions[column] + "rem" });
            columns[column].push(paragraph);
        }
        function createRow() {
            for (var i = 0; i < 5; i++) {
                createElement(i);
            }
            window.setTimeout(createRow, 1000);
        }
        createRow();

Ups, ich hatte die $-Zeichen vergessen.