Auf Thema antworten

Beitrag

[QUOTE="Yavis, post: 13859, member: 4731"]
Ich habe jetzt mal auf die schnelle ein kleines Beispiel erstellt, wie ich das gewonne Wissen ungefähr umsetzen würde.

Mag jetzt für den einen oder anderen nicht hübsch sein, aber für mich reicht es erstmal:

[CODE=html]<html>

<body>

var str = name;

document.getElementById("test1").innerHTML = str;
            }

f();

</script>

var str = name;

document.getElementById("test2").innerHTML = str;
            }

f();

</script>

var str = name;

document.getElementById("test3").innerHTML = str;
            }

f();

</script>

var str = name;

document.getElementById("test4").innerHTML = str;
            }

f();

</script>
</body>

</html>[/CODE]

[CODE=css].Table {
    height: 100vh;
      width: 100vw;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));   
    grid-template-rows: repeat(auto-fill, minmax(25px,1fr));
    grid-gap: 0;
    margin: 0;
    margin-left: 5px;
    margin-right: 5px;
}

.Haus1 {
    grid-column: 2;
    grid-row: 3;
    background-color: #D3D3D3;
    border: 1px solid black;
    padding: 3 0 0 3;
}

.Haus1Data {
    grid-column: 3;
    grid-row: 3;
    border: 1px solid black;
    text-align: right;
    padding-right: 3;
}

.Haus2 {
    grid-column: 2;
    grid-row: 8;
    background-color: #D3D3D3;
    border: 1px solid black;
    padding: 3 0 0 3;
}

.Haus2Data {
    grid-column: 3;
    grid-row:8;
    border: 1px solid black;
    text-align: right;
    padding-right: 3;
}

.Item1 {
    grid-column: 5;
    grid-row: 3;
    border: 1px solid black;
    text-align: center;
    padding-top: 2;
}

.Item2 {
    grid-column: 5;
    grid-row: 4;
    border: 1px solid black;
    text-align: center;
    padding-top: 2;
}

.Item3 {
    grid-column: 5;
    grid-row: 5;
    border: 1px solid black;
    text-align: center;
    padding-top: 2;
}

.Item4 {
    grid-column: 5;
    grid-row: 6;
    border: 1px solid black;
    text-align: center;
    padding-top: 2;
}

.Art1 {
    grid-column: 7;
    grid-row: 3;
    border: 1px solid black;
    text-align: center;
    padding-top: 2;
}

.Art1Data {
    grid-column: 8;
    grid-row: 3;
    border: 1px solid black;
    text-align: center;
    padding-top: 2;
}

.Art2 {
    grid-column: 7;
    grid-row: 8;
    border: 1px solid black;
    text-align: center;
    padding-top: 2;
}

.Art2Data {
    grid-column: 8;
    grid-row: 8;
    border: 1px solid black;
    text-align: center;
    padding-top: 2;
}[/CODE]

[CODE=javascript]
var Haus1 = {name: "XYZ"}

var Haus2 = {name: "ABC"}

var Art1 = {name: "Blau"}

var Art2 = {name: "Gr&uumln"}[/CODE]

Ich habe dazu noch folgende Fragen bitte: kann man das in HTML/CSS/JS irgendwie vereinfachen?
 - also kann man in HTML/CSS z.B. die Elemente Item1-Item4 auf weitere Zeilen in der gleichen Spalte darstellen, ohne dass ich für jedes Element wieder eine neue Beschreibung in CSS eingeben muss?
 - Warum werden die Variablen nach unten versetzt angezeigt? Ich könnte natürlich mit Padding arbeiten, um dass zu korrigieren. Ich würde aber einfach gerne verstehen, warum das so komisch angezeigt wird.
 - Kann ich den JS-Code irgendwie vereinfachen, um mit mehreren Platzhaltern zu arbeiten, oder muss ich einfach für jeden Platzhalter den gleichen JS-Code kopieren und einfügen?

Vielen Dank schon mal für alle hilfreichen Antworten im Voraus.
[/QUOTE]

Authentifizierung