Beiträge von Sempervivum

Ist ja mysteriös. Bist Du sicher, dass Du genau den gleichen Code wieder eingefügt hast? Sagt die Console etwas?

Du benötigst schon CSS und Javascript, aber Du brauchst es nicht selber zu entwickeln, denn das gibt es schon:

https://datatables.net

Nicht benötigte Features können weg konfiguriert werden. Wenn ich mich richtig erinnere, ist Booststrap-Layout möglich.

Das Grundprinzip ist einfach: Eine Regel, die spezifischer ist als eine andere setzt sich durch, unabhängig von der Reihenfolge. Z. B. ist ein Selektor mit einer ID spezifischer als einer mit einer Klasse. Nur wenn beide gleich spezifisch sind, wird nach der Reihenfolge entschieden.

Mache dich hiermit vertraut, dann findest Du die Erklärung:

https://wiki.selfhtml.org/wiki/CSS/Tutor…instieg/Kaskade

Eine Holzhammermethode, um das Problem zu lösen, ist, deinen eigenen Eigenschaften ein !important anzuhängen, das wird auch in dem Link beschrieben.

Genau, deshalb auch mein Hinweis, dass es üblich ist, sich auf das Laden der Bilder zu beziehen (wenn man eine Fortschrittsanzeige haben will) oder auf das onload-Event. Hätte es vielleicht etwas strikter formulieren sollen, denn ohne das macht das Ganze keinen Sinn.

Versuche dies CSS:

.preloadercontainer {
    animation preloader 1s forwards;
    animation-delay: 2s;
}
@keyframes preloader {
   from {opacity: 1;}
   to {opacity: 0;}
}

(ungetestet)

Naja, das Javascript muss ja auch erst geladen werden und das CSS steht i. allg. im Head, so dass es auch schnell wirksam ist. Ich erwarte, dass sich das nicht viel nimmt. I. allg. beanspruchen die Bilder den größten Teil der Ladezeit und viele Preloader nehmen nicht einfach eine feste Verzögerung sondern prüfen, wie viele von den Bildern geladen sind.

Eigentlich wäre in diesem Fall angebracht, es nicht mit Javascript sondern mit CSS-Animation zu machen:

https://wiki.selfhtml.org/wiki/CSS/Eigen…ation/animation

Ohne Javascript wird es auch mit Button nicht gehen, versuche dies (ungetestet):

<button class="linkbtn" data-link="https://wikipedia.de">Wikipedia</button>

Und Javascript:

document.querySelectorAll('.linkbtn).forEach(function() {
    let link = this.getAttribute('data-link');
    this.addEventListener('click', function() {
        location.href = link;
    });
});

Ohne deinen Code angesehen zu haben: Es liegt mit ziemlicher Sicherheit daran, dass der Defaultwert für die vertikale Ausrichtung baseline ist, dadurch kommt die Lücke zu Stande. Lässt sich leicht beheben, indem man dem Bild ein vertical-align: top; gibt, siehe hier:

https://jsfiddle.net/Sempervivum/ogscxL7e/5/

Häufiges Problem übrigens.

Ich empfehle, kein a-Tag zu nehmen, sondern einen Button ohne Link.

Zitat

Also müsste man ALLE über 200 Seiten manuell so umstellen, dass auf jede DIV rechts Text direkt die zugehörige DIV links blau mit zugehörigen Inhalten folgt.

Zitat

das sind leicht 300 stunden arbeit und damit massig kosten

In solch einem Fall habe ich häufig die Seiten automatisch editiert, früher mit AWK, aber es geht auch mit PHP.

Edit: Dies

Zitat

die Bilder in der rechten Spalte passend zu den Inhalten in der Textspalte positioniert.

Verstehe ich vom Text her, aber auf der Beispielseite kann ich eine solche Zuordnung nicht erkennen?

Im Fall von Grünberg ist der Link immer noch innerhalb des a-Tags a.litebox. Bei Traunstein dagegen ist er draußen. Versuche, es bei Grünberg genau so zu machen.

Lies auch mein Posting #4, davor, und setze es um.

