Beiträge von Sempervivum

Zitat

Jetzt wäre es halt noch toll, wenn das Submenu untereinander angezeigt wird und überlappt und nicht alles verschiebt.

Das kannst Du erreichen, wenn Du das Submenu absolut positionierst. I. allg. etwas wovon man abrät, aber in diesem Fall und allgemein bei Aufklappmenüs ein gängiges und bewährtes Verfahren:

        li {
            position: relative;
            display: inline-block;
        }

        ul.submenu {
            position: absolute;
            z-index: 999;
            left: 0;
            top: 100%;
            display: flex;
            flex-direction: column;
        }

        li:hover ul.submenu li {
            margin-top: 0 !important;
        }

        li:hover ul.submenu {
            margin-top: 0 !important;
        }

Ich habe es nicht bis ins Detail ausgearbeitet. Z. B. bei der Überdeckung heben sich die Menüpunkte wegen der einheitlichen Farbe nicht ab, da ist noch Feinarbeit gefragt.

Mit Grid habe ich keine Erfahrung aber mit Flex ist es einfach:

https://jsfiddle.net/Sempervivum/h10nte9u/9/

Es geht auch mit weniger Containern:

https://jsfiddle.net/Sempervivum/h10nte9u/13/

Mit Margins und Flex kann man noch viel mehr machen:

https://stackoverflow.com/questions/3255…856609#33856609

Zitat

es liegt einfach daran das

halt kein Platz mehr vorhanden ist um alles zu zentrieren.

Das trifft zu, justify-content kann nur wirken, wenn freier Raum vorhanden ist.

Aber warum bist Du denn der Meinung, dass Du jetzt nicht mehr mit margin arbeiten kannst? Dieses funktioniert einwandfrei, um vertikalen Abstand zwischen den Bildern herzustellen:

        aside {
            background-color: #808000;
            width: 175px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        aside>img,
        aside>a {
            margin-top: 20px;
        }

(p-Element wurde entfernt).

So, dieses funktioniert bei mir:

    <input onchange="checkdir(this.value);">
    <script>
        function checkdir(pdir) {
            $.ajax({
                url: "checkdir.php",
                method: "post",
                data: { dir: pdir }
            }).done(function (output) {
                if (output == "true") console.log(pdir + " existiert");
                else console.log(pdir + " existiert nicht");
            });
        }
    </script>

checkdir.php:

<?php
if (isset($_POST['dir'])) {
    if (file_exists($_POST['dir'])) {
        echo "true";
    } else {
        echo "false";
    }
}
?>

Zitat

Zuerst mal, muss es nicht in Zeile 7 data: vdir heißen?

Da hast Du vollkommen recht, so wie es da steht, ist es Blödsinn. So sollte es richtig sein:

$.ajax({
        url: "checkdir.php",
        data: {dir: vdir}
    }).done(function(output) {

success und done sollten eigentlich gleichwertig sein. Ich werde mal ein vollständige Testseite machen ...

Das "resultiert wahrscheinlich immer in einem Fehler" muss ich korrigieren: Ich habe es jetzt nicht genau untersucht, aber ich erwarte dass sich der Aufruf eines Verzeichnisses mit Ajax genauso verhält wie der Aufruf im Browser: Ist das Verzeichnis für Directory-Browsing freigegeben, wird das HTML des Directory-Listings zurückgegeben, ist es gesperrt, führt es zu einem Fehler.

Was das done() betrifft: Diese Funktion wird aufgerufen, wenn der Ajax-Aufruf erfolgreich war und hat die Ausgabe des Skriptes als Parameter. Müsste dann so aussehen:

function check(txt){
    var vval = ($("#text").val());
    var vdir = './upload/' + vval + '/';
    console.log(vdir);
    $.ajax({
        url: "checkdir.php",
        dir: vdir
    }).done(function(output) {
        if (output =="true") {
            // das Verzeichnis existiert
            $('#frage').animate({"opacity": "1"}, 500);
            $('#background').animate({"opacity": ".70"}, 500);
            $('#background, #frage').css({"display": "block" , "margin": "1% auto"});
            console.log('exists code');
        } else {
            console.log('not exists code');
        } 
    });
}

Ungetestet.

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/