Guten Abend zusammen,
für eine Temperaturüberwachung unseres Schildkrötengeheges möchte ich eine Webseite erstellen, die den Temperaturverlauf und die aktuelle Temperatur anzeigt.
Das funktioniert mit Grafana auch soweit.
Jetzt ist es so, das ich eine Überschrift, zwei 'Iframes' und vier Bilder auf meiner Webseite habe. Der Inhalt der Webseite ist in einer *.php - Datei und die Gestaltung in einer *.css - Datei.
Ich habe mit der *.css - Datei den Inhalt der Webseite gestern positioniert. Gerade wollte ich die Anordnung der 'Iframes' nochmals anpassen, allerdings ändert sich die Position nicht mehr.
Ich ändere die *.css - Datei, speichere sie und aktualisiere die Webseite und sie sieht so aus wie davor. Auch ein Neustart des Raspberrys änderte nichts.
Kann mir mal einer bitte sagen, was an diesen Codes falsch ist?
Die Bilder werden durch vier unterschiedliche ersetzt, die ich gerade aber noch nicht habe, deswegen sind gerade vier gleiche drin.
Die Position der 'iframes' sind hier im Beispiel so eingestellt, dass sie sich überlappen sollten, einfach nur weil ich einen Positionsunterschied sehen wollte, der kam aber nicht vor.
<!DOCTYPE html>
<html>
<head>
<title>Tortoise Home</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<center><h1>Temperaturüberwachung</h1></center>
<div>
<iframe src="http://192.168.0.67:3000/d-solo/2qYQh4zRz/diagramm?orgId=1&refresh=10s&panelId=8" width="1000" height="350" frameborder="0"></iframe>
</div>
<div1>
<iframe src="http://192.168.0.67:3000/d-solo/2qYQh4zRz/diagramm?orgId=1&refresh=10s&panelId=4" width="300" height="300" frameborder="0"></iframe>
</div1>
<div2><img src="Hugo_klein1.png" width="300" height="300"></div2>
<div3><img src="Hugo_klein1.png" width="300" height="300"></div3>
<div4><img src="Hugo_klein1.png" width="300" height="300"></div4>
<div5><img src="Hugo_klein1.png" width="300" height="300"></div5>
</body>
</html>
Alles anzeigen
h1 {
font-family: Verdana, sans-serif;
}
div {
position:absolute;
top:100px;
left:50px
}
div1 {
position:absolute;
top:90px;
left:50px
}
div2 {
position:absolute;
top:550px;
left:150px
}
div3 {
position:absolute;
top:550px;
left:550px
}
div4 {
position:absolute;
top:550px;
left:1000px
}
div5 {
position:absolute;
top:550px;
left:1400px
}
Alles anzeigen
Bin auch über alle Tipps und Verbesserungen dankbar, das hier ist meine erste Webseite.
Vielen Dank und Grüße
Dennis