Beiträge von Sempervivum

    Zitat

    macht es dann nicht wieder mehr sinn einfach ein IMG in die Box zu setzen? .. dann bräuchte ich dem nur ein Width: 100% geben & die höhe errechnet sich automatisch.

    Wenn ich dich richtig verstehe, willst du, dass der Text nicht neben/unter/über dem Bild sein soll, sondern darüber.

    Und dafür gibt es nur diese Wege:

    • Bild als Hintergrundbild, Text als Inhalt. Vorteil: Text kann sauber zentriert werden. Nachteil: Container passt sich nicht an Bild an
    • Bild als img-Tag und als Inhalt, Text absolut positioniert. Vorteil: Bildgröße passt sich automatisch an. Nachteil: Text kann nicht automatisch zentriert werden, da er aus dem Textfluss heraus fällt. Zentrierung muss über top und left austariert werden und das ist mit CSS kaum dynamisch zu machen, wenn das Bild dynamisch ist. Das Problem, das Du ursprünglich hattest:
    Zitat

    Zudem lässt sich der Text in der Box nicht vertikal zentrieren

    Zitat

    Oder kann ich das nicht evtl eben mit PHP umsetzen?

    Nein, PHP bietet keine Lösung, weil Du damit auch nur HTML und CSS anlegen kannst.

    Zitat

    Aber der eigentliche Sinn, warum ich das Bild nicht als Hintergrund festgelegt hab war, dass das Bild so in der Höhe nicht richtig zu sehen ist.

    Verstehe ich dich richtig: Du störst dich daran, dass das Bild nicht in voller Höhe zu sehen ist? Das ist leider ein Negativum bei Hintergrundbildern, dass sich der Container, in dem sie drin sind, nicht in der Größe an das Bild anpasst, sondern man muss die Größe explizit setzen, so wie ich es hier getan habe:

    https://jsfiddle.net/9b83hsLq/3/

    Umgekehrt funktioniert es jedoch: Man kann das Hintergrundbild dazu bringen, sich an den umgebenden Container anzupassen:

    https://wiki.selfhtml.org/wiki…d_-bilder/background-size

    Die Ursache für den Spalt und wie man ihn weg bekommt, wird hier beschrieben:

    https://stackoverflow.com/ques…age-tag/31445364#31445364

    Vertikale Zentrierung war früher ein gewisses Problem aber durch Flexlayout ist es jetzt ganz einfach:

    https://jsfiddle.net/9b83hsLq/2/

    Dabei verschwindet offenbar auch der Spalt ohne weitere Maßnahmen.

    Gut zur Info über Flexlayout:

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


    Edit: Ahh, Stef war schneller!

    Edit2: U. U. müsste man das Bild noch responsiv machen.

    Zitat

    Woher will der Browser nun wissen wo denn die Kästchen sind auf denen man die Häuser platziert?


    Also wenn man nun ein haus aus dem menü zieht auf das raster, dass dann der Browser sieht dort sind die kästchen wo es platziert werden kann. Und nicht in der Mitte der Kästchen.

    Dafür sehe ich zwei Möglichkeiten:

    1. Beim Ziehen sind die Koordinaten der Maus oder des Kästchens verfügbar. Kennt man die linke obere Ecke der Matrix mit den Kästchen, kann man berechnen, in welchem sich die Maus oder das gezogene Element befinden.

    2. Man könnte die Daten der Kästchen einschl. x- und y-Koordinaten in einem Array ablegen. Dann kann man ebenfalls ermitteln, in welchen Kästchen man sich befindet. Man kann das Objekt auch auf den Kästchen einrasten lassen, siehe hier:

    https://projects.calebevans.me/jcanvas/docs/draggableLayers/

    (ganz unten)

    Zitat

    Also ist in javascript schon ein Objekt für solche Angelegenheiten vorhanden, wo man einfach mit den funktionen nutzen kann ?

    Zu Objekten siehe z. B. hier:

    https://wiki.selfhtml.org/wiki/JavaScript/Objekte

    Ein Objekt gibt es nicht fertig für einen bestimmten Anwendungszweck, sondern man muss es selber anlegen:

    Code
    var kirche = {breite: 2, laenge: 5, einwohner: 100, key_a: "xxx", key_b: "yyy"};
    Zitat

    Was bedeutet das i.S. ?

    Das bedeutet "im Sinne von": Der Begriff "Objekt" ist leider mehrdeutig, wie Du aus dem Link oben entnehmen kannst.

    Zitat

    Wie bekomme ich dieses raster dann nur funktionsfähig (Woher will der Browser erkennen auf welche Vierecke ich genau klicke)?

    Idee: diese vierecke verlinken

    Wohl weniger verlinken, sondern eher mit einem Eventhandler versehen. Informiere dich über die Funktion addEventListener bzw. die Äquivalente bei jQuery.

    Zitat

    Und dann wenn man dieses anklickt diese mit hintergrundfarbe rot machen und das menü öffnen mit den Häusern

    So geht es auch. Ich hatte daran gedacht, die Häuser auf dem Spielfeld zu platzieren und der Spieler kann sie per Drag&Drop auf ein Viereck drauf ziehen.

    Zitat

    Wie kann man es denn realisieren das Wohnhäuser nur 1 viereck haben, Kirchen 8 (2 felder breite, 8 felder länge), Rathhaus (4 felder breite, 4 felder länge) haben ?

    Wahrscheinlich müsstest Du festlegen, dass man auf das linke obere Viereck klicken/ziehen muss. Dann die Felder belegen:

    Code
    // Geklicktes Element hat die Koordinaten x und y
    var len = 4, width = 2;
    for (var i = 0; i < len; i++) {
        for (var j = 0; j < width; j++) {
            // Viereck mit den Koordinaten x+i und y+j mit Gebäude belegen
        }
    }
    Zitat

    Da könnte mann dann jedes Haus als array machen, und in diesem array die keys , verbrauchte Rohstoffe sowie einwohnerzahl mit deren value geben. Und dann beim Bauen die benötigten Ressourcen abziehen + die Einwohnerzahl addieren.

    Dafür wurde sich ein Objekt i. S. von Javascript anbieten, in dem Du die gesammelten Informationen ablegst. Oder in einen objektorientierten Ansatz einsteigen und die Gebäude als Instanzen einer "Klasse" anlegen.

    Zitat

    Upleveln neue Gebäude/Ressourcen freischalten: Überprüfung ob erhaltene punkte den sollpunktezahl erreicht hat und wenn ja die disabled Häuser/Ressourcen enablen. Aber wie soll man dies denn machen, das enablen ?

    Ich würde weniger enabeln als vielmehr die Gebäude/Ressourcen neu anlegen. Die Gebäude, die einem Spieler gehören, in einem Array ablegen und neue hinzufügen. Für das Anlegen würde sicher ebenfalls ein objektorientierter Ansatz anbieten, dann kann man ein neues Gebäude mir "new" anlegen und die Eigenschaften wie Einwohnerzahl, etc. sind gleich verfügbar.

    Dein Vorhaben ist schon etwas komplex. Ich würde es mit Canvas und einer Bibliothek wie jCanvas machen, weil diese Drag&Drop unterstützt. Das Spielfeld könntest du leicht mit zwei verschachtelten Schleifen anlegen. Menü mit den Gebäuden ebenfalls anlegen. Dann mit Drag&Drop die Gebäude auf eine Kachel ziehen lassen.


    Noch etwas komplexer würde es, wenn es in 3D sein soll. Auch dafür gibt es, glaube ich, Bibliotheken, aber ich habe keine Erfahrung damit.

    Wenn Du auch noch keine Erfahrung hast, würde ich empfehlen, mit einer 2D-Version zu beginnen.

    Wenn man die Bildgröße an die Gegebenheiten im Web anpasst, habe ich keine Probleme: JPG, 800px an der längeren Kante, Komprimierung so, dass sich eine Dateigröße von 100 bis 200 kB ergibt. Damit gibt es keinen sichtbaren Qualitätsverlust.


    Schwierig wird es, wenn man die beliebten fensterfüllenden Hintergrundbilder haben will, Dafür kenne ich auch kein Patentrezept.

    Das Skript funktioniert, jedoch werden die Bilder nicht gefunden. Sie müssen im selben Verzeichnis liegen wie die HTML-Datei:

    http://weibsbilder-design.de/h…gdurzrvuvzrv/wb-demo.html


    Das Bild wird hier gesucht:

    http://weibsbilder-design.de/h…l12gdurzrvuvzrv/bild3.png


    Edit: Da habe ich bei deinem ersten Posting nicht richtig hin gesehen: Die Bilder stehen im Verzeichnis img, d. h. das Array muss so aussehen:

    Code
    var arrayofbooks = ["img/book1.png", "img/book2.png", "img/book3.png"];

    BTW: Cooler Mousemove-Effekt.

    Nein, ID des img-Elementes ist "book" und dem entsprechend book.src = ...

    aber Variablenname des Arrays lautet "books" und dem entsprechend books[idx]

    Vielleicht hätte ich sie anders benennen sollen:

    Code
    <div class="tp-caption tp-resizeme rs-parallaxlevel-4" id="slide-699-layer-3" data-x="['left','left','center','center']" data-hoffset="['593','633','-110','-60']" data-y="['top','top','top','bottom']" data-voffset="['183','203','590','20']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="x:right;s:1500;e:Power3.easeOut;" data-transform_out="opacity:0;s:1500;e:Power4.easeIn;s:1500;e:Power4.easeIn;" data-start="2750" data-responsive_offset="on" style="z-index: 8;"><img id="idimgbook" src="img/book1.png" alt="" width="430" height="540" data-ww="['430px','430px','200px','170px']" data-hh="['540px','540px','251px','213px']" data-no-retina>
    </div>
    <script>
        var arrayofbooks = ["book1.png", "book2.png", "book3.png", "book4.png"]; // ggf. aendern/erweitern
        var idx = Math.floor(Math.random() * arrayofbooks.length);
        idimgbook.src = arrayofbooks[idx];
    </script>

    Versuche dieses:

    Code
    <div class="tp-caption tp-resizeme rs-parallaxlevel-4" id="slide-699-layer-3" data-x="['left','left','center','center']" data-hoffset="['593','633','-110','-60']" data-y="['top','top','top','bottom']" data-voffset="['183','203','590','20']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="x:right;s:1500;e:Power3.easeOut;" data-transform_out="opacity:0;s:1500;e:Power4.easeIn;s:1500;e:Power4.easeIn;" data-start="2750" data-responsive_offset="on" style="z-index: 8;"><img id="book" src="img/book1.png" alt="" width="430" height="540" data-ww="['430px','430px','200px','170px']" data-hh="['540px','540px','251px','213px']" data-no-retina>
    </div>
    <script>
        var books = ["book1.png", "book2.png", "book3.png", "book4.png"]; // ggf. aendern/erweitern
        var idx = Math.floor(Math.random() * books.length);
        book.src = books[idx];
    </script>

    In dem Layercode habe ich dem Bild die ID "book" gegeben. Nicht getestet.

    Zitat

    Wie kann ich im mobilen Menü die Menüpunkte mit weissem Hintergrund alle gleich breit machen?

    Die Breite hast Du ja schon gesetzt. Damit dies wirksam wird, musst Du noch display: inline-block hinzu fügen. Dadurch verändert sich das Layout leicht, aber das kannst Du dann sicher wieder anpassen.

    Zu 2,: Im Moment werden die Blöcke in der Reihenfolge links, rechts, links, rechts, links, rechts, usw. angeordnet. Dann sehe ich die Möglichkeit, Flexlayout zu verwenden, damit der erste Block links auf die Höhe des rechten erweitert wird. Oder ein Zweispaltenlayout, dann werden die Blöcke allerdings anders angeordnet, erst linke Spalte von oben nach unten, dann rechte Spalte von oben nach unten. Zweispaltenlayout kannst Du mit mit colomn-count anlegen, siehe z. B . hier:

    https://css-tricks.com/almanac/properties/c/columns/

    Zu 1.: Gib der section.subright ein vertical-align: top, dann sollte es funktionieren. Den Grund für diesen Effekt habe ich noch nicht richtig verstanden, es hängt damit zusammen, dass der Defaultwert für vertical-align baseline ist. Vielleicht kann MrMurphy es erklären.

    Im Prinzip könntest Du dein Problem mit dem Javascript-Befehl eval lösen, aber viele sagen "eval ist evil" und ich stimme dem zu und mag es nicht besonders.

    Stattdessen empfehle ich, die Struktur deiner Daten umzustellen (Du schreibst ja, dass Du sie selber über VBA erstellst), so dass Du einen einfachen Direktzugriff hast:

    Code
    var data = {
        Rel01067: { Relation: 'A101', Ort: 'Dresden-01067', Tor: '72', Abfahrt: '2:00'},
        Rel01069: { Relation: 'A101', Ort: 'Dresden-01069', Tor: '72', Abfahrt: '2:00'},
        Rel01097: { Relation: 'A101', Ort: 'Dresden-01097', Tor: '72', Abfahrt: '2:00'},
        // usw.
        Rel01108: { Relation: 'A101', Ort: 'DD-Weixdorf', Tor: '72', Abfahrt: '2:00'}
    }

    Zugriff ist dann sehr einfach:

    Code
    var key = document.getElementById('suchRelation').value;
    item = data[key];

    Kommt mir bekannt vor, hast Du das noch irgend wo anders gepostet?
    Ich empehle, von dem Submit der Formulare wegzugehen und statt dessen Ajax zu verwenden, dann wird nichts neu geladen und die Seite bleibt, wie sie ist, einschl. Formulareingaben, Javascriptvariablen etc.

    Das Umschalten der Navigation wird an den Hamburger-Button gebunden durch diesen Code:


    document.getElementById('hamburger-button');
    button.addEventListener('click', toggleNav);

    und ist daher nur bei Klick auf diesen wirksam.
    Mein Code bewirkt, dass auch bei Klick auf die Links das Menü getoggelt wird.
    Ob das zu jedem Menü dazu gehört, kann ich nicht sagen. Es hängt davon ab, wie man es haben will.


    BTW: Hast Du dieses Menü selbst entwickelt?