An allen Ecken positionieren

html.de-Forum HTML, XHTML & CSS
1

Hallo zusammen,

ich versuche gerade, mir HTML beizubringen, scheitere aber an einer Aufgabe.
Hier versuche ich gerade nach Vorbild der http://qlocktwo.com/ eine Seite zu erstellen.

Ich bekomme es nicht ganz hin, dass ich an jeder Ecke einen Punkt positioniere, der auch dort bleibt, wenn sich die Browsergröße verändert.

Hier mal mein Code:

[CODE]

Word Clock
. . . .
ITLISASAMPM
ACQUARTERDC
TWENTYFIVEX
HALFBTENFTO
PASTERUNINE
ONESIXTHREE
FOURFIVETWO
EIGHTELEVEN
SEVENTWELVE
TENSO'CLOCK
[/CODE] Die CSS: [HTML]@charset "utf-8";

body {
background-color: #212121;
display: flex;
align-items: center;
justify-content: center;
}

#word{
background-color: black;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
color: grey;
font: 30px’Inconsolata’, ‚Courier‘;
letter-spacing: 20px;
padding: 50px;
margin: 50px 400px;
text-align: center;
}
.letter{
margin: 25px;
background-color: black;
padding: 50px;
}
.on{
color: #EEE;
}

.m1{
position:absolute;
font-size: 50px;
top: 75px;
left: 450px;
}
.m2{
position:absolute;
font-size: 50px;
top: 75px;
right: 450px;
}
.m3{
position:absolute;
font-size: 50px;
bottom: 150px;
right: 450px;
}
.m4{
position:absolute;
font-size: 50px;
bottom: 150px;
left: 450px;
}

[/HTML]

So sieht es jetzt gerade aus. Aber die Punkte an den Ecken verschieben sich, wenn die Browsergröße angepasst wird.
[ATTACH]4632[/ATTACH]

Danke vorab

2

Hallo

Deine Angaben verhalten sich genau so wie es vorgesehen ist. Offensichtlich sind deine Erwartungen falsch.

Siehe zum Beispiel

https://www.mediaevent.de/tutorial/css-position-absolute-relative.html

Insgesamt solltest du dir eine seriöse Anleitung für HTML / CSS beschaffen. Dein Quellcode hat mit aktuellem HTML nichts zu tun und führt auch nicht dorthin.

Gruss

MrMurphy