Beiträge von Jonathan C.

    Hallo Zusammen,


    ich versuche mich gerade im Webseiten-Design.


    In meiner Menüleiste habe ich eine SVG-Datei eingebaut (SocialMedia-Link).

    Da das Bild weiß sein soll, habe ich die schwarze SVG-Datei in Photoshop in weiß gefärbt.

    Doch das Bild wird trotz richtigem HTML und CSS Code nicht angezeigt. Wenn ich die normale schwarz gefärbte Datei verwende, wird das Bild aber angezeigt.


    Ich bitte um Hilfe.


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

    Das Twitter- und das Instagram-Icon sind FontAwesome 4 Icons.

    Da es dort kein Icon für Discord gibt, verwende ich eine SVG-Datei.


    HTML-Code:

    CSS
    #fa-discord1>img {
        height: 17px;
        width: 17px;
        margin-top: 5px;
        margin-left: 1px;
    }
    #fa-discord1:hover {
        opacity: .8;
    }


    Vielen Dank im Voraus und eine schöne Weihnachtszeit.


    Liebe Grüße

    Jonathan C.

    Dankeschön für deine Antwort timtim .


    Deine Idee, beide Versionen einzubinden funktioniert bei mir leider nicht. Ich verwende die WoltLab Suite, da kann ich dann die normalen 4er Icons nicht so einfach überschreiben.

    Ich hätte das für eine SocialMedia-Box gebraucht und habe mich jetzt vom TeamSpeak-Icon (Version 5) getrennt, damit kann ich aber leben.

    Das ist ansonsten zu kompliziert.


    Aber vielen Dank dir! :)

    Hallo zusammen,


    auf meiner Webseite müssen aus Design-Gründen die FontAwesome-Icons in Version 4 verwendet werden.

    Lediglich in einer bestimmten Box (Div-Container) sollen die Icons in Version 5 erscheinen.


    Wenn ich das Script zur Einbindung der FontAwesome Icons in den Div kopiere, dann ist das Script auf der ganzen Seite wirksam und nicht nur in der bestimmten Box.


    Gibt es eine Möglichkeit, das ganze über Javascript einzugrenzen?

    Habe das Ganze mal sinngemäß folgendermaßen versucht:

    JavaScript
    <script>  
        if (document.getElementById( 's1' ) {
            src = "https://kit.fontawesome.com/d33231fe32.js";
        });</script>

    Bedeutet, ich möchte abfragen, in welchem Div-Container sich das Script befindet und es nur dann dort ausführen.


    Wäre mega nett, wenn mir da jemand weiterhelfen könnte.


    Dankeschön im Voraus.


    Liebe Grüße

    Jonathan C. :)

    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

    https://jsfiddle.net/Sempervivum/s9a406gq/5/

    Vielen herzlichen Dank, das funktioniert wunderbar.

    Ebenfalls einen schönen Ostermontag!

    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.

    Okay, dann belasse ich das bei der vorherigen Methode.


    So, jetzt ist es spät genug für mich, gute Nacht!

    Ich möchte mich aufrichtig für Deine Hilfe bedanken. Ich habe wenig Leute im Internet gesehen, die mir so ausführlich geholfen haben.

    Vielen Dank und eine gute Nacht. :)

    Also, das mit dem aus der Mitte heraus einblenden funktioniert jetzt so weit, da hatte ich einen Fehler gemacht.


    Trotzdem würde mich interessieren, wie ich einen Effekt mit Opacity machen kann, der Div aber nur eingeblendet wird, wenn auch das Logo eingeblendet wird.

    Hast Du da eine Idee?


    Sieh dir dies an, das müsste sein, was Du dir vorstellst:

    https://jsfiddle.net/Sempervivum/6jtr2vw7/2/

    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.

    Du hattest mir dann vorhin zwei Möglichkeiten genannt. Die 1. hat an sich funktioniert, jedoch wollte ich einfach zum Lernen und aus Schönheitsgründen die 2. nochmal ausprobieren, mit Opacity bzw. Scale zu arbeiten. Aber wenn ich eine Opacity bzw. Scale einbaue, ist das Menü dauerhaft nach recht verschoben, als wäre das Logo eingeblendet, ist es aber nicht. Wenn ich den Div dann ausblende, wie jetzt in deinem Code, dann funktioniert die Opacity-Animation nicht mehr. :P

    Da verschiebt sich nichts.

    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 habe jetzt mal ein Video gemacht.

    Zu sehen ist, dass die Animation an sich funktioniert. Wenn man aber den Div, also den störenden freien Platz ausblendet, dann funktioniert die Animation nicht mehr.

    Nicht wundern, wenn das alles ein wenig komisch aussieht, ich habe so gut wie alle Inhalte entfernt.

    Video entfernt.

    Genau das verstehe ich nicht: Weil bei Skalierung sich die Größe des div nicht ändert, dürfte sich doch nichts verschieben?

    Wäre es eine Möglichkeit, dass Du eine Demo ohne Inhalte mit irgend welchen Blindtexten machst und diese online stellst?

    Online stellen ohne Inhalte ist leider schwierig, weil es sich dabei um ein WoltLab-Forum handelt.

    Wenn Du möchtest nehme ich Dir das ganze einmal auf.

    Ich verstehe nicht, was Du mit dem Ausblenden durch display: none; erreichen willst. Anscheinend gibt es ja da ohne das einen störenden Effekt, den Du beseitigen willst.

    Das Logo wird ja erst beim Scrollen ab einem bestimmten Punkt auf der Seite angezeigt. Wenn das Logo eingeblendet wird, verschiebt sich das Navigationsmenü nach rechts und dann taucht das Logo auf.

    Mit dem Display none wollte ich erreichen, dass der Div Container, also der freie Platz, der im Menü angezeigt wird, obwohl das Scroll-Event noch nicht gestartet wurde und das Bild daher noch unsichtbar ist, ausgeblendet wird, da dieser stört.


    Hast Du die Möglichkeit, das ganze online zu stellen, damit man es sich ansehen kann?

    Das würde ich sehr gerne machen, allerdings darf ich das Projekt nicht veröffentlichen. Ich weiß, das ist blöd und könnte uns einiges ersparen. :|

    An sich funktioniert das auch mit Opacity. Wenn ich aber den Div vorher wieder ausblende, geht auch hier der Effekt nicht mehr.


    Entschuldige bitte für die Verwirrung.

    Wir haben ja vorhin das mit dem vertikal mittig probiert. Jetzt wollte ich das mit dem scale auch einmal testen.

    Dazu habe ich obigen CSS Code erstellt.


    Der Scale-Effekt hat so lange funktioniert, bis ich den Div ausblenden wollte, wenn kein Scroll erfolgt.

    Nun ist allerdings folgendes:

    Die JavaScript-Animation an sich funktioniert, der Div an sich ist auch nur nach dem Scrollen eingeblendet, allerdings funktioniert der CSS-Effekt nicht.

    Die JavaScript-Animation an sich funktioniert, der Div an sich ist auch nur nach dem Scrollen eingeblendet, allerdings funktioniert der CSS-Effekt nicht. :P