PS: Bei dem zweiten Beispiel scheint mir das a-Tag nicht geschlossen zu sein:

        <div class="gallery-photo wnd-orientation-portrait">
            <a class="litebox" data-litebox-group="gallery" data-litebox-text="" href="bilder/tr-berge/2-traunstein.jpg" width="1200" height="900">
                <div class="gallery-image cf"><img src="bilder/tr-berge/2-traunstein-s.jpg" alt="Traunstein Berg am Traunsee, Wächter des Salzkammergutes"></div>
                <div class="gallery-title"><span></span></div>

                <p><a href="https://de.wikipedia.org/wiki/Traunstein_(Berg)">Traunstein</a></p>
            <!-- hier erwarte ich das schliessende </a> -->

<!-- BEISPIEL ENDE     -->    

        </div>

Versuche, das HTML so zu ändern:

        <div class="gallery-photo wnd-orientation-portrait">
            <a class="litebox" data-litebox-group="gallery" data-litebox-text="" href="bilder/tr-berge/1-gruenberg.jpg" width="1200" height="900">
                <div class="gallery-image cf"><img src="bilder/tr-berge/1-gruenberg-s.jpg" alt="Grünberg in Gmunden im Salzkammergut mit Seilbahn"></div>
                <div class="gallery-title"><span></span></div>
            </a>
            <p><a href="https://gruenberg.info/de/">Grünberg</a></p>
        </div>

d. h. den Link aus dem a-Tag für die Litebox heraus nehmen. (ungetestet, nur ein Versuch).

Dass die Schrift im Absatz fett ist, liegt wahrscheinlich daran, dass anderswo für das p-Element die Fett-Formatierung eingestellt ist. Am besten postest Du mal einen Link zu der Seite, dann kann man es mit dem HTML-Inspektor leicht heraus finden.

Davon abgesehen ist dein Code leicht veraltet. Informiere dich am besten über CSS:

https://wiki.selfhtml.org/wiki/CSS/Tutor…heets_einbinden

Und für ein Bild mit einer Beschriftung gibt es heute das figure-Tag:

https://wiki.selfhtml.org/wiki/HTML/Text…urierung/figure

Zentrierung und andere Gestaltung lassen sich am besten und einfachsten mit Flex machen:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox

Damit könnte dein Bild mit der Beschriftung dann so aussehen:

    <figure>
        <img src="images/dia1.jpg" height="42" width="42">
        <figcaption>
            Products are tested and approved by Susan
        </figcaption>
    </figure>
    <style>
        figure {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        figure>img {
            width: 42px;
            height: 42px;
        }
        figure>figcaption {
            margin-left: 47px;
            /* hier kannst Du dann auch die Schrift gestalten */
        }
    </style>

Jetzt verstehe ich nicht genau, was Du haben willst: Nur ein Thumbnail und wenn man drauf klickt, sollen alle sichtbar werden? Und wenn man dann auf eines klickt, soll sich die Lightbox öffnen? Oder so wie in deinem ersten Post: Unten im Lightbox-Fenster eine Reihe von Thumbnails, die man mit Pfeiltasten durchblättern kann und wenn man eines klickt, wird es in dem Fenster darüber groß angezeigt?

Wie sehen denn diese Variablen im Text aus? Üblich ist, sie in einfache oder doppelte geschweifte Klammern einzuschließen. Informiere dich über die Javascript-Funktion replace, damit kannst Du die Namen dann ersetzen.

Und um die Namen auf der Seite eingeben zu können, benötigst Du Eingabefeldern.

Selfhtml ist i. allg. eine gute Quelle:

https://wiki.selfhtml.org/wiki/JavaScrip…/String/replace

https://wiki.selfhtml.org/wiki/HTML/Form…_.3D_.22text.22

Versuch mal, wie weit Du mit den Erläuterungen und den Beispielen kommst und wenn es hakt, melde dich wieder.

Das habe ich schon vermutet. Was Du suchst, nennt sich "Lightbox". Davon gibt es viele und IMO die beste ist die aktuelle Version von Fancybox:

https://fancyapps.com/fancybox/3/