Ankündigung

Einklappen
Keine Ankündigung bisher.

Änderung an der CSS macht Probleme

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Änderung an der CSS macht Probleme

    Als neues Forumsmitglied möchte ich mich gleich mit einer Frage an Euch wenden.
    Bei der Programmierung von HTML geht's so halbwegs aber bei einer CSS habe ich so meine Schwieriegkeiten.
    Dashalb suche ich mir im Web hauprsächlich Templates zusammen, die meinen Vorstellungen entsprechen.

    Im Web habe ich eine Lösung eines Image-Sliders mit HTML und CSS gefunden. Leider weiß ich nicht mehr, wo.
    Funktioniert im Prinzip sehr gut, wie Ihr auf www.nightbird.at.(Link Corona) sehen könnt.

    Ich möchte die CSS aber auf mehr als 5 Bilder erweitern. Ideal wären 12 -15.
    Aber diese Änderung macht mir Schwierigkeiten, weshalb ich Eure Hilfe bräuchte.

    Im Abschnitt /* ANIMATION */ machen mir @-moz-keyframes sowie @-webkit-keyframes Probleme, da sie nie mehr als 5 Bilder zulassen.
    Ein einfaches Copy & Paste eines Bildabschnitts funktioniert nicht.

    Die Slideshow.txt (CSS & HTML) findet Ihr im Anhang..

    Es wäre nett, wenn Ihr eine Lösung hättet.

    Danke & liebe Grüße, Nightbird.
    Angehängte Dateien

  • #2
    @-moz-keyframes sowie @-webkit-keyframes brauch man eigentlich nicht.
    Es reicht @keyframes
    Man kann das natürlich ändern mit mehr Bildern , finde das aber etwas kompliziert.
    Da gibt es einfacher Slideshows die sich leichter anpassen lassen.
    Mein (Basti1012) Forum und Chat

    Kommentar


    • #3
      Hallo Basti1012

      Gerade @keyframes macht die meisten Schwierigkeiten.
      Copy & Paste funktionieren hier nicht.
      Die Zahlen, die in den einzelnen Bild-Abschnitten enthalten sind, müssen scheinbar für jeden Abschnitt extra berechnen werden.
      Aber wie und womit, ist mir nicht klar..
      Der Kompozer kann's jedenfalls nicht.

      Einfachere Slideshows?
      Welche meinst Du?

      CSS & HTML ist in Ordnung. Aber bitte ohne JavaSript, denn das haut mir die ganze Optik zusammen.

      lG, Nightbird

      Kommentar


      • #4
        Aber bitte ohne JavaSript, denn das haut mir die ganze Optik zusammen.
        Die Optik wird nur indirekt durch Javascript beeinflusst, wenn dir das mit einem Javascript passiert ist, liegt es mit aller Wahrscheinlichkeit am HTML und CSS, das dazu gehört. Und es kann dir genau so gut mit einer Slideshow passieren, die nur mit HTML und CSS realisiert ist.
        Den Nachteil hat Basti ja schon genannt; ich würde es etwas drastischer formulieren: Es ist eine Qual, so etwas zu verändern und zu erweitern.

        Slideshows mit Javascript gibt es wie Sand am Meer. Bisher habe ich Cycle2 gern empfohlen aber leider funktionieren die Demos dort nicht mehr wegen mixed content:
        https://jquery.malsup.com/cycle2/
        Das Skript selber funktioniert jedoch, wie diese Demo bei Codepen zeigt:
        https://codepen.io/tobydawesoverit/pen/mRjNgj
        Zuletzt geändert von Sempervivum; 22.06.2021, 18:01.

        Kommentar


        • #5
          Zitat von Sempervivum Beitrag anzeigen
          ich würde es etwas drastischer formulieren: Es ist eine Qual, so etwas zu verändern und zu erweitern.
          Gerade bei seinem Beispiel.
          Man könnte es mit Javascript berechnen lassen, doch dann kann man auch gleich eine Slideshow mit Javascript nehmen.

          Zitat von Nightbird Beitrag anzeigen
          Einfachere Slideshows?
          Welche meinst Du?
          Mit Javascript ist es einfacher, das lässt sich in den meisten fällen mit einfachem Bild hinzufügen schon erweitern.
          Das siehst Du bei den Codepen ,was Sempervivum verlinkt hat.
          Da kopierst Du einfach die img Elemente zu und den rest berechnet Javascript von alleine.
          Wenn Du unbedingt eine CSS Lösung haben willst, schau mal hier https://codepen.io/search/pens?q=pure+css+slideshow
          da sind welche bei die man einfacher erweitern kann.
          Zuletzt geändert von basti1012; 23.06.2021, 19:13.
          Mein (Basti1012) Forum und Chat

          Kommentar


          • #6
            Bisher habe ich Cycle2 gern empfohlen aber leider funktionieren die Demos dort nicht mehr wegen mixed content
            Ich dachte daran, einen Issue bei Github dazu aufzumachen, aber andere haben es auch schon bemerkt und einer hat eine korrigierte und lauffähige Version der Website gepostet:
            https://vadus.tk/cycle2/

            Kommentar


            • #7
              Zitat von Sempervivum Beitrag anzeigen
              leider funktionieren die Demos dort nicht mehr wegen mixed content:
              Man kann auch mixed content im Browser erlauben.
              Zu Zeit nutze ich Chrome und da funktioniert das.
              https://qastack.com.de/programming/1...-mixed-content
              hat bein Debuggen solche Seiten schon öfftes gut geholfen.
              Wie weit das bei anderen Browse geht, weiß ich nicht.
              Mein (Basti1012) Forum und Chat

              Kommentar


              • #8
                ad Sempervivum.

                Die angegebene Demo (https://codepen.io/tobydawesoverit/pen/mRjNgj) hab' ich probiert.
                Rechtes Feld mit js ist leer.

                Aber leider erscheinen die Bilder nur untereinander.
                Das slidet gar nix.

                Habe zwar aus den js-Settings probeweise <script type="text/javascript" src="https://malsup.github.io/jquery.cycle2.js"></script> in den html-head eingefügt.
                Es tut sich aber trotzdem nix.

                Ich gebe zu, ich bin mit sowas total überfordert.
                Ist, ehrlich gasagt, nicht mein Ding.

                THX & lG, Nightbird

                Kommentar


                • #9
                  Hallo Nightbird,
                  dass bei der Demo auf codepen das JS-Feld leer ist, hat seine Richtigkeit, denn Cycle2 braucht kein zusätzliches Javascript, das eingebundene Skript erkennt die Klasse "cycle-slideshow".
                  Habe zwar aus den js-Settings probeweise <script type="text/javascript" src="https://malsup.github.io/jquery.cycle2.js"></script> in den html-head eingefügt.
                  Es tut sich aber trotzdem nix.
                  Das hast Du schon mal sehr gut erkannt. Hast Du jQuery ebenfalls eingebunden?
                  https://cdnjs.cloudflare.com/ajax/li.../jquery.min.js
                  vor jquery.cycle2.js selber.
                  Im ersten Moment hatte ich vermutet, dass Cycle2 auch eine CSS-Datei braucht aber das ist nicht der Fall. Offenbar wird alles CSS durch das Javascript angelegt.
                  Wenn das Einbinden von jQuery das Problem nicht behebt, melde dich wieder.
                  Beste Grüße - Ulrich

                  Kommentar


                  • #10
                    Hallo Ulrich/Sempervivum

                    Ja, jetzt funzt's, wie Du an http://www.nightbird.at/pub/pages/index_corona_2.html nachverfolgen kannst.
                    Danke Dir recht herzlich.

                    PS: wenn ich so frech sein darf und Du Dich so gut auskennst, wie ich vermute, hätte ich noch eine Frage,
                    falls diese in dieser Rubrik nicht total am falschen Platz ist:

                    Warum findet Google meine Site nicht?
                    Ich habe alle meine Seiten/Subseiten auf <meta name="robots" content="index, follow"> gesetzt und wochenlang gewartet.
                    Trotzdem kein Google-Ergebnis.

                    Liegt's am Thema (Corona-Kritik) ?
                    Liegt's daran, daß meine Site nur http und nicht https ist?

                    Danke & liebe Grüße, Nightbird

                    Kommentar


                    • #11
                      Hallo Nightbird, ich bin mehr Coder und weniger SEO-Spezialist. Da können dich andere sicher qualifizierter beraten. Ich glaube aber schon gelesen zu haben, dass Zugriff über http Minuspunkte gibt.
                      Ein Grund könnte sein, dass das Netz voll ist mit Infos zum Thema "Corona" und es schwer ist, sich dabei gegen andere Seiten durchzusetzen. Günstig wäre es, wenn man Infos zu einer Nische anbietet, die noch nicht so stark besetzt ist. Das könnte u. U. auch ein Unterthema zu Corona sein.

                      Kommentar


                      • #12
                        Wenn Google dich nicht alleine findet, dann kannst du da dein Link zu deiner Sitemap angeben.
                        Kommt aber auch auf das Thema deiner Seite an.
                        Wie schon gesagt, Google Suche gibt bei dem Suchwort Corona 800 Milliarden Treffer aus.
                        Auch das Wort Hilfe/soforthilfe wahr in der Corona zeit ein belebtes Suchwort Wort. Das hat mir den Platz auf der ersten Seite gekostet

                        https://www.sistrix.de/frag-sistrix/...gle-einreichen
                        Mein (Basti1012) Forum und Chat

                        Kommentar


                        • #13
                          Zitat von Nightbird Beitrag anzeigen
                          Warum findet Google meine Site nicht?
                          Ich habe alle meine Seiten/Subseiten auf <meta name="robots" content="index, follow"> gesetzt und wochenlang gewartet.
                          Trotzdem kein Google-Ergebnis.
                          Du hast keine einzige Seite im index. Nur anmelden reicht nicht. Eine Sitmap hilft sollte Google aufwachen.
                          Ein paar Links aus Verzeichnissen helfen auch wenn sie aus Ö kommen.
                          https://arnego2.com <Webseiten, Umbau ab €80 und einiges mehr>

                          VPS 8GB RAM 50 GB ROM < Server in der EU, 1rstes Jahr €38

                          Kommentar


                          • #14
                            Nightbird

                            Erster Schritt wäre, deine Seite bei Google bekannt zu machen (geht direkt bei Google, hier klicken...).
                            Unter diesem Link findest du auch die Webmastertools von Google.

                            Zweiter Schritt - falls dein Projekt viele Unterseiten hat - eine 'Sitemap' erstellen und im Hauptverzeichnis ablegen. Gibt eine strenge Syntax dafür. Verwende hierfür besser einen Online-Generator (klick...)

                            Optimiere deine Seite (SEO-Optimizing). Dazu muss man nicht nur wissen was alles das Ranking anhebt, sondern auch was alles das Ranking abwertet! Fehlerhafte Seiten werden extrem abgewertet !!! Und deine Seite ist leider sehr fehlerbehaftet (klick W3Validator)

                            Wenn dann die Seite fehlerfrei ist ist auf eine HTML5-konforme Semantik zu achten. So sollte z.B. ein <h1> immer nur einmal vorkommen und zuerst eingesetzt werden bevor die Sub-Überschriften <h2> und folgende kommen. Auf deiner Seite ist z.B. die oberste Headline ein <h2>, <h1> fehlt. Ferner sollten spezifische <div>'s auch angewendet werden - <nav> für Navigation, <article> für Artikel, <footer> für Fußbereiche, <aside>, <section> etc. Ist auf deiner Seite auch umgesetzt :-)

                            Wenn dann Fehlerfreiheit und Semantik ok sind ist die 'halbe Miete' schon geschafft :-)
                            Jetzt geht es darum, zum Thema gefunden zu werden...

                            Du hast im <head> den Meta: <meta name="keywords" content="Sozialpsychologie">

                            Die Keywords spielen fast keine Rolle mehr beim Ranking da zu viel Mißbrauch damit getrieben wurde. Es schadet aber auch nicht es zu pflegen. Dann darf es aber auch ein wenig mehr sein als ein einziges Schlagwort :-)

                            Wenn Google deine Seite listet wird der Inhalt analysiert. Je häufiger ein Schlagwort zu finden ist umso relevanter behandelt die Seite wohl auch dieses Thema. Aber nicht schummeln (Schrift gleiche Farbe wie Hintergrund und Schlagwort 1000x wiederholen und weitere Kniffe). Diese erkennt Google und wertet EXTREM ab !!!

                            Um die Schlagwortanzahl zu erhöhen bietet sich z.B. konsequenter Einsatz von 'alt' und 'title' an. Bei einem Bild von einem Baum wäre eine Option '<img src="baum.jpg alt="Bild von einem Baum" title="Toller Baum">. Schon taucht 'Baum' 3x allein beim Image-Tag auf und suggeriert eine hohe Relevanz zum Thema 'Baum'. PS: Bei <img> MUSS ein 'alt' angegeben werden. Fehlt bei dir (siehe Fehlerbericht oben).

                            Das Attribut 'title' kannst du bei (fast) allen Tags verwenden. Es erzeugt beim überfahren mit der Maus einen 'Tooltip'-Hinweis und schon sind weitere Schlagworte regulär untergebracht.

                            Falls du 'Chrome' verwendest solltest du deine Seite mit dem Google-Analysetool 'Lighthouse' checken. Öffne deine Seite im Browser, drücke <F12> und wähle bei den obersten Tab-Reitern 'Lighthouse' (ziemlich weit rechts). Da wird Performance, Best Practice, Accessibility und eben auch SEO gechecht - mit recht konkreten Hinweisen was nicht so optimal war...

                            Bei weiteren Fragen... gerne...

                            PS: Google nimmt keine Wertung des Seiteninhalts vor. Er bewertet also Corona-kritische Seiten nicht anders als Impfbefürworter-Seiten. Dies hat definitiv keine Auswirkung auf das Ranking (sofern die Inhalte kein geltendes Recht verletzen).

                            Gruß
                            ________
                            Megabyte66
                            ________

                            Kommentar


                            • #15
                              Habe hier einen längeren 'Workshop' zum Thema gepostet... erscheint aber in grün mit dem Hinweis 'Nicht freigegeben'... Warum auch immer...
                              ________
                              Megabyte66
                              ________

                              Kommentar

                              homepage-forum.de - Hilfe für Webmaster! Statistiken

                              Einklappen

                              Themen: 56.897   Beiträge: 430.898   Mitglieder: 28.650   Aktive Mitglieder: 40
                              Willkommen an unser neuestes Mitglied, Imhoteph.

                              Online-Benutzer

                              Einklappen

                              188 Benutzer sind jetzt online. Registrierte Benutzer: 3, Gäste: 185.

                              Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

                              Die neuesten Themen

                              Einklappen

                              Die neuesten Beiträge

                              Einklappen

                              Lädt...
                              X