Beiträge von Sempervivum

Normaler Weise liegt das oben, was zuletzt notiert wurde, aber wahrscheinlich modifiziert das Reel-Skript das DOM, so dass es dennoch überdeckt wird. Versuche, mit z-index das Ladebild nach vorn zu holen:

#loadimg {
    z-index: 9999;
}

Zitat

Bei Img Src = "... " hier alles was du für Peel benötigst ---> habe ich die Bildadresse zum Ladebild, was den Player überlagern soll eingegeben.

Das ist mit großer Wahrscheinlichkeit das Problem:

<div id="peelwrapper">
    <img src=" ... "> <!-- Dies ist das eigentliche Bild, das Reel anzeigen soll -->
    <img src="loadimg.gif" id="loadimg"> <!-- Dies ist das Ladebild, das das eigentliche Bild
                                          waehrend des Ladens verdecken soll -->
</div>

Das Problem ist hier, dass bei einem prompt() das HTML noch nicht angezeigt wird, bevor der Benutzer die Eingabe gemacht hat. Auch wenn man das HTML nicht mit document.write() erzeugt, sondern direkt notiert, ist es nicht besser. Versuche:

• entweder ein Eingabefeld (<input>) für den Betrag anzulegen
• oder den prompt erst durch Klick auf einen Button (<button>Eis einkaufen</button>) auszulösen

Zitat

viel, viel Zeit um ein paar Code-Zeilen zu meinem Beispiel zu schreiben.

Viel Zeit braucht es dazu nicht:

        $(function () {
            $('#sortable').sortable();
            $("#sendit").on("click", function () {
                var order = $('#sortable').sortable('toArray').toString();
                $.post({
                    url: "dein-php-skript.php",
                    data: { productOrder: order },
                    success: function (output) {
                        $("#result").html(output);
                    }
                });
            });
        });

<button id="sendit">Sortierung abschicken</button>
<div id="result"></div>

Kompliziert?

Der Parameter output enthält die Ausgaben deines PHP-Skriptes. Das kann eine Erfolgs-/Fehlermeldung sein oder das Ergebnis einer Verifikation des Umbenennens.

Mir erschließt sich ohnehin nicht wirklich, was der Vorteil sein soll, wenn man den Umweg über ein Formular und ein verborgenes Eingabefeld geht, gegenüber Ajax. Bei letzterem würde die Seite nicht neu geladen und die neue Sortierung würde bestehen bleiben.

Zunächst mal hast Du im CSS vor dem wrapper den Punkt vergessen, aber das ist wahrscheinlich nur ein Kopierfehler.

Ich vermute, es liegt daran, dass Du dem .boxen_wrapper eine feste Breite gegeben hast, dadurch wird wohl das flexible Verteilen ausgebremst. So wie Du es dir vorstellst, habe ich es leider nicht hinbekommen, nur indem ich mit einer Mediaquery die Anordnung von horizontal nach vertikal umgeschaltet habe:

        .wrapper {
            display: flex;
        }

        .abstand {
            flex: 1;
            border: 1px solid red;
        }

        .boxen_wrapper {
            flex: 0 0 auto;
            border: 1px solid red;
            display: flex;
            flex-wrap: nowrap;
        }

        .box {
            width: 250px;
            border: 1px solid green;
        }

        @media (max-width: 1000px) {
            .boxen_wrapper {
                flex-direction: column;
            }
        }

Wenn ich mir diese PDFs ansehe, gewinne ich den Eindruck, dass es Scans sind und jede Seite aus einer großen Grafik besteht? In dem Fall könntest Du die Scans auch als Grafikdateien abspeichern und würdest dich bei der Darstellung leichter tun. Oder, wie Basti sagt, wenn die Zeitung in irgend einer Form elektronisch erstellt wird, nicht den Umweg über Papier und Scannen gehen, sondern versuchen, das Dokument in einem Format auszugeben, das sich für die Darstellung im Web besser eignet.

Zitat

Von etwa hundert Mitgliedern können einige wenige (etwa 10) die Mitgliederzeitung nicht öffnen.

Könnte es sein, dass diese den IE benutzen? Der kann nämlich PDFs nicht anzeigen sondern bietet sie zum Download an.

Zitat

beim letzten Produkt pro Seite wird die Border nicht angezeigt.
Was könnte das für einen Grund haben bzw. wie könnte man das vllt. fixen ?

Das wird durch dieses CSS in package-mobilesf.css verursacht:

ul.Products li:last-child {
    border: 0;
}

Du kannst das Überschreiben durch deine eigene Definition erzwingen, indem Du ein !important dahinter schreibst:

border: 1px solid grey !important;

Nicht schön, aber ich nehme an, diese Datei gehört zum Shop und Du kannst sie nicht verändern.

Zitat

