Beiträge von Lupus_III

  • Warum macht die Klasse im CSS Sheet nicht was drinsteht

    Ich habe mal aus den Fragmenten die du schickst eine Testwebseite gebastelt. So richtig erschließt es sich mir noch nicht was du genau willst, aber die Farben wechseln bei meiner Version. Schau mal drüber, vielleicht finden wir eine Lösung für dich. Ach ja, im CSS-Tag <details></details> sprichst du einen ul-Tag an. Den gibt es aber im body deiner Version nicht!

    <style>

    summary {

    margin-left: 10px;

    padding-left: 5px;

    background: #003300;

    color: #FFFFFF;

    border: solid #FFFFFF 1px;

    cursor: pointer;

    width: 98%;

    }

    .subsummary {

    background: #006600 !important; /*WARUM GEHT DAS NICHT???????????*/

    }

    details ul {

    list-style: none;

    margin-bottom: 1em;

    }

    </style>

    </head>

    <body>

    <details>

    <summary>SEK I</summary>

    <summary class="subsummary">Haupt und Realschule KC und Thementabellen

    <ul>

    <li>meineDaten/Se...</li>

    </ul>

    </summary>

    <details>

    </body>

    </html>

  • Viele verschiedene Bildgrößen auf eine einheitliche Größe bringen?

    Schau da mal rein. Vielleicht löst es Dein Problem.

    Externer Inhalt www.youtube.com
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

  • Flexbox vs Grid

    Hallo zusammen,

    ich arbeit mich gerade in die Thematik Flexbox und Gridsysteme ein. Was sich mir noch nicht ganz erschließt ist die Frage, wann verwende ich Flex und für welche Seiten sind Grids besser geeignet. Gibt es jemand der damit praktische Erfahrungen hat und mir eine Antwort geben kann?

    Danke!

  • Tutorial zu Erstellen von Würfeln in einer Webseite mit Flexbox

    Ein interessantes Video!

    Externer Inhalt youtu.be
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

  • Fotogalerie

    Zitat von Sempervivum

    1. Das Javascript aus Posting #17 ist auf das HTML aus Posting #15 zugeschnitten.

    2. Da die JS- und CSS-Datei von einem CDN geladen wird, benötigt man eine Internetverbindung. Ist das nicht gewünscht, muss man sie herunter laden und selber hosten.

    Beide Varianten haben bei mir funktioniert. Wenn sie es bei dir nicht tun, dass poste mal den Code oder die URL der Seite.

    Ich habe es bei aktiver Internetverbindung lokal getestet. Das Script aus #15 habe ich mit #17 ersetzt.

    Hier kommt was ich auf dem Rechner habe:

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>Test</title>

    </head>

    <body>

    <style>

    #wrapper {

    max-width: 600px;

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    margin: auto;

    }

    figure {

    margin: 0.5em;

    flex-basis: calc(33% - 1em);

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    }

    figure img {

    width: 100%;

    height: auto;

    min-height: 1px;

    }

    figure a {

    min-height: 1px;

    }

    figure figcaption {

    text-align: center;

    }

    </style>

    <div id="wrapper">

    <figure>

    <img class="bild" src="http://lupus.bplaced.net/fotos/t (1).jpg" alt="bild2" />

    <figcaption>

    Text Bild 1

    </figcaption>

    </figure>

    <figure>

    <img class="bild" src="http://lupus.bplaced.net/fotos/t (2).jpg" alt="bild2" />

    <figcaption>

    Text Bild 2

    </figcaption>

    </figure>

    <figure>

    <img class="bild" src="http://lupus.bplaced.net/fotos/t (3).jpg" alt="bild1" />

    <figcaption>

    Text Bild 3

    </figcaption>

    </figure>

    <figure>

    <img class="bild" src="http://lupus.bplaced.net/fotos/t (4).jpg" alt="bild1" />

    <figcaption>

    Text Bild 4

    </figcaption>

    </figure>

    <figure>

    <img class="bild" src="http://lupus.bplaced.net/fotos/t (5).jpg" alt="bild1" />

    <figcaption>

    Text Bild 5

    </figcaption>

    </figure>

    <figure>

    <img class="bild" src="http://lupus.bplaced.net/fotos/t (7).jpg" alt="bild1" />

    <figcaption>

    Text Bild 6

    </figcaption>

    </figure>

    <figure>

    <img class="bild" src="http://lupus.bplaced.net/fotos/t (8).jpg" alt="bild1" />

    <figcaption>

    Text Bild 7

    </figcaption>

    </figure>

    <figure>

    <img class="bild" src="http://lupus.bplaced.net/fotos/t (9).jpg" alt="bild1" />

    <figcaption>

    Text Bild 8

    </figcaption>

    </figure>

    <figure>

    <img class="bild" src="http://lupus.bplaced.net/fotos/t (10).jpg" alt="bild1" />

    <figcaption>

    Text Bild 9

    </figcaption>

    </figure>

    </div>

    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>

    <script>

    $("figure img").each(function(idx, item) {

    var url = $(this).attr("src");

    var caption = $(this).next("figcaption").text();

    $(this).wrap('<a></a>');

    var atag = $(this).parent();

    var caption = atag.next("figcaption").text();

    atag.attr({href: url, "data-fancybox": "gallery", "data-caption": caption});

    })

    </script>

    </body>

    </html>