4 x 4 mitFlex

Ich glaube ich weiß, was du meinst. Ich habe das mal versucht mit Flex nachzubauen.

https://basti1012.bplaced.net/…rdner=html-seminar&id=315

Was du mit Javascript darauf zugreifen meinst weiß ich nicht.

Deswegen zeigt er dir beim hovern die ID des Kastens an.

Andersrum kannst du im Textfeld ein Text und eine Box angeben und der Text erscheint in der Box und in der versteckten Box

Sonst weiß ich nicht was du sonst meinen könntest. Aber mit der Funktion siehst du ja wie man darauf zugreifen kann und kannst dann das anpassen wie du willst.

Aber das grid funktioniert bei mir nur im Opera, in den anderen wieder nicht

So langsam verstehe ich es auch mit Flex. Aber noch nicht alles.

Ich hoffe das ich auch alles richtig mache? Das end Ergebnis stimmt zumindest.Falls hier einer mitlesen tut und Ahnung hat ,der soll bitte was sagen, wenn ich es falsch mache. Danke.

So habe dir ein Beispiel gemacht . du musst nur jetzt beide Scripte zusammen bauen ,weil etwas eigen Initiative wäre zum Lernen schon besser .

Die boxen passen sich jetzt an .jenachdem wie groß das Fenster ist, werde die boxen nach unten weiter gegeben .Also ich meine so wie du es wolltest.

Meine blöde Leertaste klemmt voll,voll nervig .

Falls es nicht klappt helfen wir trotzdem gerne weiter

Da muß ich erstmal selber überlegen.

Kriege das auf der schnelle nicht hin .

Ich muß jetzt erstmal zur Arbeit. Vieleicht kann sich das in der Zeit ein anderer ankucken und dir helfen.

Fals bis dahin noch keiner helfen konnte werdeich mich heute mittag dran setzten wenn ich von arbeit zurück bin.

Wenn es schnellgehen würde hätte ich es jetzt noch schnell gemacht ,aber ich glaube das ich da erstselber testen und probieren muß,weil kenne mich ja selber ganz gut und weiss das ich wahrscheinlich erst wieder falsch beginne und irgendwann doch aufden richtigen weg komme .

Aber schaun wa mal ,vieleicht hat bis dahin einer zeit für dich und kann das mal gerade erledigen.

Zitat

Fals hier einer mitlesen tut und ahnung hat ,der soll bitte was sagen wenn ich es falsch mache. Dannke.

IMO macht ein <ul> ohne <li>-s drin keinen Sinn.

Zitat

Kriege das auf der schnelle nicht hin .

Ich muß jetzt erstmal zur Arbeit. Vieleicht kann sich das in der Zeit ein anderer ankucken und dir helfen.

Wenn ich es richtig verstanden habe, sollte dies es tun:

    <style>
        #wrapper1 {
            display: inline-flex;
            flex-direction: column;
            border: 2px solid lightblue;
        }

        .line {
            display: flex;
            flex-direction: row;
        }

        .box {
            /* width: 12.5vw;
            height: 12.5vw; */
            border: 2px solid lightblue;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .tt {
            position: absolute;
            width: 80%;
            left: 10%;
            text-align: center;
            background-color: aquamarine;
            display: none;
        }
        .box:hover .tt {
            display: block;
        }
    </style>
    <div id="wrapper1">
    </div>
    <input id="nrinput" type="number" min="2" max="10" onchange="go(this.value);">Gib die Anzahl der Kästchen pro Kante ein.
    <script>
        function go(nr) {
            var wrapper = document.getElementById("wrapper1");
            wrapper.innerHTML = "";
            for (var i = 0; i < nr; i++) {
                var line = document.createElement("div");
                line.className = "line";
                wrapper.appendChild(line);
                for (var j = 0; j < nr; j++) {
                    var box = document.createElement("div");
                    box.className = "box";
                    var d = 50 / nr + "vw";
                    box.id = "box-" + (i + 1) + "." + (j + 1);
                    box.style.width = box.style.height = d;
                    box.innerHTML = (i * nr + j + 1);
                    var tt = document.createElement("div");
                    tt.className = "tt";
                    tt.innerHTML = (i +1) + "." + (j + 1);
                    tt.style.top = d;
                    box.appendChild(tt);
                    line.appendChild(box);
                }
            }
        }
        go(5);
    </script>

Hiermit: box.id = "box-" + (i + 1) + "." + (j + 1); habe ich jeder Box eine ID mit Zeilen- und Spaltennummer gegeben. Damit kannst Du dann von Javascript aus darauf zugreifen.

Hmmm, du meinst die Formatierung, also wie das Gecodete aussieht.

Schätze, das hängt auch von den verwendeten Tools ab, aber natürlich auch davon, wie lange jemand schon codet.

Etwas anderes ist es mMn, wie ein "Problem" gelöst wurde. Bekanntlich führen viele Wege nach Rom, aber mancher hat halt so seine Lieblingsstrecken

Stimmt, da hat jeder so seinen eigenen Stil. Was nicht nur reine Geschmackssache ist, ist die Formatierung: Richtiges Einrücken hilft ungemein, den Code zu verstehen und Fehler schnell zu erkennen. Ein guter Editor ist dabei hilfreich. Bei mir Rechtsklick - "Dokument formatieren" und der Code ist übersichtlich, auch wenn er vorher chaotisch aussah.