Ankündigung

Einklappen
Keine Ankündigung bisher.

text-align

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

  • #16
    allerdings verstehe ich nicht ganz, weshalb mir jedesmal vom float abgeraten wird?
    Ich habe es mit flex ersetzt und konnte keinen Unterschied feststellen. :-/
    Bei solch einer einfachen Struktur geht es auch mit float gut aber die Probleme gehen los, wenn es etwas komplexer wird. Bei Verwendung von float wird das Element aus dem Textfluss genommen, so dass es zu Überdeckungen kommen kann. Außerdem pflanzt sich float endlos fort und das muss mit clear unterbunden werden. Hier ein Beispiel:
    https://jsfiddle.net/Sempervivum/3drc9t2b/

    Die Struktur, die Du beschreibst, kannst Du problemlos ohne position:fixed realisieren indem Du nur den linken Container scrollst, daran sind wir ja gerade. Es gab da mal eine ganz ähnliche Aufgabe, links einen Container, der automatisch scrollt und rechts anderer Inhalt. Das habe ich problemlos mit der Webanimations-API gelöst.

    Außerdem stimme ich MrMurphy zu, ohne den kompletten Code zu sehen, kann man nur schwer heraus finden, warum es bei dir nicht funktioniert.

    Eine mögliche Ursache kann auch der Cache sein, wie von arnego2 angemerkt. Die Seite mit Strg+F5 neu laden, dann werden auch eingebundene Dateien neu geladen.

    Kommentar


    • #17
      Zitat von silent Beitrag anzeigen
      arnego2 ich mache dieses am eigenen PC. Natürlich benutze ich auch dafür den Privaten Modus im Browser, damit genau so was nicht passiert.
      Darauf würd ich mich nicht verlassen nicht alle Browser in Privaten Modus speichern keine Bilder und CSS.
      https://superuser.com/questions/2448...ivate-browsing
      https://arnego2.com <Webseiten, Umbau ab €80 und einiges mehr>

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

      Kommentar


      • #18
        Ich habe mal eine Demo gemacht, wie es funktioniert, inkl. der rechten Slideshow mit Webanimations-API:
        Code:
        <!doctype html>
        <html lang="en" dir="ltr">
        <head>
            <style>
                html,
                body {
                    height: 100%;
                }
                body {
                    margin: 0;
                    display: flex;
                }
                #leftdiv,
                #rightdiv {
                    flex: 1;
                }
                #leftdiv {
                    overflow: auto;
                }
                #rightdiv {
                    display: flex;
                    flex-direction: column;
                    overflow: hidden;
                }
                #rightdiv h1 {
                    text-align: center;
                }
                main {
                    flex: 1;
                    overflow: hidden;
                    min-height: 1px;
                }
                #gallery {
                    width: 100%;
                    /* padding-top: 141%; */
                    height: 0;
                    margin: 0 auto;
                    overflow: hidden;
                    position: relative;
                }
                #gallery figure {
                    position: absolute;
                    width: 100%;
                    margin: 0;
                    padding: 0;
                }
                #gallery img {
                    width: 100%;
                    margin: 0;
                    padding: 0;
                }
                #gallery figure {
                    height: auto;
                }
                #gallery:hover figure {
                    animation-play-state: paused;
                }
            </style>
            <title>
                Responsive CSS Only Slideshow
            </title>
        </head>
        <body>
            <div id="leftdiv">
                <h1>Umfangreicher Inhalt</h1>
                <p>
                    <!-- gekuerzt -->
                </p>
            </div>
            <div id="rightdiv">
                <h1> Informationen </h1>
                <main>
                    <div id="gallery">
                        <figure>
                            <!-- <?php
        $images = glob('html/Schwarzes_Brett/input/daten/jpg/*.jpg');
        foreach ($images as $img) {
            echo '<img src="' . $img . '">';
        }
        ?> -->
                            <!-- hier die Bilder, beliebig viele aber das Seitenverhaeltnis
                            muss einheitlich sein -->
                        </figure>
                    </div>
                </main>
            </div>
            <script>
                // Rechte Slideshow in Container einpassen
                const main = document.querySelector('main');
                const gall = document.getElementById('gallery');
                // Seitenverhaeltnis der Bilder
                const aspectRatio = 724 / 1024;
                function setSize() {
                    const wMain = main.clientWidth;
                    const hMain = main.clientHeight;
                    // abhaengig vom Seitenverhaeltnis passen wird die
                    // Slideshow so ein, dass nichts abgeschnitten wird
                    if (wMain / hMain > aspectRatio) {
                        gall.style.height = hMain + 'px';
                        gall.style.width = (hMain * aspectRatio) + 'px';
                    } else {
                        gall.style.width = wMain + 'px';
                        gall.style.height = (wMain / aspectRatio) + 'px';
                    }
                }
                window.addEventListener('resize', setSize);
                setSize();
            </script>
            <script>
                // Animation der rechten Slideshow durch die
                // Webanimations-API
                const stillTime = 2000; // Standzeit
                const animTime = 500; // Zeit der Animation
                const nrSlides = document.querySelectorAll('#gallery img').length;
                const slideEle = document.querySelector('#gallery figure');
                // Dauer der gesamten Animation
                const duration = (stillTime + animTime) * nrSlides;
                let anikf = [{ top: '-0%', offset: 0 }];
                let currentTime = 0,
                    perc = 0;
                for (let i = 0; i < nrSlides; i++) {
                    anikf.push({ top: '-' + perc + '%', offset: (currentTime + stillTime) / duration });
                    currentTime += stillTime + animTime;
                    perc += 100;
                    if (i == nrSlides - 1) perc = 0;
                    anikf.push({ top: '-' + perc + '%', offset: currentTime / duration });
                }
                const aniopt = {
                    duration: duration,
                    iterations: 1,
                    fill: 'forwards',
                    direction: 'normal',
                    iterations: Infinity
                };
                const ani = slideEle.animate(anikf, aniopt);
            </script>
        </body>
        </html>
        Zuletzt geändert von Sempervivum; 29.10.2020, 01:59.

        Kommentar


        • #19
          PS: Was fehlt, ist das automatische Scrollen im linken Div. Wenn es nur automatisch erfolgen soll, kann man das sehr gut auch mit der Webanimations-API machen. Ich schrieb ja, dass ich das schon einmal für einen anderen Thread realisiert habe.

          Kommentar


          • #20
            Guten Tag,
            leider komme ich die Woche nicht mehr dazu, das alles zu testen, da ich noch andere Sachen erledigen muss. Ich würde es nächste Woche probieren und mich bei euch melden, ob es geklappt hat.
            Dennoch möchte ich mich jetzt schon bedanken, dass Ihr euch zeigt genommen habt!

            VG

            Kommentar


            • #21
              Hier sollte man flexbox verwenden.

              https://t3n.de/news/flexbox-wofuer-t...wofuer-718520/

              Kommentar


              • #22
                Guten Morgen,
                Sempervivum ich habe mal deinen Code in meinen implementiert. Sieht sehr gut aus, allerdings verkleinert er die CSV-Datei, die im linken Div ist, ebenfalls. Desweiteren wird die Datei auch nicht mehr Zentriert angezeigt, sondern auf der ganz linken Seite. :-/
                In meinem Code konnte ich mit den Befehlen "width" im linken sowie im rechten Div anpassen, wie breit das Div sein soll, versuche ich das bei deinem, funktioniert das nicht so ganz. :-/
                Das Bild wird ebenfalls zu klein dargestellt.
                const aspectRatio = 724 / 1024;
                Wenn ich es richtig verstanden habe, muss ich ledeglich das anpassen, für die Bilder, richtig?

                Dennoch vielen Dank, für den Code!

                VG!

                Kommentar


                • #23
                  const aspectRatio = 724 / 1024;
                  Wenn ich es richtig verstanden habe, muss ich ledeglich das anpassen, für die Bilder, richtig?
                  Ja, das hast Du richtig verstanden.

                  Kommentar


                  • #24
                    allerdings verkleinert er die CSV-Datei, die im linken Div ist, ebenfalls. Desweiteren wird die Datei auch nicht mehr Zentriert angezeigt, sondern auf der ganz linken Seite. :-/
                    Durch dieses CSS:
                    Code:
                            #leftdiv,
                            #rightdiv {
                                flex: 1;
                            }
                    wird die Breite des linken und des rechten Containers jeweils auf die Hälfte des Browserfensters eingestellt. Ist es das was Du meinst? Am besten poste mal deine Code. Den Inhalt kannst Du ja kürzen, wie ich es getan habe.

                    Kommentar


                    • #25
                      Genau, es wird auf die Hälfte des Browserfensters eingestellt, allerdings möchte ich, dass das linke Div kleiner ist, als das rechte Div.
                      Kann ich das dort wieder mit "width" einstellen?

                      VG!

                      Kommentar


                      • #26
                        Das ist sehr einfach:
                        Mit der Eigenschaft "flex" kannst Du die Breite im Verhältnis einstellen:
                        Code:
                        #leftdiv {
                            flex: 1;
                        }
                        
                        #rightdiv {
                            flex: 2;
                        }
                        So ist der rechte Container doppelt so breit wie der linke.

                        Kommentar


                        • #27
                          Ich habe diesen jetzt so eingefügt, leider hat sich dabei nichts geändert. :-/
                          Code:
                          #leftdiv {
                          overflow: auto;
                          flex: 1;
                          }
                          #rightdiv {
                          display: flex;
                          flex-direction: column;
                          overflow: hidden;
                          flex: 2;
                          }

                          Kommentar


                          • #28
                            Okay alles geklärt, es hat nun doch funktioniert, nachdem ich es 3 mal neu gestartet habe.

                            Kommentar


                            • #29
                              Nun funktioniert es nicht, mit dem Befehl "position: center;" den linken Div zu zentrieren. :-/

                              Kommentar


                              • #30
                                Versuche "text-align: center;", "position: center;" gibt es nicht.

                                Kommentar

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

                                Einklappen

                                Themen: 56.735   Beiträge: 429.427   Mitglieder: 28.490   Aktive Mitglieder: 41
                                Willkommen an unser neuestes Mitglied, KoaLa13bfp.

                                Online-Benutzer

                                Einklappen

                                218 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 216.

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

                                Die neuesten Themen

                                Einklappen

                                Die neuesten Beiträge

                                Einklappen

                                Lädt...
                                X