Beiträge von Sempervivum

Gern geschehen!

Möglicher Weise ein Problem mit dem Cache, bei mir wird jetzt auch die Datei, die Du mit Photoshop gemacht hast, richtig angezeigt.

Photoshop hat die Vektorgrafik in ein eingebettetes PNG-Bild umgewandelt und das hat anscheinend nicht so richtig funktioniert. Ich bin da nicht weiter eingestiegen, sondern habe einfach in der originalen Datei die Farbe auf weiß geändert:

<path fill="white"

<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="discord" class="svg-inline--fa fa-discord fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z"></path></svg>

Eine SVG-Grafik enthält reinen Text, d. h. Du kannst das als discord-brands.svg speichern und dann sollte es funktionieren.

Poste doch auch die SVG-Dateien, vor und nach Umfärben.

Zitat

Ich wollte in 7# eigentlich auch nur sagen das Iframes, die Links vom gleichen Server laden eigentlich ohne probleme an pass bar sind.

Ups, da hätte ich etwas genauer lesen sollen: Deine Aussage bezog sich auf den Zugriff auf die Elemente innerhalb des iFrame und dafür trifft sie natürlich zu: Der Zugriff wird von den Browsern geblockt. Mein Posting bezog sich auf das Laden und die Anzeige einer Seite.

vue.js? Zitat aus "getting started":

Zitat

Vue ... is a progressive framework for building user interfaces.

Ist es das, was Du vor hast?

Zitat

Nachteil ist das es nicht mit Fremdseiten läuft, außer man umgeht die Cors.

Das trifft nicht ganz zu: Generell kann man sehr wohl Inhalte von Fremdseiten in iFrames anzeigen. Es ist nur so, dass Google und Co. das durch irgend welche Skripts unterbinden. Das hat aber nichts mit der SOP zu tun.

Zitat

jQuery soll ja ausgedient haben lese ich gerade.

Da ist etwas dran, aber ganz so absolut würde ich es nicht sehen. Es ist etwas dran, insofern dass viele Features wie each, Operationen mit Klassen und animate jetzt auch in Vanilla-Javascript vorhanden sind: forEach, classList und CSS3-Animationen. Gerade wenn Du von animieren schreibst, empfehle ich, dich als erstes mit CSS3-Animationen und ggf. der Webanimation-API vertraut zu machen:

https://wiki.selfhtml.org/wiki/CSS/Tutor…tion/Transition

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Animation

https://wiki.selfhtml.org/wiki/JavaScript/Animation

Da Du schreibst "Matrix" ist auch Gridlayout ein geeigneter Ansatz. Informiere dich ebenfalls bei css-tricks:

https://css-tricks.com/snippets/css/complete-guide-grid/

oder Selfhtml:

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Einführung

Prüfe, ob Du das richtige typed.js hast. Du kannst es auch zunächst mit dem typed.js aus dem CDN versuchen, wie bei Github angegeben:

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>

Sieh mal in die Console, ob Du Hinweise findest, z. B. ob es Probleme beim Laden von typed.js gibt.

Ich hatte übersehen, dass das gleiche auch für den Parameter stringsElement gilt. Und damit nicht sehr schnell geschrieben wird, musst Du zusätzlich den Parameter typeSpeed verwenden.

Dieses Javascript funktioniert mit deinem HTML:

    <script>
        var typed = new Typed('#typed', {
            stringsElement: '#typed-strings',
            typeSpeed: 40
        });
    </script>

Der erste Parameter von Typed ist ein Selektor, denn er wird mit document.querySelector(elementId) ausgewertet. Wenn da steht '.typed' muss es eine Klasse sein, in deinem Fall hast Du im HTML aber eine ID. Versuche ob es so funktioniert:

var typed = new Typed('#typed', {

Es gibt da ein Hilfsmittel, das Du u. U. noch nicht kennst und unbedingt kennen solltest: Das sind die Entwicklerwerkzeuge deines Browsers. Mit dem HTML-Inspektor kannst dir jedes Element, das Du auf der Webseite siehst, anzeigen lassen kannst, sowohl das HTML als auch das CSS. Drücke Strg+Umsch+I oder F12 bei Edge. Oder Rechtsklick auf das Element, das dich interessiert und dann "Element untersuchen" o. ä.

Zitat

Doch habe ich neulich einfach aus Interesse ein einfaches SEO-Tool über meine Seite drüberschauen lassen. Erschreckenderweise musste ich festetellen: Words= 0. Das Tool sagt mir, auf meiner Seite ist nicht ein einziges Wort geschrieben.

Wie bist Du denn dabei vorgegangen? Bei "Words=0" vermute ich, dass Du dem Tools den Quelltext vorgelegt hast, ohne dass er von PHP interpretiert wurde?

Wofür stehen denn diese Buttons im realen Leben, d. h. was bedeutet es, wenn ein Button gedrückt wird? Wahrscheinlich brauchst Du statt dessen Checkboxen, denn sie stehen ja wahrscheinlich in einem Formular und Du willst sie auf PHP-Seite auswerten.

Zitat

wahrscheinlich kann ich das nur mit größerem aufwand hinbekommen (stichwort opacity und overlay-box) oder sowas in der art.

Nein, wenn Du das auf Hintergrundbilder umstellst, sind es nur wenige Zeilen CSS, das HTML wird viel einfacher und das JS entfällt:

        .nav a {
            background-image: url(images/nav-bg-2.png);
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            padding-left: 10px;
            padding-right: 10px;
        }

        .nav a:hover {
            background-image: url(images/nav-bg-h-2.png);
        }

HTML für einen Link:

                <a classs="nav-link" href="equipment.html" alt="Equipment" id="nav-equipment">
                    EQUIPMENT
                </a>

Funktioniert denn das Ausblenden der Inhalte unter dem Header jetzt bei dir?

Link-Placement?

Hallo und willkommen im Forum,

leider muss man sagen, dass Du mit diesem Manuskript keinen guten Griff getan hast, denn der Inhalt ist veraltet, nicht so stark wie Tabellenlayout aber float ist ebenfalls nicht mehr Stand der Technik.

Mach dich am besten zunächst mit Flexlayout vertraut, hier ein Tutorial als Einstieg:

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

und eine Übersicht:

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

Ich wünsche dir ebenfalls eine schöne und gesunde Adventszeit!

Lies mal, was Selfhtml dazu sagt:

Zitat

Das article-Element stellt in sich geschlossene Abschnitte eines Dokuments dar, vergleichbar mit einem Zeitungsartikel. Es ergibt deshalb Sinn, innerhalb von article-Elementen weitere strukturierende Elemente wie header, section oder footer unterzubringen.

...

Dabei kann article sowohl das Elternelement mehrerer sections , als auch z. B. als Kommentar eines Blogartikels Kindelement einer section sein.

https://wiki.selfhtml.org/wiki/HTML/Seit…rierung/article