dropdown mit download

Der ursprüngliche Text unter den Bildern ist aber noch zu klein, schwarz und hat weißen Hintergrund, bevor man draufklickt.
Und?
kann man das so lösen, daß die Bilder nicht bis an den Seitenrand gehen und der Hintergrund wie ein Rahmen wirkt?
Kann man.

Du solltest endlich mal lernen, wie man entsprechenden CSS-Klasse findet und anpasst und nicht immer darauf warten, dass das hier jemand macht.

Beispiel:
Klicke auf ein Bild mit der rechten Maustaste und wähle im Kontextmenü "Untersuchen"
Dann siehst du:
CSS:
#wrapper-downloads > div img {
  width: 100%;
}
Die 100% verursachen, dass das Bild links und rechts an den Rand geht. Korrigiere das z.B. auf 95%; Danach wird das Bild links immer noch am Rand kleben, das korrigierst du mit margin: 0 auto;

Wie du siehst, mit etwas Eigeninitiative und etwas Übung kann man das durchaus selber herausfinden.
 
Danke für diesen Tip, auf das mit dem Untersuchen wäre ich nicht gekommen. Habe immer verschiedenste Versionen unter anderen Namen gemacht und dann verglichen.
Werde das jetzt auch bei dem mir viel zu kleinen Text und seinen Parametern versuchen.
 
So, hab jetzt alle Parameter abwechselnd verändert, es gelingt mir nicht, diese Scheiß-Winzig-Zeile zu verändern. Vor 3 Wochen hatte ich einen Hinweis gefunden, wie man die standard-Einstellung beeinflussen kann, aber wo und durch welche Fragestellung mir den die Bing-KI ausgespuckt hatte, das weiß ich heute nicht mehr und finde es leider nicht mehr. Das waren jetzt wieder 2 sinnlose Stunden und Weitere folgen und dann muß ich Frühstück machen und greif das lange nicht mehr an, wenn es bis dahin nicht gelingt.
 
die Funktion "Untersuchen" bei der select-Zeile ist für mich nicht verständlich, und auf Bing-Anfragen kommen nur englische Reaktionen, die ebenso mit Fachbegriffen daher kommen.
 
Ist das wirklich so schwer? Das ist immer wieder das gleiche Problem, wenn man sich nicht mit den Grundlagen beschäftigt, scheitert man schon an so einfachen Dingen. :(

1704528434115.png

1704528449030.png
 
DANKE für Deinen Hinweis, ist jetzt endlich so, wie gedacht- hätte das heute Nacht nicht mehr hingekriegt und auch sonst nicht, wenn innere Ungeduld an eigener Unfähigkeit unter Zeitdruck steigt.
Kann jetzt endlich mittels CAD an den weiteren zig Teilen und dazugehörigen Bildern weitermachen und zuletzt noch ein paar Info-Links hinzufügen, dann sollte es fertig sein- dauert ohnedies noch Wochen, aber das kann ich zwischendurch, weil ich es beherrsche, im Gegensatz zu diesen Dingen...

DANKE AN DAS FORUM UND DIE BEIDEN LEUTE, DIE MIR HELFEN KONNTEN!

(hoffe, es tauchen erstmal keine weiteren großen Probleme auf)
 
Zuletzt bearbeitet:
Hallo aus Wien,

die Seite hat sich ja schon ein bißchen weiterentwickelt:
MF23-DOWNLOAD

A) Jetzt habe ich erfolglos versucht, so einen "Info-Link", wie ich ihn bei einigen Überschriften habe, auch in verkleinerter Form bei manchen Auswahl-Selektionen einzubinden.
Beispielsweise bei Denen, wo es verschiedene Versionen gibt, um den Unterschied in Kurz-Text zu erklären. Ist mir innerhalb der Auswahl-Selektionen natürlich nicht gelungen. Möglich? Und wie?

B) Von diesen Info-Links wird es dann auch immer mehr geben, ließe sich das auch vereinfachen, anstatt jeden einzelnen vorzudeffinieren?
 
Das lässt sich im CSS sehr leicht einstellen:
Code:
.select2-option img {
    /* height: 50px; */
    height: 70px;
    margin-right: 0.5em;
}
Bedenke jedoch, dass sich jedes Bild durch einfachen Klick oben groß anzeigen lässt.