kann man eigentlich diesen ganzen Bereich unter den Produktbildern ansprechen ? Also den Bereich in dem Produktname und Preis stehen ? Dem würde ich gerne noch eine Top Border geben, Hintergrund farblich hinterlegen, Schriftstyle und Farbe verändern usw.

Das ist kein Problem, denn beides ist schon in einem div-Container zusammen gefasst:

ul.Products li div {
    border-top: 2px solid black;
    background-color: lightblue;
    /* usw. */
}

Zitat

Dass zwischen den Rahmen der Produkte, in der Mitte zwischen den zwei Spalten, etwas frei ist, die Rahmen sich nicht berühren, habe ich mit "margin-right: 6px" gemacht, flex: 0 0 47%. Das ist okay so oder könnte das dann die responsive Darstellung auf manchen Geräten zerballern ?

margin ist ein gängiges Verfahren, um einen Abstand zu erzeugen, ich erwarte dabei keine Probleme. Auf jeden Fall besser als Leerzeichen, wie man es manchmal sieht.

Hatte nicht genau hingesehen: D101* ist ja ein Kind von H101, d. h. letzteres muss man in die Adressierung einbeziehen:

        for (var i = 0; i < 100; i++) {
            var item = Haus.H101['D101' + i];
            if (item) console.log(item.Name);
        }

Woran es gelegen hat, weiß ich nicht richtig, denn ich kann den Fehler immer noch nicht reproduzieren. Aber ich habe eine Lösung bei Stackoverflow gefunden:

https://stackoverflow.com/questions/6735…vertical-bottom

Dieses CSS tut es:

ul.categories li a {
    display: inline-block;
    vertical-align: text-top;
}

Also nicht auf das Listitem angewendet sondern das a-Element darin.

Wenn Du den Schlüssel aus einer Variablen zusammenbauen willst, ist die Syntax etwas anders:

Haus['D101' + i]

Und die Anzahl der Artikel kannst Du nicht über CSS ändern, die wird durch deine Shopsoftware gesteuert. Dort musst Du nachforschen.

1) ist kein Problem: Durch align-items: center; kannst Du es zentrieren:

ul.Products li {
    clear: both;
    overflow: hidden;
    margin: 0 0 6px;
    padding-bottom: 6px;
    display: flex;
    flex-direction: column;
    flex: 0 0 50%;
    align-items: center; /* <== */
}

Zitat

Ich hab jetzt den Quelltext mit und ohne list-style-type: disc verglichen. Das komische ist, dass der Quelltext genau gleich aussieht.

Das sollte doch unterschiedlich sein oder

Die Erklärung ist, dass disc Default ist, d. h. wenn man nichts angibt, wird dieses eingestellt.

Am einfachsten wäre es, wenn man die Seite online sehen könnte, dann kann man die Entwicklerwerkzeuge verwenden und sich schnell einen Überblick über das HTML und das wirksame CSS verschaffen.

Ich habe es mal getestet und bei mir wird die Scheibe wie gewünscht vor der ersten Zeile angezeigt, egal ob ich den Zeilenumbruch mit <br> oder durch Begrenzung der Breite erzeuge.

Zitat

1) ist es möglich via Code zu beeinflussen, dass pro Produktseite auf dem Handy zwei Spalten anstatt nur einer angezeigt werden ?

Ja, das ist kein Problem und wieder einmal ist Flexlayout die Lösung:

ul.Products {
    clear: both;
    padding-left: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
}

ul.Products li {
    clear: both;
    overflow: hidden;
    margin: 0 0 6px;
    padding-bottom: 6px;
    display: flex;
    flex-direction: column;
    flex: 0 0 45%;
}

Durch den Prozentwert bei flex kannst Du steuern, wie viele Elemente in einer Zeile angezeigt werden und ggf. mit Mediaqueries die Anzahl umschalten.

Am besten informierst Du dich grundlegend über Flexlayout, dann kannst Du solche Problem sebständig lösen und auf float verzichten:

https://www.html-seminar.de/css-flexbox.htm

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Zitat

In der mobilen Ansicht sind die Produktbilder einfach ultra klein und ich habe keine Ahnung wieso.

Hier:

http://mob-shop.de/epages/b2b_mob…TTBOARDS/Street

sind bei mir die Bilder auch im Desktop-Browser recht klein und das liegt daran, dass die Breite durch das CSS auf 50px begrenzt wird:

.Products .ProductSmallImage {
    max-width: 50px;
    height: auto;
    float: left;
}

Vergrößere das max-width und die Bilder werden größer.

In der Tat, da sind sie, ich muss blind gewesen sein.

Die Lösung ist dann einfach:

ul.Products li {
    clear: both;
    overflow: hidden;
    margin: 0 0 6px;
    padding-bottom: 6px;
    display: flex;
    flex-direction: column;
}

Und dann kannst Du mit einer Mediaquery zwischen flex-direction: column; und flex-direction: row; umschalten.