CSS gleiche Befehle Figure

  • Guten Abend liebe Community,


    ich habe in meine CSS jetzt folgende Problematik.

    Ich habe den Befehl Figure jetzt zwei mal drin aber die müssen unabhängig voneinander agieren.

    Da das eine Figure für eine andere Seite gilt.

    Ich hoffe konnte es einigermaßen verständlich erklären :)


  • dann gib den figure doch verschiedene classen oder ids.

    zb

    Code
    <figure id="fig1"></figure>
    <figure id="fig2"></figure>
    
    oder
    
    <figure class="fig1"></figure>
    <figure class="fig2"></figure>

    dann kann man in der css auch beide einzelnd ansprechen

  • Jetzt weiß ich auch woher die Css mir so bekannt vor kam.

    Weiß nicht ganz wie das aussehen soll, aber wenn du bei den figcaption das position:absolute raus nimmst , kommt die schrift auch beim hovern mit der Maus von unten wieder rein geschoben.


    Konnte keinen Code finden mit pic-1,pic-2 usw



    Noch ein Hinweiß.

    Wenn ich auf den Link Katzenblog klicke und dann da oben auf der Navigation Links anklicke gehen einige nicht. Zb Startseite,Puschel,Kontakt uvm

  • Noch ein Hinweiß.

    Wenn ich auf den Link Katzenblog klicke und dann da oben auf der Navigation Links anklicke gehen einige nicht. Zb Startseite,Puschel,Kontakt uvm

    Ja, ich muss das noch alles nach und nach ändern, vorher war alles über Baukasten erstellt :) Danke für dein Hinweis.


    Ich habe mal ein Bild eingefügt, so sieht das normalerweise aus, bevor ich den neuen Code im CSS eingefügt habe.


    Sobald ich den Code einfüge, sieht das wieder so aus:

    https://www.puschelreich.de/puschels/kitten/c-wurf/index.php


    Der Code soll aber eigentlich für diese Seite sein, hier findet man auch die pic-1 etc.

    https://www.puschelreich.de/pu…tfires%20shadow/index.php


    Der neue Code geht ab Zeile 225 los, hier nochmal die CSS


    Vielen Dank für deine Hilfe.

  • 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.

  • Genau, ich habe jetzt bissel probiert und jetzt konnte ich das ein wenig trennen.


    https://www.puschelreich.de/puschels/kitten/c-wurf/index.php

    https://www.puschelreich.de/pu…tfires%20shadow/index.php (habe noch keine Verlinkung über die Homepage gemacht)


    Die beiden Seiten wären so im Prinzip richtig aber ich habe das Gefühl das er die CSS ziemlich lange braucht zum Laden.

    Kann das sein das ich die Klassen falsch bezeichnet habe? Das wäre Zeile 234

    .slideshow figure { ...



    Zweites Problem:

    https://www.puschelreich.de/pu…tfires%20shadow/index.php


    Die Bilder URL möchte ich in der HTML schreiben, da noch mehrere Seiten hinzukommen mit der gleichen Funktion aber immer unterschiedliche Bilder, also ich möchte im Prinzip

    das folgende Code in der HTML haben und nicht in der CSS:



    und hier nochmal die aktuelle CSS

  • 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.

    So wäre der Einwand richtig :)

  • 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/unders…-specificity-a02238a02a59

  • 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>
  • Ich muss nochmal nerven, ich habe soeben noch ein Fehler gefunden.

    Ich habe dazu ein Bild eingefügt. Alles was unter der gelben Linie ist, kann ich Links

    anklicken, alles was darüber ist nicht.

    Zum Beispiel kann ich nicht auf Ausstellungserfolge klicken.

    Ich vermute mal das es noch an der obigen Funktion liegt.


    https://www.puschelreich.de/pu…tfires%20shadow/index.php



    Wie bekomme ich das am besten raus? Habe schon mit Entwicklertool bissel gespielt aber

    keine Chance :)


    Vielen Dank.

  • Wie bekomme ich das am besten raus? Habe schon mit Entwicklertool bissel gespielt aber

    keine Chance :)


    Vielen Dank.


    in der Konsole ist oben Links ein Viereck mir so Pfeil drinne.

    Klick da mal drauf und gehe mit der Maus über deine Webseite. Er Zeigt dir dann die Container an wo welcher ist , auch wenn man sie nicht sehen kann.


    Dadurch kann ich dir sagen das der Container

    Code
    <div class="pic-wrapper">
    </div>

    den Mist macht.

    So jetzt darfst du mal kucken ob du den Fehler weg bekommst:)


    Falls nicht sag bescheid

  • ok, super das hat schon mal geklappt, ich habe auch das Problem mit pic-wrapper entdeckt.


    Dann habe ich die CSS geöffnet und habe folgenden Code:

    Code
    .pic-wrapper {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;


    So, ich würde jetzt behaupten das man den Container irgendwie im Hintergrund bringen muss?

    Erst dachte ich, ich muss width und height auch auf 350px anpassen, das hat aber leider nicht geklappt.

  • 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:

  • Ich habe heute bissel gefummelt, so habe ich jetzt die HTML



    Jetzt habe ich in der CSS bissel mit display: flex; gespielt, ich bekomme das allerdings nicht hin obwohl ich schon tausende Beschreibungen

    gelesen habe :)

    Vielleicht kann mir einer helfen.

    Als class muss ich doch

    .beschreibung-slideshow nehmen, oder?

  • 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;
            }

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!