Beiträge von Sempervivum

Da Du das CSS ausgelagert hast, vermute ich, dass es am Cache liegt. Mit Strg+F5 kannst Du die Seite einschl. externer CSS und Javascript-Dateien neu laden.

Siehe meine Kommentare

body img{
    width:18%;
    height: auto;
}

@media only screen and (max-width: 800px) {
            body img {
                width: 18%; /* dies ist wirkungslos, weil es die selbe Breite
                            definiert wie oben. Besser 30% */
            }
        }
@media only screen and (max-width: 450px) {
            body img {
                width: 30%; /* und hier 45% */
            }
        }

Ich hatte die Mediaqueries getestet und es hatte funktioniert: Abhängig von der Fensterbreite wurden 5, 3 oder 2 Bilder in einer Reihe angezeigt. Poste am besten noch Mal dein CSS.

Da Du das mit den Mediaqueries nicht verstehst, gebe ich dir hier mal einen Beispielcode:

        @media only screen and (max-width: 800px) {
            body img {
                width: 30%;
            }
        }

        @media only screen and (max-width: 450px) {
            body img {
                width: 45%;
            }
        }

Die Umschaltpunkte (max-width) kannst Du so anpassen, dass das Verhalten deinen Vorstellungen entspricht.

Dann vermute ich, dass Du meinen Hinweis auf Mediaqueries überlesen hast

Zitat

dass auch die Bilder welche mit php ausgegeben werden ebenfalls ungefähr auf beiden Bildschirmen die ungefähr in etwa vom Verhältnis her gleich groß sind

Wenn ich das richtig verstehe, müsste es dein Problem lösen, wenn Du mit Mediaqueries (siehe Posting #29) die Breite (in Prozent) der Bilder umschaltest, z. B. auf 30% bei schmalerem Fenster, so dass dann nur noch drei in einer Reihe sind.

Ich habe eine Weile über diesem gerätselt:

https://vuejs.org/v2/guide/forms.html

Zitat

v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.

und

Zitat

If the initial value of your v-model expression does not match any of the options, the <select> element will render in an “unselected” state.

aber es schließlich verstanden. Dies funktioniert:

    <div id="wrapper2">
        <select v-model="eventDate" name="test1" required size="1">
            <option selected>Datum1</option>
            <option>Datum2</option>
            <option>Datum3</option>
            <option>Datum4</option>
        </select>

        <select v-model="room" name="test2" size="1">
            <option selected>Raum1</option>
            <option>Raum2</option>
            <option>Raum3</option>
            <option>Raum4</option>
        </select>
        {{eventDate}}{{room}}
    </div>
    <script>
        var formular = new Vue({
            el: "#wrapper2",
            data: {
                eventDate: 'Datum1',
                room: 'Raum1',
            }
        });
    </script>

Versuche es anders herum, erst umlaut, dann toUpperCase.

PS: Ich bemerke gerade, dass .event als Container semantisch wohl unpassend ist, obwohl es so funktioniert. Du kannst es ja noch ein wenig umorganisieren, z. B. dem Container die ID wrapper geben und die Klasse event den a-href-Elementen zuweisen.

https://codepen.io/Sempervivum/pen/NmZYXy

Der Kern des Problems ist, dass Du den #wrapper zum Flexcontainer gemacht hast. Dieser enthält jedoch nur ein einziges Flexitem, nämlich .event und darin sind die a-href-Elemente versammelt. Vue organisiert das anscheinend etwas anders als Du es dir vorgestellt hast. display:flex wird nicht vererbt, d. h. Du musst .event zum Flexcontainer machen durch display:flex, dann funktioniert es.

https://codepen.io/Sempervivum/pen/zXVWqy

Den #wrapper habe ich gelöscht, weil man ihn dann nicht mehr braucht.

Ungetestet müsste es so aussehen:

<script>
var smaller = 0;
for (var i = 0; i < numbers.length; i++) {
    var cnumber = numbers[i];
    if (cnumber < random && cnumber > smaller) smaller = cnumber;
}
</script>

Häufiges Problem, wenn man ein Element fixiert: Gib dem body ein geeignetes margin-bottom.

HIer:

API in HTML einfügen

findest Du in Post #12 ein Beispiel, wie Du so etwas machen kannst.

Ich empfehle gern Fancybox 3 weil es responsiv ist und mit Touch-Gesten bedient werden kann:

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

Interessante Info, ich habe mich immer gewundert, warum mein VS-Code immer das schließende Tag gelöscht hat. Das ist jetzt wohl die Erklärung.

Zitat

NUR bleibt eben mein Text (vom <p> und das <a>) NICHT innerhalb des <footer> sondern ragt darüber hinaus,

Kann ich bei deiner Beispielseite nicht bestätigen, bei mir ragt nichts heraus. Sieht gut aus. Hast Du das Problem inzwischen gelöst?

Du hast Recht, das benutzt SVG und passt nicht unmittelbar auf deine Anwendung. Es ginge sicher auch mit JPG, müsste aber umgestellt werden.

Mit Strg+F5 werden auch externe css- und js-Dateien neu geladen.

... oder mit d3.js:

https://gist.github.com/shawnbot/6518285

Wird es bei dir vielleicht anders dargestellt? Welchen Browser benutzt Du?