Hallo zusammen,
ich brauche mal etwas Erklärung. In meiner Seite, die ich in #17 gepostet habe, sind alle Elemente untereinander, so wie ich es gerne auf einem kleinen Display (Smartphone) hätte. Auf dem PC hätte ich aber gerne, dass die Seite so aussieht:
Oben die zwei Anzeigen und darunter kommen mal vier Schildkrötenbilder und das Ganze immer in der Mitte der Seite. Ist mein Browser maximiert, dann habe ich das mit dieser *.php- Datei geschaft:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-auto-rows: 50px;
grid-auto-columns:50px;
grid-gap: 5px;
justify-items: center;
align-items: center;
}
.Aktuelle-Temp {
grid-column-start: 6;
grid-column-end: 9;
grid-row-start: 2;
grid-row-end: 5;
}
.Temp-Verlauf {
grid-column-start: 13;
grid-column-end: 32;
grid-row-start: 2;
grid-row-end: 5;
}
.Rosi {
grid-column-start: 6;
grid-column-end: 10;
grid-row-start: 10;
grid-row-end: 10;
}
.Willy {
grid-column-start: 13;
grid-column-end: 18;
grid-row-start: 10;
grid-row-end: 10;
}
.Spike {
grid-column-start: 20;
grid-column-end: 25;
grid-row-start: 10;
grid-row-end: 10;
}
.Whiskey {
grid-column-start: 27;
grid-column-end: 32;
grid-row-start: 10;
grid-row-end: 10;
}
</style>
<title>Tortoise Home</title>
<center><h1>Temperaturüberwachung</h1></center>
<div class="grid-container">
<div class="Temp-Verlauf">
<iframe src="http://192.168.0.67:3000/d-solo/2qYQh4zRz/diagramm?orgId=1&refresh=10s&panelId=8" width="1100" height="300" frameborder="0"></iframe>
</div>
<div class="Aktuelle-Temp">
<iframe src="http://192.168.0.67:3000/d-solo/2qYQh4zRz/diagramm?orgId=1&refresh=10s&from=1603601862716&to=1603623462716&panelId=4" width="300" height="300" frameborder="0"></iframe>
</div>
<div class="Rosi"><img src="Hugo_klein1.png" width="300" height="300"></div>
<div class="Willy"><img src="Hugo_klein1.png" width="300" height="300"></div>
<div class="Spike"><img src="Hugo_klein1.png" width="300" height="300"></div>
<div class="Whiskey"><img src="Hugo_klein1.png" width="300" height="300"></div>
</head>
</html>
Alles anzeigen
Was mit fehlt ist der Spagat dazwischen. Beide Seiten reagieren nicht auf Änderungen der Seitengrößen.
Hier ist viel erklärt. Daher weis ich, dass mir noch dass ' media screen’ fehlt. Jedoch verstehe ich an diesen Beispielen die Positionierung der einzelnen Elemente nicht. In jeder Anleitung wird gefühlt ein anderer Ansatz gewählt, das macht es mir gerade nicht leichter.
Falls die Programmierrichtung "Mobile-first" tatsächlich die Richtung ist die man einschlägt würde ich die Webseite gerne so aufbauen. Ich denke dass man später zu 80% die Seite mit einem Tablet oder Handy anschaut.
Kann mir da bitte jemand auf die Sprünge helfen oder mich vom Schlauch schubsen, auf dem ich gerade stehe?
Achja, jetzt wisst ihr auch das mein Profilbild Hugo heißt
Grüße
Dennis