Selbstverständlich. Hier würde es sich anbieten, das nur in der Handy-Ansicht zu machen weil dann weniger Platz in der Breite aber mehr Platz in der Höhe ist. Und auf dem Desktop anders herum.
Code:
    <link href="css/select2.min.css" rel="stylesheet" />
    <style>
        /* Options in Select2 */

        .select2-option {
            display: grid;
            grid-template-columns: 1fr auto;
            font-size: 1.5em;
        }

        .select2-option img {
            /* height: 50px; */
            height: 100px;
            margin-right: 0.5em;
        }

        .select2-option .dl-icon {
            margin-left: auto;
            font-size: 1.5em;
        }

        .select2-option .option-text {
            grid-column: 1/3;
            margin-top: 0.2em;
        }

        @media (min-width: 600px) {
            .select2-option {
                grid-template-columns: auto 1fr auto;
                align-items: center;
            }

            .select2-option .option-text {
                grid-column: 2/3;
            }

            .select2-option .dl-icon {
                grid-row: 1/2;
                grid-column: 3/4;
            }
        }

        .select2-container li {
            background-color: #FFF8DC;
        }
und darunter wie bisher.
Und das HTML, das wir im Javascript einfügen, muss ein wenig anders aussehen:
Code:
        function makeOption(data, container) {
            if (!data.id) return data.text;
            const $state = $(`
            <span class="select2-option">
                <img src="${data.element.dataset.imgUrl}">
                <span class="dl-icon" data-link=${data.element.value}>⭳</span>
                <span class="option-text">${data.text}</span>
            </span>`);
            return $state;
        };
Diese Funktion ersetzen, nicht hinzu fügen.
Hallo aus Wien,

die Seite hat sich ja schon ein bißchen weiterentwickelt:
MF23-DOWNLOAD

A) Jetzt habe ich erfolglos versucht, so einen "Info-Link", wie ich ihn bei einigen Überschriften habe, auch in verkleinerter Form bei manchen Auswahl-Selektionen einzubinden.
Beispielsweise bei Denen, wo es verschiedene Versionen gibt, um den Unterschied in Kurz-Text zu erklären. Ist mir innerhalb der Auswahl-Selektionen natürlich nicht gelungen. Möglich? Und wie?

B) Von diesen Info-Links wird es dann auch immer mehr geben, ließe sich das auch vereinfachen, anstatt jeden einzelnen vorzudeffinieren?
 
Das ist auch nicht ganz einfach, weil die Optionen, wo der Button für den Infotext drin sein muss, dynamisch generiert werden als span-Elemente.
Ich habe zunächst eine einfache Lösung realisiert wo der Text des Popover in einem data-Attribut abgelegt wird:
Code:
    <select class="image-dropdown" id="image-dropdown3">
        <!-- Option mit Popover -->
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-Kreuzung-flach.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-Kreuzung-flach.png"
            data-popover-id="popover-1" data-popover-text="Der Text für Popover 1">
            Gleis-Kreuzung-flach
        </option>
        <!-- Option ohne Popover -->
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Weiche-Zufahrt-von-links.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Weiche-Zufahrt-von-links.png"
            Weiche-Zufahrt-von-links </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Weiche-Zufahrt-von-rechts.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Weiche-Zufahrt-von-rechts.png">
            Weiche-Zufahrt-von-rechts
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Weiche-Wechsel-Zufahrt-doppelt.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Weiche-Wechsel-Zufahrt-doppelt.png">
            Weiche-Wechsel-Zufahrt-doppelt
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Weiche-Wechsel-Zufahrt-doppelt-Zusatz-2x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Weiche-Wechsel-Zufahrt-doppelt.png">
            Weiche-Wechsel-Zufahrt-doppelt-Zusatz-2x
        </option>
    </select>
Und die Funktion makeOption durch diese ersetzen, nicht hinzu fügen:
Code:
        function makeOption(data, container) {
            if (!data.id) return data.text;
            const
                popoverId = data.element.dataset.popoverId,
                popoverText = data.element.dataset.popoverText;
            let popoverHtml = '';
            if (popoverId) {
                popoverHtml = `
                <button type="button" popovertarget="${popoverId}"></button>
                <span id=${popoverId} popover>${popoverText}</span>`;
            }
            const $state = $(`
            <span class="select2-option">
                <img src="${data.element.dataset.imgUrl}">
                <span class="dl-icon" data-link=${data.element.value}>⭳</span>
                <span class="option-text">${data.text}</span>
                ${popoverHtml}
                </span>`);
            return $state;
        };
Das ist nur praktikabel bei einfachen und kurzen Texten. Sollen die Popovers umfangreicher werden wie in dem vorhandenen Beispiel, müssten wir sie in getrennten HTML-Elementen oder Templates ablegen, was auch kein Problem wäre.

Weil die Texte für jede Option spezifisch sein müssen sehe ich keine Möglichkeit, das weiter zu vereinfachen. Die Texte und die Optionen, zu denen sie gehören, müssen ja von dir fest gelegt werden.
 
Zurück