Opened by GwenDragon at 2025-12-01 11:10
User since
2011-03-19
3781 Artikel
BenutzerIn
![[Homepage]](/battie/theme/default/homepage.gif)
2011-03-19
3781 Artikel
BenutzerIn
Ok, das erste Türchen ist schon befüllt:
https://rolfrost.de/advent.html
Das habe ich soeben programmiert und das verpflichtet für die nächsten Tage ;)
PS: Gar nicht soooo schwer, eine Pixelgrafik responsive unter eine Tabelle zu legen. Der Trick besteht darin, die Breite der Tabelle mit innerWidth zu bestimmen. Die Höhe ist dann 3/4. Und siehe da, auf dem Smartphone sieht der Kalender genauso aus wie auf dem Laptop ;)
PS: Nun direkt im CSS
Also Breite/Höhe ohne Javascript, dann passt sich die Tabelle an den Viewport automatisch an wenn der Browser scaliert wird -- ohne die Seite neu laden zu müssen.
Und auch morgen wieder öffnen wir ein Türchen ;)
.
Last edited: 2025-12-08 21:28:26 +0100 (CET)
https://rolfrost.de/advent.html
Das habe ich soeben programmiert und das verpflichtet für die nächsten Tage ;)
PS: Gar nicht soooo schwer, eine Pixelgrafik responsive unter eine Tabelle zu legen. Der Trick besteht darin, die Breite der Tabelle mit innerWidth zu bestimmen. Die Höhe ist dann 3/4. Und siehe da, auf dem Smartphone sieht der Kalender genauso aus wie auf dem Laptop ;)
PS: Nun direkt im CSS
Code: (dl
)
1
2
3
4
5
6
7
8
9
10
table{
background-image: url("/astro/advent.jpg");
background-size: 100%;
color: blue;
font-size: x-large;
font-weight: bold;
width: calc(100vw - 68px);
height: calc((100vw - 68px)*3/4)
}
Also Breite/Höhe ohne Javascript, dann passt sich die Tabelle an den Viewport automatisch an wenn der Browser scaliert wird -- ohne die Seite neu laden zu müssen.
Und auch morgen wieder öffnen wir ein Türchen ;)
.
Last edited: 2025-12-08 21:28:26 +0100 (CET)