Beiträge von Sempervivum

    Versuche dieses, so explodiert das Bild von der Mitte aus und verschwindet, wenn man drauf klickt:

    ... hier eine einfache Lösung mit Javascript und Klick. Das ist noch stark verbesserungsfähig, denn so verschwindet das Bild an seiner ursprünglichen Position und die anderen verschieben sich.

    Das Geflacker wundert mich nicht, es ist so zu erklären:

    Wenn das Bild vergrößert wird, bewegt es sich auch in die Mitte und dann liegt die Maus nicht mehr drauf --> :hover trifft nicht mehr zu und das Bild wird wieder kleiner usw.

    Ein typisches Problem bei Hover-Effekten. Es gibt noch einen anderen Nachteil beim Hover: Heute ist die Mehrzahl der Benutzer mit Touch-Geräten unterwegs und dabei gibt es kein Hover. Daher empfehle ich, statt des :hover in CSS das Klick-Event in Javascript zu verwenden. Dann wird das Bild stabil an seiner Position stehen bleiben bis ein Close-Button gedrückt wird oder außerhalb des Bildes geklickt wird, z. B.

    Ein Bild kannst Du so zentrieren:

    Ungetestet, aber so habe ich es schon häufig gemacht.

    Dies ist zunächst mal eine sehr einfache Lösung. Wenn Du erreichen möchtest, dass das Bild von der alten, kleinen Positon ausgehend an die neue, vergrößerte, explodiert, wird es ein wenig komplizierter.

    Zitat

    Ich aber weiß überhaupt nicht was das Script macht und wie ich da mit der CSS gegensteuern könnte.

    Das ist eine typische Konsequenz, wenn man eine Fundsache aus dem Web einsetzt ohne sie zu verstehen ;)


    Ich bin ja nicht unbedingt ein Freund von jQuery und hier bestätigt sich das: Es liegt ein undurchsichtiges Mischmasch von Animation der Höhe und Umschalten von display vor, das es schwer macht, die Dinge zu durchschauen und nach den eigenen Vorstellungen umzuändern.


    Zitat

    Was muss ich in die CSS schreiben?

    Wie nextuser schon schrieb, hat der Inlinestyle, den jQuery setzt, eine hohe Priorität. Du kannst jedoch dafür sorgen, dass sich dein CSS dennoch durchsetzt, indem Du "!important" hinzu setzt. Auch davon bin ich kein Freund weil man es i. allg. nur braucht, wenn man sein CSS nicht im Griff hat, aber hier kommt man wohl nicht daran vorbei.


    Da kein Freund von jQuery, habe ich mal das Menü aus deinem Codepen hergenommen und mit Vanilla-JS realisiert einschl. Animation.


    Das Javascript am Ende des Body:

    Ist doch recht kompakt und einfach, nicht wahr?


    Am CSS musste ich nicht viel verändern, siehe meine Kommentare:

    Ich würde versuchen, das ohne absolute Positionierung zu machen, dann bekommst Du keine Probleme mit Überlappungen.

    Code
    .item-first .caption a {
        /* Damit das Bild nicht zu groß sondern in seiner
        natürlichen Größe angezeigt wird: */
        align-self: center;
    }

    Das mit dem Farbverlauf wird hier bei Stackoverflow diskutiert:

    How do you apply a gradient from outer to inner, only to borders, in CSS?
    Based on the MDN documentation this doesn't seem to be explicitly supported. So I tried it as follows in the linked code pen below. I know the nested…
    stackoverflow.com

    Kann man so zusammen fassen, dass es keine richtig gute Lösung gibt. Besser mit SVG machen, wie früher empfohlen oder, wie Du selbst schreibst, mit Canvas.

    Tag und Monat ziehst Du ja schon korrekt heraus:

    02. Dezember

    Nur ist das kein Format, das für das Date-Objekt verständlich ist.

    Es gibt zwei Wege, das Problem zu lösen:

    Von Hand das Datum in das Iso-Format YYYY-DD-MM umwandeln

    oder

    moment.js verwenden, um das Datum zu parsen:

    Moment.js | Docs


    Es gibt evtl. noch eine bessere Möglichkeit, die Du prüfen kannst:

    Das Datum im ISO-Format als Data-Attribut in den Sections ablegen. Wenn die maschinell erzeugt werden, ist das wahrscheinlich machbar.

    Zitat

    Plan wäre die h1 in der section auszurichten oben, rechts oder links egal. Deshalb habe ich ihr display-flex mitgegeben. Ob das richtig war ist fraglich.

    Dass sie nicht oben ist, liegt daran, dass der Container #my-new-section von main>section justify-content: center; erbt. Ändere ich es auf start rutscht die Überschrift sofort nach oben.

    Zitat

    Wie bekomme ich horizontal Abstand zwischen die boxen? mit row-gab hatte ich kein erfolg.

    row-gap musst Du beim Container notieren, tue ich das, funktioniert es.

    Code
    #my-new-section {
        /* flex: 1; */
        flex-direction: column;
        background-color: lightsalmon;
        border: 20px solid blue;
        row-gap: 5px;
        justify-content: start;
    }

    flex: 1; macht hier keinen Sinn, da wir den Container ja nicht flexibel wollen sondern er soll eine feste Höhe haben entspr. der des Browserfensters.

    Außerdem beobachte ich jetzt, wenn ich rechts die Entwicklerwerkzeuge offen habe, dass einige der Boxen horizontal über den Container hinaus ragen. Das liegt daran, das Du ihnen eine feste Breite gegeben hast. Damit verschenkst Du den eigentlichen Vorteil von Flexlayout, dass sich die Elemente an das Browserfenster anpassen. Deaktiviere ich die Breitenangabe schrumpfen die Boxen in der Breite und orientieren sich am Inhalt.

    Code
    #my-new-section .box1 {
        display: flex;
        /* width: 250px; */
        height: 80px;
        background-color: pink;
    }

    Dadurch werden sie dann sehr schmal, weil nichts drin steht als box1, box2, ... aber das liegt daran, dass das eine Testversion ist ohne ausgefüllte Inhalte.

    Du willst diese Überschrift im neuen Container links ausrichten, nicht wahr? Dazu brauchst Du align-items: flex-start; beim Flex-Container #my-new-section weil Du die Flex-Items durch flex-direction: row; untereinander anordnest. Da wird auch sofort offensichtlich, warum es flex-start heißt statt left: Je nach Anordnung bewirkt das mal Ausrichtung left oder top, start ist dagegen ein Begriff, der allgemein passt. Alternativ kannst Du auch align-self bei der Überschrift bzw. dem Flex-Item verwenden, das wirkt dann, wie der Name sagt, nur auf diese Überschrift:

    Code
    #my-new-section>h1 {
        color: red;
        align-self: start;
    }

    Guten Morgen Emess ,

    dein letztes Posting #20 verstehe ich so, dass Du Probleme siehst, bestimmte Elemente anzusprechen bei der momentanen Struktur deiner Seite. Diese Probleme sehe ich nicht. Gib doch mal ein oder zwei Beispiele wo Du meinst, dass es nicht geht.

    I. allg. sollten die Elemente so angeordnet werden wie es von der Semantik her geboten ist. Es gibt einige Ausnahmen durch die Beschränkungen von CSS aber die sehe ich bei deinem Layout ebenfalls nicht.

    Zitat

    Mein Idee wäre die  main komplett zu entfernen und dem Header eine id zb. #kopf. Also <header id="kopf">

    Die Notwendigkeit sehe ich nicht. Das ist ja ein Vorteil, dass man bei semantischen Tag in gewissem Umfang auf Klassen und IDs verzichten kann. So weit ich das überblicke, hast Du im Moment nur einen Header und dann ist ein Selektor nur mit dem Tagnamen ausreichend:

    Code
    header {
        /* Mach was mit dem Header */
    }

    Anders kann es aussehen, wenn Du auch in deinem Modal header und footer verwenden möchtest. Auch dann kann man es wahrscheinlich über Kind- oder Nachfahrenselektoren regeln aber zur Klarheit kann eine Klasse oder ID angebracht sein.