Beiträge von Sempervivum

  • Bildergalerie mit HTML und CSS

    Du beschreibst leider nicht, was genau nicht läuft.

    Auf jeden Fall hast Du da einen Strukturfehler. Schließendes </div> doppelt:

    Dann willst Du sicher, dass die Bildchen nebeneinander angeordnet werden. Das erreichst Du, indem Du die div.galerie mit display: inline-block; versiehst.

    Die Empfehlung deines Lehrers, Divs zu verwenden, ist diskussionswürdig. Es würde sich anbieten, die semantischen figure-Tags zu nehmen.

  • Musik-Streaming

    Zitat

    Soweit ich weiß wird der Audiotrack ja vor dem abspielen komplett gedownloadet.

    Da sind meine Informationen und meine Erfahrungen beim Abspielen solcher Audio-Dateien entgegen gesetzt:

    Der Browser lädt soweit vor, dass zu erwarten ist, dass die Datei ohne Hänger abgespielt werden kann und beginnt dann das Abspielen. Im weiteren Verlauf wird dann gleichzeitig abgespielt und weitere Daten herunter geladen. Müsste man mit einer größeren Audio-Datei mal testen.

  • CSS gleiche Befehle Figure

    Du musst die Überschrift "Ausstellungserfolge" und die folgende Galerie aus dem Container .beschreibung-slideshow herausnehmen:

    Und das CSS für die Slideshow so ändern, dass nur noch die figure-Elemente absolut positioniert sind:

    Und zum Schluss Beschreibung und Slideshow nebeneinander anordnen:

    Code
            .beschreibung-slideshow {
            /* Beschreibung und Slideshow nebeneinander anordnen */
            display: flex;
        }

  • CSS gleiche Befehle Figure

    Erste, schlechteste Lösung:

    Den .pic-wrapper für Mausklicks durchlässig machen durch pointer-events: none;

    Zweite Lösung, auch nicht so gut:

    Wie Du schon geschrieben hast, Höhe und Breite auf 350px ändern. Dann musst Du zusätzlich:

    1. position: relative; für den umgebenden Container, d. h. div.slideshow setzen

    2. top: 0; und right: 0; für .pic-wrapper setzen (oder einen gewissen Versatz, damit der Container nicht ganz an den Rändern klebt).

    3. Den Versatz für die figure-Element der Slideshow heraus nehmen:

    Dritte und beste Lösung: Die Beschreibung links in einen Container packen, in einem weiteren Container den ersten mit der Beschreibung links und die Slideshow rechts mit Flexlayout anordnen:

  • CSS gleiche Befehle Figure

    Zu dem zweiten Problem:

    Du kannst CSS-Anweisungen auch als Inlinestyle im HTML-Text notieren:

    Code
    <figure class="pic-4" style="background-image: url(http://cdn.morguefile.com/imageData/public/files/i/Isbiliani/05/p/8787b7ac34a8de4c4aad6fe8a5d7e925.jpg)"></figure>

  • CSS gleiche Befehle Figure

    Die Slideshow auf der Jugenchampion- Seite funktioniert bei mir nicht und zwar aus folgendem Grund:

    Die Basiseinstellungen für die Animation werden ab Zeile 234 so gemacht:

    Anschließend setzt Du für jedes figure-Tag ein spezifisches animation-delay, z. B. so für .pic-4 ab Zeile 289:

    Das Problem ist jetzt, dass der Selektor .pic-4 weniger spezifisch ist als .slideshow figure. Daher wird animation-delay nicht überschrieben obwohl die Regel nach der allgemeinen ab Zeile 234 notiert ist. Wenn ich es in

    ändere (für die anderen beiden Bilder auch), wird es spezifischer als die allgemeine Regel und die Slideshow funktioniert.

    Hier wird die Sache mit der Spezifizität gut erklärt:

    https://medium.com/@dte/understan…ty-a02238a02a59

  • (edit) PHP erzeugt Whitespaces im HTML Code

    Eine wesentliche Veränderung durch die Änderung der Erweiterung ist ja, dass das PHP jetzt geparst wird. Kann es sein, dass dieses die Struktur der Seite verändert, HTML-Elemente und/oder inline-Styles einfügt?

    In jedem Fall wäre es gut, wenn Du eine Demo-Seite hättest, wo man das Ganze live sehen kann. Dort kann man zwar nicht das PHP einsehen, aber HTML, CSS und JS. Hast Du überhaupt noch keinen Webspace?

  • CSS gleiche Befehle Figure

    Ich glaube, jetzt verstehe ich, was Du vor hast: Auf der Jugendchampion-Seite gibt es oben rechts solch eine Slideshow mit Überblenden. Und solch eine möchtest Du ganz unten auf der C-Wurf-Seite auch haben, wo "Bildergalerie:" steht? Nur wenn Du das CSS auf der C-Wurf-Seite einfügst, zerlegt es dir oben die Bilder mit den Eltern.

  • Hoverfunktion funktioniert ab gewisser Fensterbreite nicht mehr

    Ich habe es getestet und was ich zunächst vermutet hatte, hat sich bestätigt: Durch touchstart wird der Tooltipp geöffnet und durch touchleave geschlossen. Außerdem ist eine Verzögerung für das Öffnen drin. D. h. man muss das Element berühren und halten, um den Tooltipp zu Gesicht zu bekommen. Dann entsteht jedoch die Komplikation, dass durch langes Berühren auch das Kontextmenü geöffnet wird. Man müsste mal in den Optionen suchen, ob man das unterdrücken kann.

    Wenn man für Öffnen und Schließen beide Male tap verwendet, geht es.

  • slideshow mit mouse over was die Bildwechselgeschwindigkeit stufenlos ändert

    Weiß nicht, ob es so etwas fertig gibt, aber man kann es relativ leicht selbst implementieren:

    Hier wird beschrieben, wie man die Mausposition relativ zu einem Element ermittelt, in deinem Fall wäre das der Container der Slideshow:

    https://stackoverflow.com/questions/2586…lement/25870569

    Dann würde ich empfehlen, die Automatik aus zu lassen und mit der API das Weiterschalten zu veranlassen. Die API von Cycle 2 ermöglicht das. Das Intervall dabei kann man aus der Mausposition berechnen.